布局方向

grid 栅格

和 CSS 组件 bootstrap 的栅格系统类似

简单代码

import tkinter as tk
import webbrowser
from tkinter import messagebox
class Application(tk.Frame):
    def __init__(self, master=None):
        # 绑定主画布
        super().__init__(master)
        self.master = master
        self.pack()
        self.createWidget()
    # 创建组件
    def createWidget(self):
        # grid 布局
        self.l1 = tk.Label(self, {
            'text': '用户名:',
        }).grid({
            'row': 0,
            'column': 0,
        })
        self.E1 = tk.Entry(self).grid({
            'row': 0,
            'column': 1,
        })
        self.l2 = tk.Label(self, {
            'text': '密码:',
        }).grid({
            'row': 1,
            'column': 0,
        })
        self.E2 = tk.Entry(self).grid({
            'row': 1,
            'column': 1,
        })
        self.B1 = tk.Button(self, {
            'text': '登录',
        }).grid({
            'row': 2,
            'column': 1,
            'sticky': 'EW'
        })
        self.B2 = tk.Button(self, {
            'text': '取消'
        }).grid({
            'row': 2,
            'column': 2,
            'sticky': 'E',
        })
# 窗口主体
root = tk.Tk()
root.geometry("600x300+500+300")
root.title('GUI 测试')
# 子窗口
app = Application(master=root)
root.mainloop()

计算器GUI实例

注意 grid 的参数 row 为第几行 (竖) column 为第几列 (横) rowspan 为占用多少行 (竖) columnspan 为占用多少列 (横)

import tkinter as tk
import webbrowser
from tkinter import messagebox
class Application(tk.Frame):
    def __init__(self, master=None):
        # 绑定主画布
        super().__init__(master)
        self.master = master
        self.pack()
        self.createWidget()
    # 创建组件
    def createWidget(self):
        # grid 布局计算器
        butTuple = (('C', '±', '/', 'X'),
                    (7, 8, 9, '-'),
                    (4, 5, 6, '+'),
                    (1, 2, 3, '='),
                    (0, '.'))
        tk.Entry(self).grid({
            'row': 0,
            'column': 0,
            'columnspan': 4,
            'pady': 10
        })
        for index, item in enumerate(butTuple):
            for index1, item1 in enumerate(item):
                if item1 == '=':
                    tk.Button(self, {
                        'width': 3,
                        'text': item1,
                    }).grid({
                        'row': index + 1,
                        # 占用多少行(竖)
                        'rowspan': 2,
                        'column': index1,
                        'sticky': 'NSEW'
                    })
                elif item1 == 0:
                    tk.Button(self, {
                        'width': 3,
                        'text': item1,
                    }).grid({
                        'row': index + 1,
                        # 占用多少列(横)
                        'columnspan': 2,
                        'column': index1,
                        'sticky': 'NSEW'
                    })
                elif item1 == '.':
                    tk.Button(self, {
                        'width': 3,
                        'text': item1,
                    }).grid({
                        'row': index + 1,
                        'column': index1 + 1,
                        'sticky': 'NSEW'
                    })
                else:
                    tk.Button(self, {
                        'width': 3,
                        'text': item1,
                    }).grid({
                        'row': index + 1,
                        'column': index1,
                        'sticky': 'NSEW'
                    })
# 窗口主体
root = tk.Tk()
root.geometry("600x300+500+300")
root.title('GUI 测试')
# 子窗口
app = Application(master=root)
root.mainloop()

place 像素布局

这个布局拥有更大的想象空间, 使用绝对定位和相对定位与像素

简单用法

    def __init__(self, master=None):
        # 绑定主画布
        super().__init__(master)
        # master 为 root
        # self 为子窗口
        self.master = master
        self.master['bg'] = '#cccccc'
        self.place({
            # 向 x 轴方向移 20%
            'relx': 0.2,
            # 向 y 轴方向移 10px
            'y': 10,
            # 宽度 20%
            'relwidth': 0.2,
            # 高度 50%
            'relheight': 0.5,
        })

扑克实例

import tkinter as tk
import webbrowser
from tkinter import messagebox
class Application(tk.Frame):
    def __init__(self, master=None):
        # 绑定主画布
        super().__init__(master)
        # master 为 root
        # self 为子窗口
        self.master = master
        self.master['bg'] = '#cccccc'
        self.pack()
        self.createWidget()
    # 创建组件
    def createWidget(self):
        # place 布局
        num = 7
        # 创建图片对象列表
        self.photos = [tk.PhotoImage(file='img/0%d.GIF' % (i + 1)) for i in range(num)]
        # 创建 label 对象列表
        self.pk = [tk.Label(self.master, {
            'image': self.photos[i]
        }) for i in range(num)]
        index = 1
        # 循环显示 label
        for item in self.pk:
            print(item)
            item.place({
                'x': index * 80,
                'y': 40,
            })
            index += 1
            # 绑定事件
            item.bind('<Button-1>', self.chupai)
    def chupai(self, e):
        # 获得坐标信息
        print(e.widget.winfo_geometry())
        # 获得 x 坐标
        print(e.widget.winfo_x())
        # 获得 y 左右
        print(e.widget.winfo_y())
        # 更改目标label 的 y 坐标
        if e.widget.winfo_y() == 40:
            e.widget.place(y=20)
        elif e.widget.winfo_y() == 20:
            e.widget.place(y=40)
# 窗口主体
root = tk.Tk()
root.geometry("1200x400+500+300")
root.title('GUI 测试')
# 子窗口
app = Application(master=root)
root.mainloop()