精华内容
下载资源
问答
  • Tkinter布局管理器

    2019-11-29 13:50:29
    使用python设计程序图形界面时,使用的布局管理器。

    文章更新于:2020-04-25
    注0:原英文教程地址:zetcode.com
    注1:Introduction to Tkinter 参见:关于Tkinter的介绍
    注2:Layout management in Tkinter 参见:Tkinter布局管理器
    注3:Tkinter widgets 参见:Tkinter 控件

    Layout management in Tkinter

    In this part of the Tkinter tutorial, we introduce layout managers.

    在这一章,我们学习Tkinter布局管理器。

    When we design the GUI of our application, we decide what widgets we will use and how we will organise those widgets in the application. To organise our widgets, we use specialised non-visible objects called layout managers.

    There are two kinds of widgets: containers and their children. The containers group their children into suitable layouts.

    Tkinter has three built-in layout managers: the pack, grid, and place managers. The place geometry manager positions widgets using absolute positioning. The pack geometry manager organises widgets in horizontal and vertical boxes. The grid geometry manager places widgets in a two dimensional grid.

    在我们为程序设计图形界面的时候,我们需要决定使用哪些控件以及如何组织这些控件。为了组织这些控件,我们需要指定一个叫做布局管理器的不可见对象。
    总的来说,只有两种控件:容器和他们的子控件。容器把他们的子控件放在一个合适的布局里。

    Absolute positioning

    In most cases, programmers should use layout managers. There are a few situations where we could use absolute positioning. In absolute positioning, the programmer specifies the position and the size of each widget in pixels. The size and the position of a widget do not change if we resize a window. Applications look different on various platforms, and what looks OK on Linux, might not look OK on Mac OS. Changing fonts in our application might spoil the layout. If we translate our application into another language, we must redo our layout.

    在很多情况下,程序应当使用布局管理器。毕竟适合使用绝对定位的很少。在绝对定位中,程序为每一个控件指定大小和精确到像素的位置。当我们重新设置窗口大小的时候,控件的大小和位置并不会改变。在不同的平台,程序看起来均不相同。可能你在Linux上看着比较OK,但是到了Mac上就不行了。在程序中改变字体还有可能会挤爆布局。当我们改变我们程序的语言时,我们必须重新调整我们的布局。

    from PIL import Image, ImageTk
    from tkinter import Tk, BOTH
    from tkinter.ttk import Frame, Label, Style
    
    class Example(Frame):
    
        def __init__(self):
            super().__init__()
    
            self.initUI()
    
    
        def initUI(self):
    
            self.master.title("Absolute positioning")
            self.pack(fill=BOTH, expand=1)
    
            Style().configure("TFrame", background="#333")
    
            bard = Image.open("bardejov.jpg")
            bardejov = ImageTk.PhotoImage(bard)
            label1 = Label(self, image=bardejov)
            label1.image = bardejov
            label1.place(x=20, y=20)
    
            rot = Image.open("rotunda.jpg")
            rotunda = ImageTk.PhotoImage(rot)
            label2 = Label(self, image=rotunda)
            label2.image = rotunda
            label2.place(x=40, y=160)
    
            minc = Image.open("mincol.jpg")
            mincol = ImageTk.PhotoImage(minc)
            label3 = Label(self, image=mincol)
            label3.image = mincol
            label3.place(x=170, y=50)
    
    
    def main():
    
        root = Tk()
        root.geometry("300x280+300+300")
        app = Example()
        root.mainloop()
    
    
    if __name__ == '__main__':
        main()
    

    In this example, we place three images using absolute positioning. We use the place geometry manager.

    在这个例子中,我们使用绝对定位放置了三个图片。我们使用了place布局管理器。

    from PIL import Image, ImageTk
    

    We use Image and ImageTk from the Python Imaging Library (PIL) module.

    我们使用python中 PIL 模块的 Image 和 ImageTk。
    如果 PIL 模块不存在,可使用 pip install pillow 来进行安装

    style = Style()
    style.configure("TFrame", background="#333")
    

    We configure our frame to have a dark gray background using styles.

    我们使用样式配置我们的框架为黑灰色背景。

    bard = Image.open("bardejov.jpg")
    bardejov = ImageTk.PhotoImage(bard)
    

    We create an image object and a photo image object from an image in the current working directory.

    我们从当前工作目录下的一个图像创建了一个 Image 对象和一个 ImageTk 对象

    label1 = Label(self, image=bardejov)
    

    We create a Label with an image. Labels can contain text or images.

    我们创建了一个图像标签。标签可以包含文字或者图像。

    label1.image = bardejov
    

    We must keep the reference to the image to prevent image from being garbage collected.

    我们必须保证持续引用该图像,以防止该图像被当作垃圾给处理。

    label1.place(x=20, y=20)
    

    The label is placed on the frame at x=20 and y=20 coordinates.

    这个标签被放置在框架中坐标为20x20的位置。
    图片1

    Tkinter pack manager

    The pack geometry manager organises widgets in horizontal and vertical boxes. The layout is controlled with the fill, expand, and side options.

    pack布局管理器将控件组织成水平和垂直的框。布局控制器的属性有:fill、expand 和 side 选项。

    Buttons example

    In the following example, we position two buttons in the bottom-right corner of the window. We use the pack manager.

    在下面这个例子中,我们使用pack管理器放置了两个按钮在窗口的右下角。

    from tkinter import Tk, RIGHT, BOTH, RAISED
    from tkinter.ttk import Frame, Button, Style
    
    class Example(Frame):
    
        def __init__(self):
            super().__init__()
    
            self.initUI()
    
    
        def initUI(self):
    
            self.master.title("Buttons")
            self.style = Style()
            self.style.theme_use("default")
    
            frame = Frame(self, relief=RAISED, borderwidth=1)
            frame.pack(fill=BOTH, expand=True)
    
            self.pack(fill=BOTH, expand=True)
    
            closeButton = Button(self, text="Close")
            closeButton.pack(side=RIGHT, padx=5, pady=5)
            okButton = Button(self, text="OK")
            okButton.pack(side=RIGHT)
    
    
    def main():
    
        root = Tk()
        root.geometry("300x200+300+300")
        app = Example()
        root.mainloop()
    
    
    if __name__ == '__main__':
        main()
    

    We have two frames. There is the base frame and an additional frame, which expands in both directions and push the two buttons to the bottom of the base frame. The buttons are placed in a horizontal box and placed to the right of this box.

    我们有两个框架,一个是基本的框架,另一个是附加的在两个方向上扩展的框架用来将两个按钮推向基本框架的底部。这个按钮放在一个水平框的右边。

    frame = Frame(self, relief=RAISED, borderwidth=1)
    frame.pack(fill=BOTH, expand=True)
    

    We create another Frame widget. This widget takes the bulk of the area. We change the border of the frame so that the frame is visible; by default it is flat.

    我们创建了另一个框架控件,它占据了大部分空间。我们改变框架的框线以让其可见,在默认情况下,它是平的。

    closeButton = Button(self, text="Close")
    closeButton.pack(side=RIGHT, padx=5, pady=5)
    

    A closeButton is created. It is put into a horizontal box. The side parameter causes the button to be placed to the right of the horizontal. The padx and the pady parameters put some space between the widgets. The padx puts some space between the button widgets and between the closeButton and the right border of the root window. The pady puts some space between the button widgets and the borders of the frame and the borders of the root window.

    这里创建了一个关闭按钮,它被放在水平框中。side参数将按钮放在框的右边。padx 和 pady 参数在两个控件之间放在一些空白。padx 参数在两个按钮控件和关闭按钮与根窗口的右框线之间放空白,pady 在两个按钮和框架的框线与根窗口的框线之间放空白。

    okButton.pack(side=RIGHT)
    

    The okButton is placed next to the closeButton with 5 px space between them.

    ok按钮被放在close按钮旁边,并且他们之间有5像素空白。
    图片2

    Review example

    The pack manager is a simple layout manager. It can be used to do simple layout tasks. In order to create more complicated layouts, we need to utilise more frames, each having its own pack manager.

    pack管理器是一个简单的管理器,它用来处理一些简单的布局任务。为了创建更复杂的布局,我们需要使用更多的框架,而且每一个框架都有独立的pack管理器来控制。

    from tkinter import Tk, Text, TOP, BOTH, X, N, LEFT
    from tkinter.ttk import Frame, Label, Entry
    
    
    class Example(Frame):
    
        def __init__(self):
            super().__init__()
    
            self.initUI()
    
    
        def initUI(self):
    
            self.master.title("Review")
            self.pack(fill=BOTH, expand=True)
    
            frame1 = Frame(self)
            frame1.pack(fill=X)
    
            lbl1 = Label(frame1, text="Title", width=6)
            lbl1.pack(side=LEFT, padx=5, pady=5)
    
            entry1 = Entry(frame1)
            entry1.pack(fill=X, padx=5, expand=True)
    
            frame2 = Frame(self)
            frame2.pack(fill=X)
    
            lbl2 = Label(frame2, text="Author", width=6)
            lbl2.pack(side=LEFT, padx=5, pady=5)
    
            entry2 = Entry(frame2)
            entry2.pack(fill=X, padx=5, expand=True)
    
            frame3 = Frame(self)
            frame3.pack(fill=BOTH, expand=True)
    
            lbl3 = Label(frame3, text="Review", width=6)
            lbl3.pack(side=LEFT, anchor=N, padx=5, pady=5)
    
            txt = Text(frame3)
            txt.pack(fill=BOTH, pady=5, padx=5, expand=True)
    
    
    def main():
    
        root = Tk()
        root.geometry("300x300+300+300")
        app = Example()
        root.mainloop()
    
    
    if __name__ == '__main__':
        main()
    

    The example shows how to create a more complex layout with multiple frames and pack managers.

    这个例子展示的如何利用 fromes 和 pack 创建更加复杂的布局。

    self.pack(fill=BOTH, expand=True)
    

    The first frame is the base frame, on which other frames are placed. Note that in addition to organising children within frames, we also manage the frames on the base frame.

    这里第一个框架是基本框架,用于承载其他框架。注意:基本框架不仅要组织其子控件,还需要管理框架中的框架。

    frame1 = Frame(self)
    frame1.pack(fill=X)
    
    lbl1 = Label(frame1, text="Title", width=6)
    lbl1.pack(side=LEFT, padx=5, pady=5)
    
    entry1 = Entry(frame1)
    entry1.pack(fill=X, padx=5, expand=True)
    

    The first two widgets are placed on the first frame. The entry is horizontally streched with the fill and the expand parameters.

    第一组两个控件被放在第一个框架中。表现为一个带有填充和扩展属性的条形框。

    frame3 = Frame(self)
    frame3.pack(fill=BOTH, expand=True)
    
    lbl3 = Label(frame3, text="Review", width=6)
    lbl3.pack(side=LEFT, anchor=N, padx=5, pady=5)
    
    txt = Text(frame3)
    txt.pack(fill=BOTH, pady=5, padx=5, expand=True)
    

    Inside the third frame, we place a label and a text widget. The label is anchored to the north. The text widget takes the whole remaining area.

    在第三个框架中,我们放置了一个标签和一个文本框。这个标签被固定在北方,而文本框则拥有剩下的所有空间。
    图片3

    Tkinter grid manager

    The Tkinter’s grid geometry manager is used to create a skeleton of a calculator.

    使用Tkinter 几何管理器创建计算器的框架。

    from tkinter import Tk, W, E
    from tkinter.ttk import Frame, Button, Entry, Style
    
    class Example(Frame):
    
        def __init__(self):
            super().__init__()
    
            self.initUI()
    
    
        def initUI(self):
    
            self.master.title("Calculator")
    
            Style().configure("TButton", padding=(0, 5, 0, 5),
                font='serif 10')
    
            self.columnconfigure(0, pad=3)
            self.columnconfigure(1, pad=3)
            self.columnconfigure(2, pad=3)
            self.columnconfigure(3, pad=3)
    
            self.rowconfigure(0, pad=3)
            self.rowconfigure(1, pad=3)
            self.rowconfigure(2, pad=3)
            self.rowconfigure(3, pad=3)
            self.rowconfigure(4, pad=3)
    
            entry = Entry(self)
            entry.grid(row=0, columnspan=4, sticky=W+E)
            cls = Button(self, text="Cls")
            cls.grid(row=1, column=0)
            bck = Button(self, text="Back")
            bck.grid(row=1, column=1)
            lbl = Button(self)
            lbl.grid(row=1, column=2)
            clo = Button(self, text="Close")
            clo.grid(row=1, column=3)
            sev = Button(self, text="7")
            sev.grid(row=2, column=0)
            eig = Button(self, text="8")
            eig.grid(row=2, column=1)
            nin = Button(self, text="9")
            nin.grid(row=2, column=2)
            div = Button(self, text="/")
            div.grid(row=2, column=3)
    
            fou = Button(self, text="4")
            fou.grid(row=3, column=0)
            fiv = Button(self, text="5")
            fiv.grid(row=3, column=1)
            six = Button(self, text="6")
            six.grid(row=3, column=2)
            mul = Button(self, text="*")
            mul.grid(row=3, column=3)
    
            one = Button(self, text="1")
            one.grid(row=4, column=0)
            two = Button(self, text="2")
            two.grid(row=4, column=1)
            thr = Button(self, text="3")
            thr.grid(row=4, column=2)
            mns = Button(self, text="-")
            mns.grid(row=4, column=3)
    
            zer = Button(self, text="0")
            zer.grid(row=5, column=0)
            dot = Button(self, text=".")
            dot.grid(row=5, column=1)
            equ = Button(self, text="=")
            equ.grid(row=5, column=2)
            pls = Button(self, text="+")
            pls.grid(row=5, column=3)
    
            self.pack()
    
    
    def main():
    
        root = Tk()
        app = Example()
        root.mainloop()
    
    
    if __name__ == '__main__':
        main()
    

    The grid manager is used to organize buttons in the frame container.

    grid管理器用于组织在框架容器中的按钮。

    Style().configure("TButton", padding=(0, 5, 0, 5),font='serif 10')
    

    We configure the Button widget to have a specific font and to have some internal padding.

    我们给按钮设定一个指定的字体和一些内边距。

    self.columnconfigure(0, pad=3)
    ...
    self.rowconfigure(0, pad=3)
    

    We use the columnconfigure() and the rowconfigure() methods to define some space in grid columns and rows. This way we achieve that the buttons are separated by some space.

    我们使用 columnconfigure() 和 rowconfigure() 方法来定义一些 grid 行和列中的空白。这种方法可以让按钮被被空白分隔开。

    entry = Entry(self)
    entry.grid(row=0, columnspan=4, sticky=W+E)
    

    The Entry widget is where the digits are displayed. The widget is placed in the first row and it spans all four columns. Widgets may not occupy all the space allotted by cells in the grid. The sticky parameter expands the widget in a given direction. In our case we ensure that the entry widget is expanded from left to right.

    输入框用于显示数字。这个控件被放在第一行并且跨越所有列。在 grid 中,控件可能并不占据单元格分配的所有空白。而 sticky 参数将在给定的方向上扩展控件。在我们这个例子中,我们需要确保输入框从左扩展到右。

    cls = Button(self, text="Cls")
    cls.grid(row=1, column=0)
    

    The cls button is placed in the second row and first column. Note that the rows and columns start at zero.

    这个 cls 按钮被放置在第二行第一列。需要注意的是行和列是从0开始数的。

    self.pack()
    

    The pack() method shows the frame widget and gives it initial size. If no other parameters are given, the size will be just enough to show all children. This method packs the frame widget to the toplevel root window, which is also a container. The grid geometry manager is used to organize buttons in the frame widget.

    pack() 方法显示框架并且给定一个初始大小。如果没有其他参数,框架的大小将仅仅能容纳所有子控件而已。这个方法将框架放在了也算是一个容器的根窗口的最上方。grid 几何管理器经常被用来在框架控件中组织按钮。
    图四

    Windows example

    The following example creates the windows dialog using the grid geometry manager.

    下面这个例子将使用 grid 几何管理器创建一个对话框。

    from tkinter import Tk, Text, BOTH, W, N, E, S
    from tkinter.ttk import Frame, Button, Label, Style
    
    
    class Example(Frame):
    
        def __init__(self):
            super().__init__()
    
            self.initUI()
    
    
        def initUI(self):
    
            self.master.title("Windows")
            self.pack(fill=BOTH, expand=True)
    
            self.columnconfigure(1, weight=1)
            self.columnconfigure(3, pad=7)
            self.rowconfigure(3, weight=1)
            self.rowconfigure(5, pad=7)
    
            lbl = Label(self, text="Windows")
            lbl.grid(sticky=W, pady=4, padx=5)
    
            area = Text(self)
            area.grid(row=1, column=0, columnspan=2, rowspan=4,
                padx=5, sticky=E+W+S+N)
    
            abtn = Button(self, text="Activate")
            abtn.grid(row=1, column=3)
    
            cbtn = Button(self, text="Close")
            cbtn.grid(row=2, column=3, pady=4)
    
            hbtn = Button(self, text="Help")
            hbtn.grid(row=5, column=0, padx=5)
    
            obtn = Button(self, text="OK")
            obtn.grid(row=5, column=3)
    
    
    def main():
    
        root = Tk()
        root.geometry("350x300+300+300")
        app = Example()
        root.mainloop()
    
    
    if __name__ == '__main__':
        main()
    

    In this example, we use a Label widget, a Text widget, and four buttons.

    在这个例子中,我们使用一个标签控件,一个文本框,和四个按钮。

    self.columnconfigure(1, weight=1)
    self.columnconfigure(3, pad=7)
    self.rowconfigure(3, weight=1)
    self.rowconfigure(5, pad=7)
    

    We define some space among widgets in the grid. The weight parameter makes the second column and fourth row growable. This row and column is occupied by the text widget, so all the extra space is taken by it.

    我们在 grid 的标签中定义了一些空白。weight参数让第二列和第四行大小可调。因为这一行和列都被文本框占据,所以额外的空白也被他占据了。

    lbl = Label(self, text="Windows")
    lbl.grid(sticky=W, pady=4, padx=5)
    

    The label widget is created and put into the grid. If no column and row is specified, then the first column or row is assumed. The label sticks to the west and it has some padding around its borders.

    标签控件也被创建并放在 grid 中。如果没有指定行和列,则默认是第一行第一列。标签将显示在西方向,而且在它的框线周围有一定的边距。

    area = Text(self)
    area.grid(row=1, column=0, columnspan=2, rowspan=4,
        padx=5, sticky=E+W+S+N)
    

    The text widget is created and starts from the second row and first column. It spans two columns and four rows. There is a 4 px space between the widget and the left border of the root window. Finally, the widget sticks to all the four sides. So when the window is resized, the text widget grows in all directions.

    文本框被创建并开始于第二行第一列。它跨越了两行四列。并且在这个控件的左边线和根窗口之间有4像素的空白。最后,控件的四个边都设置了操作杆,当窗口被重新设置大小时,文本框将在所有方向上扩展。

    abtn = Button(self, text="Activate")
    abtn.grid(row=1, column=3)
    
    cbtn = Button(self, text="Close")
    cbtn.grid(row=2, column=3, pady=4)
    

    These two buttons go next to the text widget.

    这两个按钮显示在文本框的旁边。

    hbtn = Button(self, text="Help")
    hbtn.grid(row=5, column=0, padx=5)
    
    obtn = Button(self, text="OK")
    obtn.grid(row=5, column=3)
    

    These two buttons go below the text widget; the Help button takes the first column, the Ok Button takes the last column.

    这两个按钮将显示在文本框的下方。其中 Help 按钮显示在第一列,Ok 按钮显示在最后一列。
    图片五

    In this part of the Tkinter tutorial, we have covered layout management of widgets.

    Tkinter 教程的本部分,我们学习了控件的布局管理器。

    展开全文
  • Python GUI之tkinter布局管理

    万次阅读 多人点赞 2017-01-02 23:08:06
    tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。 pack布局 使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。 from tkinter import *root = Tk()#...

    Python3 tkinter系列

    一、概述
    二、布局管理
    三、常用组件
    四、实战(一)
    五、实战(二)
    六、进阶 自定义控件
    推荐视频课程 tkinter从入门到实战

    所谓布局,就是指控制窗体容器中各个控件(组件)的位置关系。tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。


    pack布局
    使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。

    展开全文
  • Python3 tkinter 界面布局

    万次阅读 多人点赞 2017-05-18 22:15:05
    tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。 pack布局 使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。 from tkinter import *root = Tk()#...
    所谓布局,就是指控制窗体容器中各个控件(组件)的位置关系。tkinter 共有三种几何布局管理器,分别是:pack布局,grid布局,place布局。
    

    pack布局
    使用 pack布局,将向容器中添加组件,第一个添加的组件在最上方,然后是依次向下添加。

    from tkinter import *
    
    root = Tk()
    
    #创建三个 Label 分别添加到root窗体中 
    #Label是一种用来显示文字或者图片的组件
    Label(root,text = 'pack1',bg = 'red').pack() 
    Label(root, text = 'pack2', bg = 'blue').pack() 
    Label(root, text = 'pack3', bg = 'green').pack() 
    
    root.mainloop()
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    如图:
    这里写图片描述

    pack常用属性

    属性名属性简析取值取值说明
    fill设置组件是否向水平或垂直方向填充X、Y、BOTH 和NONEfill = X(水平方向填充)fill = Y(垂直方向填充)fill = BOTH(水平和垂直)NONE 不填充
    expand设置组件是否展开,当值为YES时,side选项无效。组件显示在父容器中心位置;若fill选项为BOTH,则填充父组件的剩余空间。默认为不展开YES 、NO(1、0)expand=YES expand=NO
    side设置组件的对齐方式LEFT、TOP、RIGHT、BOTTOM值为左、上、右、下
    ipadx、ipady设置x方向(或者y方向)内部间隙(子组件之间的间隔)可设置数值,默认是0非负整数,单位为像素
    padx、pady设置x方向(或者y方向)外部间隙(与之并列的组件之间的间隔)可设置数值,默认是0非负整数,单位为像素
    anchor锚选项,当可用空间大于所需求的尺寸时,决定组件被放置于容器的何处N、E、S、W、NW、NE、SW、SE、CENTER(默认值为CENTER)表示八个方向以及中心

    注意:上表中取值都是常量,YES等价于”yes”,亦可以直接传入字符串值。另外当界面复杂度增加时,要实现某种布局效果,需要分层来实现。

    from tkinter import *    #注意模块导入方式,否则代码会有差别
    
    class App:
        def __init__(self, master):
            #使用Frame增加一层容器
            fm1 = Frame(master)
            #Button是一种按钮组件,与Label类似,只是多出了响应点击的功能
            Button(fm, text='Top').pack(side=TOP, anchor=W, fill=X, expand=YES)
            Button(fm, text='Center').pack(side=TOP, anchor=W, fill=X, expand=YES)
            Button(fm, 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='This is 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()
       
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    如上,创建一个Frame容器fm1,将三个垂直排列的Button组件使用pack布局放入fm1容器中,然后创建fm2容器,同样将三个水平排列的Button组件放入,最后将两个Frame容器当做组件,使用pack布局放入根窗体容器中。如此分层布局,实现了相对复杂一些的界面需求。
    

    这里写图片描述

    pack类提供了下列函数(使用组件实例对象调用):

    函数名描述
    pack_slaves()以列表方式返回本组件的所有子组件对象。
    pack_configure(option=value)给pack布局管理器设置属性,使用属性(option)= 取值(value)方式设置
    propagate(boolean)设置为True表示父组件的几何大小由子组件决定(默认值),反之则无关。
    pack_info()返回pack提供的选项所对应得值。
    pack_forget()Unpack组件,将组件隐藏并且忽略原有设置,对象依旧存在,可以用pack(option, …),将其显示。
    location(x, y)x, y为以像素为单位的点,函数返回此点是否在单元格中,在哪个单元格中。返回单元格行列坐标,(-1, -1)表示不在其中
    size()返回组件所包含的单元格,揭示组件大小。

    grid布局
    grid布局又被称作网格布局,是最被推荐使用的布局。程序大多数都是矩形的界面,我们可以很容易把它划分为一个几行几列的网格,然后根据行号和列号,将组件放置于网格之中。使用grid 布局时,需要在里面指定两个参数,分别用row 表示行,column 表示列。需要注意的是 row 和 column 的序号都从0 开始。

    如下图,假设将界面分成网格。
    这里写图片描述

    grid属性设置

    属性名属性简析取值取值说明
    row、columnrow为行号,column为列号,设置将组件放置于第几行第几列取值为行、列的序号,不是行数与列数 row 和 column 的序号都从0 开始
    sticky设置组件在网格中的对齐方式N、E、S、W
    NW、NE、SW、SE、CENTER类似于pack布局中的锚选项
    rowspan组件所跨越的行数跨越的行数取值为跨越占用的行数,而不是序号
    columnspan组件所跨越的列数跨越的列数取值为跨越占用的列数,而不是序号
    ipadx、ipady、padx、pady组件的内部、外部间隔距离,与pack的该属性用法相同同pack同pack

    grid类提供了下列函数(使用组件实例对象调用):

    函数名描述
    grid_slaves()以列表方式返回本组件的所有子组件对象。
    grid_configure(option=value)给pack布局管理器设置属性,使用属性(option)= 取值(value)方式设置
    grid_propagate(boolean)设置为True表示父组件的几何大小由子组件决定(默认值),反之则无关。
    grid_info()返回pack提供的选项所对应得值。
    grid_forget()Unpack组件,将组件隐藏并且忽略原有设置,对象依旧存在,可以用pack(option, …),将其显示。
    grid_location(x, y)x, y为以像素为单位的点,函数返回此点是否在单元格中,在哪个单元格中。返回单元格行列坐标,(-1, -1)表示不在其中
    size()返回组件所包含的单元格,揭示组件大小。

    place布局。
    最简单最灵活的一种布局,使用组件坐标来放置组件的位置。但是不太推荐使用,在不同分辨率下,界面往往有较大差异。

    place属性设置

    属性名属性简析取值取值说明
    anchor锚选项,同pack布局默认值为 NW同pack布局
    x、y组件左上角的x、y坐标整数,默认值0绝对位置坐标,单位像素
    relx、rely组件相对于父容器的x、y坐标0~1之间浮点数相对位置,0.0表示左边缘(或上边缘),1.0表示右边缘(或下边缘)
    width、height组件的宽度、高度非负整数单位像素
    relwidth、relheight组件相对于父容器的宽度、高度0~1之间浮点数与relx(rely)取值相似
    bordermode如果设置为INSIDE,组件内部的大小和位置是相对的,不包括边框;如果是OUTSIDE,组件的外部大小是相对的,包括边框INSIDE、OUTSIDE(默认值INSIDE)可以使用常量INSIDE、OUTSIDE,也可以使用字符串形式”inside”、”outside”

    place类提供了下列函数(使用组件实例对象调用):

    函数名描述
    place_slaves()以列表方式返回本组件的所有子组件对象。
    place_configure(option=value)给pack布局管理器设置属性,使用属性(option)= 取值(value)方式设置
    propagate(boolean)设置为True表示父组件的几何大小由子组件决定(默认值),反之则无关。
    place_info()返回pack提供的选项所对应得值。
    grid_forget()Unpack组件,将组件隐藏并且忽略原有设置,对象依旧存在,可以用pack(option, …),将其显示。
    location(x, y)x, y为以像素为单位的点,函数返回此点是否在单元格中,在哪个单元格中。返回单元格行列坐标,(-1, -1)表示不在其中
    size()返回组件所包含的单元格,揭示组件大小。
    展开全文
  • tkinter.pack设计复杂界面布局

    万次阅读 多人点赞 2018-11-04 12:41:59
    对程序员来说,界面设计的实现,要解决的一个主要问题就是如何根据...如果你对以上用tkinter.pack实现的界面布局有兴趣,觉得有些实现效果可以参考借鉴,请继续阅读下面的内容。 一. pack的组件空间布局原理分析 ...

    对程序员来说,界面设计的实现,要解决的一个主要问题就是如何根据界面设计的需求,将组件以规定的大小放置在规定的位置。tkinter是python语言中常用的界面实现模块,其中pack()方法,可创建浮动,自动伸缩扩展的软件界面,如以下界面。

    如果你对以上用tkinter.pack实现的界面布局有兴趣,觉得有些实现效果可以参考借鉴,请继续阅读下面的内容。

    一. pack的组件空间布局原理分析

    用pack进行的布局界面组件,可用以下一些界面布局空间来进行分析

    side = top 的布局空间

    side = left 的布局空间

    1. 容器可用空间 

    系统严格按代码的前后组织顺序依次排列组件,前辈组件还没有占据的空间,是当前组件的可用空间,pack布局是在当前组件的可用空间内进行的。如上图的黑边白底的区域。(为了说明,我留出padding空间,若没有padding,组件将占据整个目前可用空间)

    2.组件原始大小可见空间

    设置了width, height, 或由具体内容确定的组件原始大小,也就是可以看得见的组件宽高。如上图的黄色区域。

    3.组件的独占空间

    组件不单只占据它原始可见的位置,而是会同时占据可用空间的整行空间或整列空间。如上图红色区域。

    side = top / bottom 时,组件占据整行,后辈组件只能依次排在它的下面 / 上面;组件为上下排列方式

    side = left / right 时, 组件占据整列,后辈组件只能依次排在它的右边 / 左边;组件为左右排列方式

    pack() , 我分析下来,其实就是 pack(side=top)

    组件独占空间,没有进行填充(fill)时,不可见,但我们必须了解到它的存在,因为它直接影响组件本身及后辈组件的布局。

    组件独占空间,是固有的,其它后辈组件绝对不可能进入该空间,后辈组件最多只能紧靠它。

    4. 组件可扩展空间

    组件独占空间的另一个方向,是组件的可扩展空间方向。如上图的浅蓝色区域。

    side = top / bottom 时,组件独占整行,并可向整列方向进行扩展。

    side = left / right 时,组件独占整列,并可向整行方向进行扩展。

    组件可扩展空间,没有进行填充(fill)时,也是不可见的,但它同样会直接影响自身和后辈组件的布局,必须掌握它的空间存在。

    若设置了 expand = yes, 则启用可扩展空间;若 expand = no, 则不启用可扩展空间。

    组件可扩展空间,是动态的,是可以被后辈组件的独占空间占据压缩的,后辈组件可以从前辈可扩展空间的边缘开始入侵,直至压缩到前辈组件自身的独占空间为止。 

    5. 组件占用总空间

    组件独占空间 + 组件可扩展空间,就是当前组件的总占用空间,若没有启用组件扩展空间(expand = no),则只包含组件独占空间。

    接下来的 锚定位(anchor)和填充(fill),都是基于组件的占用总空间来进行处理的。

    6. 空间定位和填充

    锚定位(anchor ),加 padx, pady , 可将组件安排在指定位置

    锚定位有9个方向,缺省为 center, 居中

    若 side = top / bottom ,  expand=no, 则合并到一行,即NW, W, SW的效果一样,其他同理。

    若 side = left / right,  expand = no, 则合并到一列,即NW, N, NE的效果一样,其他同理

    填充(fill)组件,可以将组件的可见,可操作范围充满指定区域

    填充的方式有4种,缺省的方式是(none),不填充。

     

    二. 单组件布局的分析步骤

    以上描述的pack布局原理,需要仔细理解和掌握,这是pack布局的基础,当我们理解这些原理后,就可以用来控制单个组件的位置了。

    基本分析步骤为:

    1. 明确当前容器的可用空间范围

    2.分析是用上下排列方式(side=top / bottom),还是左右排列方式(side=left/right)

    3.分析是否需要启用扩展空间,若需要则设置 expand = yes, 否则保持缺省值 expand = no

    4.利用锚定位(anchor),确定组件的具体位置

    5.利用填充(fill), 对组件的可见区域进行填充

     

    举例分析

    设置代码

    布局效果

    说明

    .pack(side=‘top‘)

    独占整行,缺省居中

    .pack(side='top', anchor='sw')

    没有启用可扩展空间,只独占行,锚定位 nw, w, sw 都一样,定位在西边

    .pack(side='top', expand='yes', anchor='sw')

    启用可扩展空间,除了独占的行空间,还扩展到了容器可用空间的所有列空间,锚定位'sw' ,定位到了容器的西南边

    .pack(side='top', expand='yes')

    启动扩展空间,没有设置anchor,则缺省居中(整个组件占用空间的中间,不同于第1个例子)

    .pack(side='top', expand='yes', fill='y')

    启用扩展空间,定位完后,进行“y”轴方向的填充,填满整个占用空间的列

    .pack(side='top', fill='y')

    没有启用扩展空间,当选择进行“y”方向填充时,也只是在独占的行空间内进行“y”方向填充

     

    三.  多组件布局的分析

    我们现在基本掌握了单个组件的布局定位分析方法,而实际的软件界面,一定是多组件的综合布局,涉及多组件之间的相互关系和影响。以上所有讲到的单组件布局分析,都有一个前提,就是在已知容器可用空间的前提下, 进行当前组件的布局定位。

     

    整理分析多组件布局的要点

    1. 所有组件按代码的前后组织次序,依次进行布局定位

    2. 设置side = top / bottom 的组件,为上下排列的组件,独占当时可用空间的整行 

    3. 设置side = left / right 的组件,为左右排列的组件,独占当时可用空间的整列

    4. 后辈组件不可进入任何前辈组件的独占空间,不论 side的设置如何,是否相同,一律都是前辈

    5. 组件可扩展空间,是动态的,是可以被后辈组件的独占空间占据压缩的,后辈组件可以从前辈可扩展空间的边缘开始入侵,直至压缩到前辈组件自身的独占空间为止

    6.后辈组件的扩展空间,不能侵占前辈组件的扩展空间;既若扩展空间重叠,前辈享用扩展空间

    7. 若整个界面空间缩小,出现后辈组件独占空间跟前排组件独占空间重叠时,后辈组件将被压缩,直至消失。

    8. 若界面空间继续缩小,小到比组件独占空间小时,组件将被压缩,直至消失。

    9. 空间优先级别为:界面空间 > 前辈组件独占空间 > 后辈组件独占空间 > 前辈组件可扩展空间 > 后辈组件可扩展空间

    10.可利用frame的多层嵌套,进行灵活布局

     

    举例分析:

    设置代码

    布局效果

    说明

    1.pack(side='left', expand='no', anchor='w', fill='y', padx=5, pady=5)
    2.pack(side='top')
    3.pack(side='right')
    4.pack(side='bottom')

    块1:

    第一个组件,可用空间为整个界面空间,靠左,独占列,不启动扩展空间,按“y”方向填充,周围有5个像素的padding

     

    块2:

    可用空间从块1的右边缘开始,靠上,独占行,位置居中,但注意是从块1右边缘到界面边缘的中间位置,而不是整个界面的中间位置

     

    块3:

    靠右,居中;其上下可用空间大小是块2的下边缘,到界面边缘

     

    块4

    靠下,居中;其左右可用空间大小是从块1的右边缘 到 块3的左边缘

    1.pack(side='left', expand='yes', fill='x')
    2.pack(side='top')
    3.pack(side='right', expand='yes', fill='x')
    4.pack(side='bottom')
     

    这个例子比较复杂点

    块1:

    启用了扩展空间,往“x”行方向填充,但被块2,块3,块4的独占空间压回到了现在的大小。

     

    块2:

    同上,始终位于块1右边缘和界面边界的中间靠上位置

     

    块3:

    启用了扩展空间,但也越不过块4的独占列空间

     

    块4:

    始终位于块1,块3的中间位置靠下

    1.pack(side='left', expand='no', fill='y')
    2.pack(side='top', fill='x')
    3.pack(side='right', expand='yes', fill='both')

    一个很常规的导航界面设置

    块1:导航栏

    靠左,上下填充,不可扩展

     

    块2:标题栏

    靠上,左右扩展

     

    块3:内容栏

    位置无所谓,全面扩展填充

     

     

    四. 代码演示

    我写了一个布局演示程序,包含文章开头展示的界面,可以对照界面实际效果和具体代码,来了解实现的细节。另外提供了单组件和多组件的演示工具,可以调整设置,观察效果,来理解和掌握pack布局的基本方法。演示程序中还包括一些其它窗体布局和实现的方法,希望对大家有帮助。

    源代码位置

    https://github.com/EdwinZhang1970/Python/tree/master/tkinter-pack%20Demo

     

     

     

     

     

     

    展开全文
  • tkinter 布局管理器

    2021-01-08 15:54:00
    这时候,就需要使用 tkinter 提供的布局管理器帮助我们 组织、管理在父组件中子组件的布局方式。tkinter 提供了三 种管理器:pack、grid、place。 grid 布局管理器 grid 表格布局,采用表格结构组织组件。子组件的...
  • tkinter布局管理器之place,随心所欲,自定义排列
  • tkinter窗口组件之Frame,承载规划布局的框架
  • tkinter布局管理器之pack:上下左右,按添加顺序排列
  • tkinter窗口组件之LabelFrame,规划布局frame的小老弟
  • TKinter布局管理器能够控制组件位置摆放,提供三种布局方式:Pack布局、Grid布局、Place布局!
  • Python TKinter 布局管理 (Pack Place Grid)

    万次阅读 多人点赞 2018-08-13 19:05:18
    Tkinter是Python常用的一个GUI库,本文主要介绍了Tkinter布局管理部分。 Tkinter有三种布局管理方式: pack grid place 这三种布局管理在同一个 master window 里是不可以混用的。 pack布局管理 pack布局...
  • 三种布局管理器
  • tkinter 窗体grid布局最大化并填充

    万次阅读 多人点赞 2018-07-08 22:44:51
    grid布局作为tkinter最常用最灵活的布局方式,可以方便的在子控件中嵌套新的grid布局,从而创建复杂的窗体结构。使用方法如下:frm=Frame(root,widht=800,width=480);lab=Label(frm,text='test');lab.grid(row=0...
  •  tkinter以提供3种界面组件布局管理的方法,分别是:pack,grid,place 这篇文章先来讲解pack 方法。  pack() 方法的参数有:side, fill, padx/pady, ipadx/ipady, anchor, expand 参数说明: side: 决定组件...
  • 就是负责管理各大组件的排列,Tkinter提供了三大布局管理器,分别是pack、grid和place,下面一个一个介绍 ##pack    ※ pack:pack 是按添加顺序排列组件    对比 grid 管理器,pack...
  • 从本章节开始就进入Tkinter 详细学习内容,在对这些复杂问题的讨论和讲解过程中,我这里尽量使用较为简单和通俗的语言进行描述,当然,在理解和概念性上每个人都会有所差异,如果在学习过程中有任何疑问可以留言或者...
  • Tkinter10_布局管理器

    2018-12-04 00:30:19
    Tkinter10_布局管理器 标签(空格分隔): Tkinter 文章目录Tkinter10_布局管理器packgridplace Tkinter 有三个布局管理器,分别是 pack、grid 和 place,其中: pack 是按添加顺序排列组件。 grid 是按行/列形式...
  • Python Tkinter 之窗口创建与布局(Python GUI 系列1)

    万次阅读 多人点赞 2018-04-22 11:28:07
    Python Tkinter 之窗口创建与布局(Python GUI 系列1) 1. 序言 本文是Python GUI系列的第一篇文章,整个系统约20篇博客,将全面的介绍Python Tkinter常用控件,最后还将基于Tkinter搭建两个比较完整的小项目。 做...
  • Python3 Tkinter 快速上手 (四)常用控件和布局方法了解一下常用控件和布局方法本节知识点:常用控件(Widget):布局管理方法:后面的章节将详细介绍各种常用控件和布局管理的方法。 了解一下常用控件和布局方法 ...
  • 小甲鱼零基础入门学习python笔记

    万次阅读 多人点赞 2019-08-14 11:06:30
    Tkinter7 071 GUI的终极选择:Tkinter8 073 GUI的终极选择:Tkinter10 074 GUI的终极选择:Tkinter11 075 GUI的终极选择:Tkinter12 076 GUI的终极选择:Tkinter13 077 GUI的终极选择:Tkinter14 078 Pygame:初次...
  • Tkinter 布局管理器(一):pack

    千次阅读 2018-12-20 15:28:20
    Tkinter 布局管理器之pack pack、grid 和 place 均用于管理同在一个父组件下的所有组件的布局,其中: pack 是按添加顺序排列组件 grid 是按行/列形式排列组件 place 则允许程序员指定组件的大小和位置 何时使用...
  • place布局管理器是Tkinter支持的第三种布局管理器,它允许程序员直接指定控件的位置和大小。例如下面的代码: from tkinter import *root = Tk()# 绝对位置Button(root,text="绝对坐标摆放1").place(x=20, y...
  • Python ---Tkinter 布局管理器:pack

    千次阅读 2020-02-08 18:45:15
    如果你需要创建相对复杂布局结构,那么建议是使用多个框架(Frame)结构构成,或者使用 grid 管理器实现。 注意:不要在同一个父组件中混合使用 pack 和 grid,因为 Tkinter 会很认真地在那儿计算到底先使用那个...
  • tkinter创建嵌套子窗口

    千次阅读 2020-08-23 16:34:34
    tkinter实现嵌套子窗口
  • from tkinter import *# 构建主窗口main = Tk()# 构建标签Label(main, text='Hello Tkinter!').pack()# 构建退出按钮Button(main, text='Quit', command=main.quit).pack()# 执行主循环main.mainloop() 程序在构建...
  • 具体代码访问GitHub:https://github.com/Roc-J/Python-turtle/tree/master/code15几何管理器Tkinter使用几何管理器在容器中管理组件 下面介绍三种布局方式 * grid manager * pack manager * place manager Grid ...
  • tkinter实用教程一》Linux 环境下安装tkintertkinter实用教程二》tkinter 子模块 ttk 《tkinter实用教程三》tkinter Button 控件 tkinter 的子模块 ttk 本文主要介绍 tkinter 子模块的特性,以及和原生 tkinter...
  • pack布局管理器是早期Tkinter中常用的一种布局方式。这种方式应对简单的情况很容易,但是随着要求越来越复杂布局的难度会迅速提高。本文介绍另外一种方式:grid布局管理器。 grid这个英文单词是格子,网格的意思...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,165
精华内容 466
关键字:

tkinter复杂布局