Tkinter Layout Management __python of Python GUI

Python3 tkinter series

I. Overview
Second, layout management
C. Common components
Iv. actual Combat (i)
V. Actual combat (II.)

Layout refers to the position of controls (assemblies) in a form container. There are three geometric layout managers in Tkinter, namely pack layout, grid layout, place layout.

Pack layout
Using the pack layout, you add components to the container, the first component is added at the top, and then the next.

From Tkinter import *

root = Tk ()

#创建三个 label is added to the root form 
#Label是一种用来显示文字或者图片的组件
label (root,text = ' Pack1 ', bg = ' red '). Pack () 
label (root, Text = ' Pack2 ', bg = ' blue '). Pack () 
label (root, Text = ' Pack3 ', bg = ' green ') ). Pack () 

Root.mainloop ()

As shown in figure:
Pack Common Properties

Property name	Property Brief	take value	value Description
fill	Set component Whether to fill the	X, y, BOTH, and NONE	fill = X horizontally or vertically in the horizontal or vertical direction fill = Y (vertical fill) fill = BOTH (horizontal and vertical) None not fill
Expand	Sets whether the component expands and the side option is invalid when the value is yes. The component is displayed in the center of the parent container, and if the Fill option is both, the remaining space of the parent component is populated. The default is to not expand	YES, no (1, 0)	expand=yes expand=no
side	to set the alignment of the component	left, top, right, BOTTOM	values are left-to-right
ipadx, Ipady	sets the X-direction (or y-direction) internal gap (child Interval between components	to set a numeric value, the default is a 0	nonnegative integer, in pixels
padx, Pady	set the x direction (or y-direction) external gap (with The interval between the components of the component (s)	to set the numeric value, which defaults to 0	nonnegative integers, in pixels
anchor	anchoring option, when free space is greater than the required size Determines where the component is placed in the container	N, E, S, W, NW, NE, SW, SE, center (default is center)	represents eight orientations and the center

Note: The values in the table above are constants, yes is equivalent to "yes", and can be passed directly into string values. In addition, when the interface complexity increases, to achieve some kind of layout effect, need to be layered to achieve.

From tkinter Import *    #注意模块导入方式, otherwise the code will be different

class App:
    def __init__ (self, Master):
        #使用Frame增加一层容器
        FM1 = Frame (Master)
        #Button是一种按钮组件, similar to label, only has the function
        Button (FM1, text= ' top ') that responds to the Click. Pack (Side=top, Anchor=w, Fill=x, Expand=yes)
        button (FM1, text= ' Center '). Pack (Side=top, Anchor=w, Fill=x, Expand=yes)
        button (FM1, text = ' Bottom '). Pack (Side=top, Anchor=w, Fill=x, Expand=yes) fm1.pack
        (Side=left, Fill=both, expand=yes) fm2

        = Frame (Master)
        button (fm2, text= ' left '). Pack (Side=left)
        button (FM2, text= ' the Center button '). Pack ( Side=left)
        Button (fm2, text= ' right '). Pack (Side=left)        
        fm2.pack (Side=left, padx=10)


root = Tk ()
Root.title ("Pack-example")
display = App (root)
Root.mainloop ()

For example, create a frame container fm1, put three vertically arranged button components into the FM1 container using the pack layout, and then create the FM2 container, put three horizontal button components, and finally two frame containers as components, Use the pack layout to put into the root form container. This layered layout enables a relatively complex interface requirement.

the Pack class provides the following functions (called using component instance objects):

The name of the function	Describe
Pack_slaves ()	Returns all child component objects of this component in a list.
Pack_configure (Option=value)	Set the property to the Pack layout manager, using the attribute (option) = value (value) to set the
Propagate (Boolean)	Set to True to indicate the geometry size of the parent component is determined by the child component (the default) and not otherwise.
Pack_info ()	Returns the value of the option provided by the pack.
Pack_forget ()	Unpack component, hides components and ignores existing settings, objects still exist and can be displayed with pack (option, ...).
Location (x, y)	X, Y is the point in pixels, and the function returns whether the point is in the cell and in which cell. Returns the cell row and column coordinates (-1,-1) indicating that it is not
Size ()	Returns the cells that the component contains, revealing the size of the component.

Grid layout
Grid layout, also known as Grid Layout, is the most recommended layout. The program is mostly rectangular, and we can easily divide it into a grid of rows and columns, and then place the component in the grid based on the line number and column number. When using the grid layout, you need to specify two parameters in it, row for rows, column for columns. Note that the number of row and column starts at 0.

The following diagram assumes that the interface is divided into grids.
Grid property Settings

Property name	A brief analysis of attributes	Take value	Value Description
Row, column	Row is the line number, column number, and set the component to be placed in the first few rows	The value is the row, column ordinal, not the number of rows and columns	Row and column numbers start at 0
Sticky	To set the alignment of a component in a grid	N, E, S, W, NW, NE, SW, SE, CENTER	Similar to the Anchor option in the pack layout
RowSpan	The number of rows spanned by the component	Number of rows spanned	Value is the number of rows occupied, not ordinal
ColumnSpan	The number of columns spanned by the component	Number of columns spanned	Value is the number of columns occupied by the span, not the ordinal
IPADX, Ipady, PADX, Pady	The internal, external spacing of the component, the same as the property usage of the pack	Same pack	Same pack

the Grid class provides the following functions (called using component instance objects):

The name of the function	Describe
Grid_slaves ()	Returns all child component objects of this component in a list.
Grid_configure (Option=value)	Set the property to the Pack layout manager, using the attribute (option) = value (value) to set the
Grid_propagate (Boolean)	Set to True to indicate the geometry size of the parent component is determined by the child component (the default) and not otherwise.
Grid_info ()	Returns the value of the option provided by the pack.
Grid_forget ()	Unpack component, hides components and ignores existing settings, objects still exist and can be displayed with pack (option, ...).
Grid_location (x, y)	X, Y is the point in pixels, and the function returns whether the point is in the cell and in which cell. Returns the cell row and column coordinates (-1,-1) indicating that it is not
Size ()	Returns the cells that the component contains, revealing the size of the component.

Place layout.
The simplest and most flexible layout, using component coordinates to place the component's location. But not very recommended, at different resolutions, the interface is often a big difference. Place property setting

Property name	A brief analysis of attributes	Take value	Value Description
Anchor	Anchor option, same pack layout	The default value is NW	Same pack layout
X, y	The x and y coordinates of the upper-left corner of the component	Integer, default value 0	Absolute position coordinates, per pixel
Relx, rely	The x, y coordinate of the component relative to the parent container	Floating points between 0~1	Relative position, 0.0 represents the left edge (or top edge), and 1.0 is the right edge (or bottom edge)
width, height	width, height of the component	Non-negative integer	Unit pixel
Relwidth, Relheight	The width, height of the component relative to the parent container	Floating points between 0~1	Similar to the value of RELX (rely)
Bordermode	If set to inside, the size and position within the component are relative, excluding the border, and if it is outside, the external size of the component is relative, including the border	INSIDE, OUTSIDE (default value INSIDE)	You can use constants inside, OUTSIDE, or String form "inside", "OUTSIDE"

the place class provides the following functions (called using component instance objects): place_slaves () to return this component in a list All child component objects. The

function name	description
place_configure (option=value)	sets the property to the Pack layout manager, using the attribute (option) = value (value) setting
Propagate (Boolean)	set to True indicates that the size of the parent component is determined by the child component (the default), otherwise it is irrelevant. The
place_info ()	Returns the value of the option provided by the pack. The
grid_forget ()	Unpack component hides the component and ignores the original settings, and the object still exists and can be displayed using the pack (option, ...).
location (x, y)	x, Y is the point in pixels, and the function returns whether the point is in the cell and in which cell. Returns the cell row and column coordinates, (-1,-1) to indicate that the component is not in the
size ()	that returns the cells contained in the component.