【Python】图形界面编程 —— 布局管理器

淩亂°似流年 2022-12-14 13:35 247阅读 0赞

GUI（图形用户界面）编程就相当于小孩子搭积木，每个积木应该放在哪里，每个积木显示为多大，也就是对大小和位置都需要进行管理，而**布局管理器正是负责管理各组件的大小和位置的。**

## 一、Pack布局管理器 ##

使用Pack布局，那么当程序向容器中添加组件时，这些组件会依次向后排列，排列方向既可是水平的，也可是垂直的。

from tkinter import *
    
    root = Tk()
    root.title('Pack布局')
    for i in range(3):
        # bg='#eeeeee'指背景颜色为浅灰色
        lab = Label(root, text='第%d个Label' % (i + 1), bg='#eeeeee')
        # 调用pack进行布局
        lab.pack()
    root.mainloop()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center]

pack() 方法支持如下选项：

>  *  anchor：当可用空间大于组件所需要的大小时，该选项决定组件被放置在容器的何处。该选项支持 N(北，表示上), E（东，表示右）, S（南，表示下）, W（西，表示左）, NW（西北，表示左上）, NE（东北，表示右上）,SW（西南，表示左下）, SE（东南，表示右下）,  
>     CENTER(中，默认值)
>  *  expand：该bool值指定当父类容器增大时是否拉伸组件
>  *  fill：设置组件是否沿水平或者垂直方向填充。该选项支持NONE, X, Y, BOTH四个值。其中NONE表示不填充，BOTH表示沿着两个方向填充。
>  *  ipadx：指定组件在x方向（水平）上的内部留白
>  *  ipady：指定组件在y方向（水平）上的内部留白
>  *  padx：指定组件在x方向（水平）上与其他组件的间距
>  *  pady：指定组件在y方向（水平）上与其他组件的间距
>  *  side：设置组件的添加位置，可以设置为TOP, BOTTOM, LEFT, RIGHT这四个值的其中之一  
>     当程序界面比较复杂时，就需要使用多个容器（Frame）分开布局，然后再将Frame添加到窗口中。

from tkinter import *
    class App:
        def __init__(self, master):
            self.master = master
            self.initWidgets()
    
        def initWidgets(self):
            # 创建第一个容器
            fm1 = Frame(self.master)
            # 该容器放在左边排列
            fm1.pack(side=LEFT, fill=BOTH, expand=YES)
            # 向fm1中添加三个按钮
            # 设置按钮从顶部开始排列，且按钮只能在水平（x）方向上填充
            Button(fm1, text='fm1第一个').pack(side=TOP, fill=X, expand=YES)
            Button(fm1, text='fm1第二个').pack(side=TOP, fill=X, expand=YES)
            Button(fm1, text='fm1第三个').pack(side=TOP, fill=X, expand=YES)
            # 创建第二个容器
            fm2 = Frame(self.master)
            # 该容器放在左边排列, 就会挨着fm1
            fm2.pack(side=LEFT, padx=10, expand=YES)
            # 向fm2中添加三个按钮
            # 设置按钮从右边开始排列
            Button(fm2, text='fm2第一个').pack(side=RIGHT, fill=Y, expand=YES)
            Button(fm2, text='fm2第二个').pack(side=RIGHT, fill=Y, expand=YES)
            Button(fm2, text='fm2第三个').pack(side=RIGHT, fill=Y, expand=YES)
            # 创建第三个容器
            fm3 = Frame(self.master)
            # 该容器放在右边排列, 就会挨着fm1
            fm3.pack(side=RIGHT, padx=10, fill=BOTH, expand=YES)
            # 向fm3中添加三个按钮
            # 设置按钮从底部开始排列，且按钮只能在垂直（Y）方向上填充
            Button(fm3, text='fm3第一个').pack(side=BOTTOM, fill=Y, expand=YES)
            Button(fm3, text='fm3第二个').pack(side=BOTTOM, fill=Y, expand=YES)
            Button(fm3, text='fm3第三个').pack(side=BOTTOM, fill=Y, expand=YES)
    
    
    root = Tk()
    root.title('Pack布局')
    display = App(root)
    root.mainloop()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 1]

## 二、Grid布局管理器 ##

Grid把组件空间分解成一个网格进行维护，即按照行、列的方式排列组件，组件位置由其所在的行号和列号决定： **行号相同而列号不同的几个组件会被依次上下排列，列号相同而行号不同的几个组件会被依次左右排列。**  
使用Grid布局的过程就是为各个组件指定行号和列号的过程，不需要为每个网格都指定大小，Grid布局会自动为它们设置合适的大小。  
程序调用组件的grid()方法就进行Grid布局，在调用grid()方法时可传入多个选项，该方法支持的选项有：

>  *  ipadx：指定组件在x方向（水平）上的内部留白
>  *  ipady：指定组件在y方向（水平）上的内部留白
>  *  padx：指定组件在x方向（水平）上与其他组件的间距
>  *  pady：指定组件在y方向（水平）上与其他组件的间距
>  *  column :指定将组件放入到哪列。第一列的索引为 0
>  *  columnspan : 指定组件横跨多少列
>  *  row :指定组件放入哪行。第一行的索引为0
>  *  rowspan : 指定组件横跨多少行
>  *  sticky :当可用空间大于组件所需要的大小时，该选项决定组件被放置在容器的何处。该选项支持 N(北，表示上), E（东，表示右）, S（南，表示下）, W（西，表示左）, NW（西北，表示左上）, NE（东北，表示右上）,SW（西南，表示左下）, SE（东南，表示右下）, CENTER(中，默认值)

**实现一个计算器页面：**

from tkinter import *
    
    class App:
        def __init__(self, master):
            self.master = master
            self.initWidgets()
    
        def initWidgets(self):
            # 创建一个输入组件
            e = Entry(relief=SUNKEN, font=('Courier New', 24), width=25)
            # 对输入组件使用Pack布局，放在容器顶部
            e.pack(side=TOP, pady=10)
            p = Frame(self.master)
            p.pack(side=TOP)
            # 定义字符串元组
            names = ("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "+", "-", "*", "/", ".", "=")
            # 遍历字符串元组
            for i in range(len(names)):
                # 创建Button，将Botton放入p组件中
                b = Button(p, text=names[i], font=('Verdana', 20), width=6)
                b.grid(row=i // 4, column=i % 4)
    
    root = Tk()
    root.title('Grid布局')
    App(root)
    root.mainloop()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 2]

## 三、Place布局管理器 ##

**Place布局就是其他GUI编程中的”绝对布局“，这种布局方式要求程序显示指定每个组件的绝对位置或相对于其他组件的位置。**

place()支持的选项：

>  *  x : 指定组件的X坐标。x为0代表位于最左边
>  *  y : 指定组件的Y坐标。y为0代表位于最上边
>  *  relx : 指定组件的X坐标，以父容器总宽度为单位1，该值应该在0.0~1.0之间，其中0.0代表位于窗口最左边，1.0代表位于窗口最右边，0.5代表位于窗口中间
>  *  rely : 指定组件的Y坐标，以父容器总宽度为单位1，该值应该在0.0~1.0之间，其中0.0代表位于窗口最上边，1.0代表位于窗口最下边，0.5代表位于窗口中间
>  *  width : 指定组件宽度，以pixel为单位
>  *  height : 指定组件高度，以pixel为单位
>  *  relwidth : 指定组件宽度，以父容器总宽度为单位1，该值应该在0.0~1.0之间，其中1.0代表位于整个窗口宽度，0.5代表窗口的一半宽度
>  *  relheight : 指定组件高度，以父容器总宽度为单位1，该值应该在0.0~1.0之间，其中1.0代表位于整个窗口高度，0.5代表窗口的一半高度
>  *  bordermode : 该属性支持”inside“或”outside“属性值，用于指定当设置组件的宽度、高度时是否计算该组件的边框宽度

当使用Place布局管理容器中的组件时，需要设置组件的x，y或者relx，rely选项，**Tkinter容器内的坐标系统的原点(0, 0)在左上角，其中X轴向右延伸，Y轴向下延伸。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 3]  
**通过x指定的坐标值越大，该组件就越靠右；通过y指定的坐标值越大，该组件就越靠下。**

from tkinter import *
    import random
    
    class App:
        def __init__(self, master):
            self.master = master
            self.initWidgets()
    
        def initWidgets(self):
            # 定义字符串元组
            journey = ('唐玄奘', '孙悟空', '猪八戒', '沙和尚', '白龙马')
            for i in range(len(journey)):
                # 生成三个随机数
                ct = [random.randrange(256) for x in range(3)]
                grayness = int(round(0.299 * ct[0] + 0.587 * ct[1] + 0.114 * ct[2]))
                # 将元组中的三个随机数格式化成十六进制，转换成颜色格式
                bg_color = '#%02x%02x%02x' % tuple(ct)
                # 创建Label，设置背景色和前景色
                lb = Label(root,
                           text=journey[i],
                           fg='White' if grayness < 125 else 'Black',
                           bg=bg_color)
                # 使用place()设置该Label的大小和位置
                lb.place(x=20, y=36 + i * 36, width=180, height=30)
    root=Tk()
    root.title('Place布局')
    # 设置窗口大小和位置
    # width x height + x_offset + y_offset
    root.geometry('250x250+30+30')
    App(root)
    root.mainloop()

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e4223b53d10143bab41cfbaddfd80bba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/fd7f5de30fb84fb5bbf57c9a8d1d2232.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/a9a90244af4e459295858d85ece062d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/cd28c9e6e6e14fb4a534761cabd68916.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pEXzAxMg_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/a6eb10aec4a74df1ad8eac74701cfd78.png