Small knowledge, big challenge! This article is participating in the “Essentials for Programmers” creative activity. This article has participated in the “Digitalstar Project” to win a creative gift package and challenge the creative incentive money.

The seventh official Python column, stop! Don’t miss this zero-based article!

Previously, the student committee has written two nanny level UI tutorials, from the beginning [put two buttons in a window, click to prompt different messages], to the details of the UI master grid layout, are very popular.

This is to test our learning results: actual combat! Take you to make the following interface!

In a few minutes, we developed this application:

Let’s use the web layout to implement this interface!

The first step must be observation and analysis

The interface is divided into 5 rows, with the following 5 circles:



So our grid is going to be 0 to 4.

At the same time, we see that the interface is divided into three columns, left, middle and right.

And finally, just the last three rows, it’s full.

As simple as that, the committee finished the layout and began to develop.

Step 2 write the code

Code is not much, directly to share with you.

Save the following code as name_checker_ui.py and run it

# -*- coding: utf-8 -*-
# @time: 2021/8/29 10:30am
# @Author : LeiXueWei
# @csDN /Zhihu: Thunder Committee
# @XueWeiTag: CodingDemo
# @File : name_checker_ui.py
# @Project : hello


from tkinter import *

TITLE = '[Lei Committee]🉐 Activity attendance check gadget '
BG_COLOR = 'skyblue'

class LXW_NAME_LISTING_GUI():
    def __init__(self, root):
        self.root = root
        self.log_line_no = 0

    def setup_root_win(self):
        # Window title, size, color Settings.
        self.root.title(TITLE)
        self.root.geometry('605x600')
        self.root.configure(bg=BG_COLOR)
        # self.root.resizable(0, 0) # Block resizing of Python GUI
        # Component tag
        self.data_label = Label(self.root, width=10, background="tomato", text="All expected personnel.")
        self.banner_label = Label(self.root, width=2, height=25, background="black", text="")
        self.result_label = Label(self.root, width=10, background="tomato", text="Actual attendance")
        # Handle data button
        self.process_btn = Button(self.root, text="Start check".fg="red".bg="blue", width=10,
                                  command=self.compare_data)
        self.log_label = Label(self.root, width=10, background="tomato", text="Absent person")
        # Text display box
        self.all_member_text = Text(self.root, width=40, height=25)
        self.attended_text = Text(self.root, width=40, height=25)
        self.log_text = Text(self.root, width=85, height=9)
        # layout
        self.data_label.grid(row=0, column=0, sticky=W+E)
        self.banner_label.grid(row=0, column=1, rowspan=2, sticky=W)
        self.result_label.grid(row=0, column=2, sticky=W+E)
        self.all_member_text.grid(row=1, column=0, sticky=W)
        self.attended_text.grid(row=1, column=2, sticky=W)
        self.process_btn.grid(row=2, column=0, sticky=W)
        self.log_label.grid(row=3, column=0, columnspan=3, sticky=W+E)
        self.log_text.grid(row=4, column=0, columnspan=3, sticky=W+E)

    def compare_data(self):
        pass


def app_start():
    root = Tk()
    leixuewei_ui = LXW_NAME_LISTING_GUI(root)
    leixuewei_ui.setup_root_win()
    Enter the event loop and keep the window running
    root.mainloop()


if __name__ == "__main__":
    # start program
    app_start()
Copy the code

Other Tk interface development code has been mentioned before, but here is the focus on layout.

Take a look at the layout code in detail

Start self.data_label.grid(row=0, column=0, W+E) self.banner_label.grid(row=0, column=1) Self.result_label. grid(row=0, column=2, sticky=W+E) rowspan=2, sticky=W) # Self.all_member_text. Grid (row=1, column=0, sticky=W) self.attended_text. Grid (row=1, column=2, (W) self.process_btn.grid(row=2, column=0, sticky=W) Grid (row=3, column=0, columnSPAN =3, sticky=W+E) Grid (row=4, column=0, columnSPAN =3, sticky=W+E) #Copy the code

With that, the explanation is over.

Other new knowledge is the Label and Text components, which are similar to the button utility, so you can teach yourself.

This is a typical application where the reader can expand on the table and imagine a richer interface, but not the richer the better.

Need to have a certain design, later to share more applications, have no problem to do the above grid layout several times.

If you like Python, please pay attention to learn the Basic Python column or Get started in Python to master the big column

Continuous learning and continuous development, I am Lei Xuewei! Programming is fun. The key is to get the technology right. Creation is not easy, please pay attention to the collection of likes, or leave a comment to encourage!