python图形界面开发之tkinter-布局

布局

任何界面都有自己的布局风格,有些是横向布局,有些是纵向布局,有些是流水布局,还有些是网格布局,总之布局就是一种考虑如何放置元素或者组件的一种说明方式。

包裹(包装)布局

thinter中使用pack进行包裹布局。 widgets.pack(pack_options) 这个是函数原型,pack_options有三个常用属性,分别是expand ,fill,side这三个属性

  • expand 是否扩展,当它设置为true的时候,它会沾满父组件的空间,当然,这是在其它同级元素布局剩下之后的空间。
  • fill 是填充的意思,它可以指定填充的方向,比如我们想要一个button或者label占满一行,我们可以就可以设置fill = tk.X (其中tk是tkiner的简写,import tkinter as tk)
  • side是一侧的意思,比如我们要让两个button并排显示可以一个设置side=tk.LEFT,一个设置为tk.RIGHT
  • pdx,pdy是用来设置距离左右上下的位置的,有了他们,我们就可以灵活设置组件的布局了

第二个按钮设置为fill=tk.X

设置左右side

设置了pdx为20,距离两侧有20像素

栅格布局(网格布局)

tkinter还有一种布局叫做grid布局,就是我们常说的网格布局。

grid有4个可选参数,分别是row,rowspan,column,columnspan,sticky

  • row指的是排在第一行
  • rowspan指的是占有多少行
  • column指的是排在第几列
  • columnspan指的是占有几列
  • sticky粘性,指的就是对齐固定方式,有nswe4个方位,分别是上北下南左西右东(n=nouth,s=south,e=east,w=west)

这个图片表示button1占有2行1列,button2是row=0,column=1,button3是row=1,column=1

使用sticky='ns'来使它上下对齐

坐标布局

坐标布局使用place进行元素的位置放置,它有x,y两参数,可以用来指定距离父组件的左上角的横坐标距离和纵坐标距离。

可以说相对其它布局,它是最灵活的,也是最精准的,只要给出x,y我们可以精确的放置到任何想要的位置,但是因为需要计算距离,所以相对来说也更麻烦一些。

image-20200328124438300

总结

tkinter为我们提供了三种布局,可以说每种布局都有自己的特点,pack相对用户来说不需要做过多操作就可以自动元素排列,适合于粗狂的布局,也就是整体布局。

grid布局相对来说有板有眼,适合那种规规矩矩的布局,类似于磁铁布局。

place布局适合那种对细节要求严丝合缝的场合。

三种布局不是孤立的,但是grid和pack不要同时使用。它们两个可以分别和place配合使用。

正式有了布局系统的存在,我们才可以设计出任何我们想要的排版,可以说只有弄清楚了布局系统,才算是对tkinter入门了。

代码

import tkinter as tk

class Application(tk.Frame):
    def __init__(self, master=None):
        super().__init__(master)

        '''包裹布局,通过设置expand,fill,padx,pady,side来调整控件布局位置
        '''
        # button = tk.Button(text='我是按钮',bg='red',fg='white')
        # button.pack()

        # button = tk.Button(text='我是按钮2',bg='blue',fg='#fff')
        # button.pack(expand = True, fill = tk.X, padx=20)

        """栅格布局,就是通过设置一个个网格,将元素放置到指定的位置空间
        它通过row,column来设置网格
        """

        # button1 = tk.Button(text='button1',bg='red',fg='white')
        # button1.grid(rowspan=2,column=0,sticky='ns')

        # button2 = tk.Button(text='button2',bg='blue',fg='white')
        # button2.grid(row=0,column=1)

        # button3 = tk.Button(text='button3',bg='pink',fg='white')
        # button3.grid(row=1,column=1)

        """坐标布局
        """
        # button_place = tk.Button(text="place",bg='red',fg='white')
        # button_place.place(x=10,y=10)
        # button_grid  = tk.Button(text='grid',bg='blue',fg='white')
        # button_grid.place(x=10,y=50)
        # button_pack  = tk.Button(text='pack',bg = 'yellow', fg='#000')
        # button_pack.place(x=100,y=100)

        """混合使用
        """
        button_place = tk.Button(text="place",bg='red',fg='white')
        button_place.grid(row=0,column=0)
        button_grid  = tk.Button(text='grid',bg='blue',fg='white')
        button_grid.grid(row=0,column=1)
        button_pack  = tk.Button(text='pack',bg = 'yellow', fg='#000')
        button_pack.place(x=100,y=100)

if __name__ == "__main__":
    root = tk.Tk()

    app = Application(master=root)

    root.geometry("400x300")

    app.mainloop()