Basics of Python graphical interface: Arranging elements using Grid Layout

introduction

In this blog, we will delve into the basics of graphical user interface ( GUI ) development in Python . Specifically, we will learn how to use the Grid Layout ( Grid Layout ) in the Tkinter library to arrange and layout GUI elements. Grid layout is a powerful way to create GUI interfaces with complex structures, such as forms, dashboards, and grid views. We'll explain in detail how to use grid layout, including creating a grid, placing elements in the grid, and customizing the grid layout.

What is Tkinter's grid layout?

Tkinter is a standard library for creating GUIs in Python , and grid layout is a layout manager provided by the Tkinter library. Using a grid layout, you divide your GUI interface into a two-dimensional grid and place various GUI elements in different rows and columns of the grid. This makes creating complex layouts very intuitive because you can specify exactly where each element should be placed on the interface.

The main concepts of grid layout include:

• Grid: The GUI interface is divided into grid units, and each grid unit can contain one or more GUI elements.

• Rows and Columns: Grid cells are defined by row and column intersections. Rows are numbered from top to bottom and columns are numbered from left to right. For example, the first row and first column are ( 0 , 0 ), the first row and second column are ( 0 , 1 ), and so on.

• Element placement: You can place elements in the grid by specifying the number of rows, columns, and spans the elements occupy.

Now let's start learning how to use grid layout in Tkinter .

Step 1: Import the Tkinter module

First, make sure you have Python installed and include the Tkinter library. Then, import the Tkinter module in your Python script to use the functionality of the Tkinter library.

import tkinter as tk

Step 2: Create Tkinter window

Before using Tkinter , you need to create a Tkinter window object, usually called root. This window will serve as the main window of the GUI application.

root = tk.Tk()
root.title("网格布局示例")

In the code above, we create a Tkinter window object rootand set the title of the window to "Grid Layout Example".

Step 3: Create the grid

In grid layout, you need to create a grid first. This can be achieved by creating an Frameobject and attaching it to rootthe window. You can then grid()add the grid to the window using the method.

# 创建一个Frame作为网格容器
grid_frame = tk.Frame(root)

# 使用grid()方法将网格添加到窗口中
grid_frame.grid()

In the above code, we create an Frameobject grid_frameand attach it to rootthe window. We then grid()add the grid to the window using the method.

Step 4: Place elements in the grid

Once the grid is created, you can place GUI elements in specific rows and columns of the grid. To achieve this, you need to use the rowand columnparameters to specify the row and column where the element is located.

Here's an example of how to create a label and a button and place them in different locations in a grid layout:

# 创建一个标签
label = tk.Label(grid_frame, text="这是一个标签")

# 将标签放置在第0行第0列
label.grid(row=0, column=0)

# 创建一个按钮
button = tk.Button(grid_frame, text="这是一个按钮")

# 将按钮放置在第1行第1列
button.grid(row=1, column=1)

In the above example, we first created a label labeland a button buttonand then grid()placed them at different locations in the grid using the method. The label is placed at row 0 , column 0 , and the button is placed at row 1 , column 1 .

Step 5: Customize Grid Layout

Grid layout provides many options to customize the arrangement and appearance of elements in the grid. Here are some common options for customizing your grid layout:

• Span ( rowspan and columnspan ): You can use rowspanthe and columnspanparameters to specify the number of rows and columns that the element spans. This allows you to create elements that occupy multiple grid cells.

• Padding ( padx and pady ): You can use padxthe and padyparameters to specify extra space around the element. This can be used to control the size of elements and the spacing between them.

• Alignment ( sticky ): Use stickythe parameter to specify the alignment of an element within its grid cells. You can define the alignment of elements using combinations of N , S , W , and E (for north, south, west, and east).

Here's an example of how to customize the span, padding, and alignment of elements in a grid layout:

# 创建一个标签
custom_label = tk.Label(grid_frame, text="自定义标签")

# 将标签放置在第0行第0列，并跨越2列
custom_label.grid(row=0, column=0, columnspan=2)

# 创建一个按钮
custom_button = tk.Button(grid_frame, text="自定义按钮")

# 将按钮放置在第1行第0列，并设置填充和对齐方式
custom_button.grid(row=1, column=0, padx=10, pady=10, sticky="w")

In the above example, we created a custom label custom_labeland a custom button custom_button, and used grid()the method to make custom layout settings.

Complete sample code

Here is a complete sample code that demonstrates how to create a Tkinter window and arrange labels and buttons using a grid layout:

import tkinter as tk

# 创建Tkinter窗口
root = tk.Tk()
root.title("网格布局示例")

# 创建一个Frame作为网格容器
grid_frame = tk.Frame(root)

# 使用grid()方法将网格添加到窗口中
grid_frame.grid()

# 创建一个标签
label = tk.Label(grid_frame, text="这是一个标签")

# 将标签放置在第0行第0列
label.grid(row=0, column=0)

# 创建一个按钮
button = tk.Button(grid_frame, text="这是一个按钮")

# 将按钮放置在第1行第1列
button.grid(row=1, column=1)

# 启动Tkinter主事件循环
root.mainloop()

Rendering:

Code explanation

Let us explain the above code line by line:

• We first imported the Tkinter module in order to use the functionality of the Tkinter library.

• Created a Tkinter window object rootand set the title of the window to "Grid Layout Example".

• FrameAn object is created grid_frameand grid()added to rootthe window using the method.

• Created a label labeland a button buttonand grid()placed them at grid_framedifferent locations in the grid using the method.

• Finally, Tkinter 's main event loop is started , making the window interactive.

in conclusion

In this article, we learned how to arrange and layout GUI elements using grid layout in Tkinter . Grid Layout is a powerful layout manager that can be used to create complex GUI interfaces. By dividing the interface into a grid of rows and columns, we are able to precisely control the position and layout of elements. In real GUI applications, grid layout is a very useful tool that can help you create excellent user interfaces. Continuing to learn Tkinter , you will be able to build more complex and interactive GUI applications.