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 sixth official Python column, stop! Don’t miss this zero-based article!

Earlier, the student committee wrote a nanny level UI tutorial, showing that [two buttons in one window, click to prompt different messages], which is quite popular.

But it was a simple layout. It was supposed to beDevelop check-in proceduresBut it is necessary to teach layout (Once you have a solid foundation, you can do everything quickly and be competent in complex UI application development!).

What is layout?

Layout is planning deployment to do a big thing, go astray. The layout here describes the placement of components in the UI application.

Simply understand the layout, just like doing interior design customization, customize a table and chair in the hall, make a tea set, make the residents happy through elaborate design!

Do UI class/interface application development, the same is true, and then put several buttons and tables on the interface, give users direct operation feedback data (this is also the development needs to master the basis of learning, I added to share)

Okay, Python’s built-in Tk UI suite has three layouts, but I’ll focus on the Grid.

Talk about Tk’s grid layout

Grid layout, very intuitive, is grid, like a table

First row, first column First row, second column
Second row, first column Second row, second column

This is the prototype for grid layout. Yes, simple as that. The UI application we will be developing is as follows:

A 2×2 table layout with 4 buttons, two in each row.

So how do we do this?

Look directly at the following code

This code is modified from the previous article, using the grid method, passing in some orientation parameters.

Save the following code as tkui_lxw_demo.py and run it.

# -*- coding: utf-8 -*-
# @Time: 2021/8/29 11:58 am
# @Author : LeiXueWei
# @csDN /Juejin/Wechat: Lei Xuewei
# @XueWeiTag: CodingDemo
# @File : tkui_layout.py
# @Project : hello

from tkinter import *
import tkinter.messagebox as mb

top = Tk()
top.title("Tkinter layout Demo")
top.geometry('600x400')


def open_msg_box():
    mb.showinfo("[Tips from the Committee]"."Simple message pop-up window!")


def open_err_box():
    mb.showerror("[Tips from the Committee]"."Demo error message window!")

# add 01 and 02 here to the button display text.
first = Button(top, text="Click 01-> View Message".fg="tomato".command=open_msg_box)
second = Button(top, text="Click 02-> View Errors".fg="tomato".command=open_err_box)
Note out the previous article
# first.pack()
# second.pack()
#-- CSDN code display --#
Then add two buttons on the second line
button03 = Button(top, text="Click 03-> View Message".fg="tomato", padx=8, pady=8,
                  background="blue",
                  highlightbackground="blue")
button04 = Button(top, text="Click 04-> View Errors".fg="tomato", padx=8, pady=8,
                  background="green",
                  highlightbackground="green")
# Ok, let's show you how to use grid layout.
first.grid(row=0, column=0, sticky=W)
second.grid(row=0, column=1, sticky=W)
button03.grid(row=1, column=0, sticky=W)
button04.grid(row=1, column=1, sticky=W)
Call the event loop to keep the UI application from exiting.
top.mainloop()
Copy the code

The code on

From our observations, we mainly use the grid function, which takes three parameters.

  • Row places the UI components in the row, starting at 0
  • Column puts the UI components in what column, starting at 0
  • The position W of sticky is to indicate a westward orientation.

The code above for placing components in the grid tells the program:

The first button is placed in the first row, first column The second button is placed in the first row, second column
Button03 is in the second row, first column Button04 second row, second column

Have you learned? Run the program to see the layout above.

More on layout

options meaning
column Specifies the column to be inserted by the component (0 for column 1)
columnspan Specifies how many columns (across columns) to display the component
row Specifies the row to be inserted by the component (0 for line 1)
rowspan Specifies how many rows (across rows) to display the component
ipadx Specifies the horizontal inside margin
ipady Specifies the inside margin in the vertical direction
padx Specifies the horizontal margin
pady Specifies the vertical margin
sticky Not set in the middle and the control component in the grid distribution location in space under the (ewsn on behalf of the north and south, east and west, north south west right east left) use a plus sign (+) said elongated filling, such as “n” + “s” said components vertically elongated fill the grid, “N” + “S” + “W” + “E” means to fill the entire grid

The in or in_ option allows you to place the component in the parent specified by the option, which must be the parent of the component. This is the default.

We try below, above the table can see more without memory!

The code is as follows:

Here the CSDN does not paste all, directly in the above code button 3(is the beginning of this line *# — thunder CSDN code display — #*) position began to cover for the following code. Save the file and run it again.

#-- CSDN code display --#
Then add two buttons on the second line
button03 = Button(top, text="Click 03-> View Message".fg="tomato", padx=8, pady=8,
                  background="blue",
                  highlightbackground="blue")
button04 = Button(top, text="Click 04-> View Errors".fg="tomato", padx=8, pady=8,
                  background="green",
                  highlightbackground="green")
button05 = Button(top, text="Hit 05 fill the third line.".fg="tomato", padx=8, pady=8,
                  background="green",
                  highlightbackground="green")
# Ok, let's show you how to use grid layout.
first.grid(row=0, column=0, sticky=W)
second.grid(row=0, column=1, sticky=W)
button03.grid(row=1, column=0, sticky=W)
button04.grid(row=1, column=1, sticky=W)
button05.grid(row=2, column=0, columnspan=2, sticky=W+E) # put it in the third row, merge the columns, and set W+E to cover the third column.
Call the event loop to keep the UI application from exiting.
top.mainloop()
Copy the code

extension

Many large and complex UIs are simply iterative iterations of a grid layout. Mastering the core layout above can be extrapolated to develop more layers of the interface.

There are two other layouts for Tk that are not primarily UI development, and I think the others are either too extensive or too detailed for quick development (see the Place layout if you like to be more detailed). Layout ideas are not limited to Tk, or Python, many UI solutions have similar concepts (flow layout, grid layout, precise placement), master a kind of in fact can be all-in-one, because ray learning committee ten years ago to play Swing application development is very skilled…

Later to share more applications, nothing more to try the above parameters.

If you’re reading this, you might think that the buttons in the top row have big gaps, right? How do you fill it? You are welcome to comment in the comments section.

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. Welcome to pay attention, and feel free to like the collection!