保姆级别操作掌握UI布局,Python简化的UI应用展示

更新时间:2021-09-02 17:13:32 点击次数:959次
什么是布局?
布局就是谋划部署干一件大事,跑偏了。这里的布局描述的是UI应用中的组件摆放。

简单理解布局,就像搞室内设计定制一样,在大厅定制个桌椅,搞个茶具,通过精心布置设计让住户心情愉悦!

搞UI类/界面应用开发,也是如此,再界面放置几个按钮,表格,给用户直接操作反馈数据(这个也是开发需要掌握学习的基础,就加进来分享了)

好了,Python内置的Tk UI套件有三种布局,但是下面主要谈谈Grid(网格布局)。

谈谈Tk的网格布局
网格布局,很直观,就是网格化,像表格一样

第一行第一列 第一行第二列
第二行第一列 第二行第二列
这就是网格布局的原型了,没错就这么简单。我们将要开发的UI应用如下:

2x2 的表格布局,上面放置4个按钮,每行两个。



这个怎么做出来呢?

直接看下面代码
这个代码在前一篇的基础上修改,使用grid方法,传入了一些方位的参数。

保存下面代码为tkui_lxw_demo.py并运行。

# -*- coding: utf-8 -*-
# @Time : 2021/8/29 11:58 上午
# @Author : LeiXueWei
# @CSDN/Juejin/Wechat: 雷学委
# @XueWeiTag: CodingDemo
# @File : tkui_layout.py
# @Project : hello

from tkinter import *
import tkinter.messagebox as mb

top = Tk()
top.title("雷学委的Tkinter布局Demo")
top.geometry('600x400')


def open_msg_box():
    mb.showinfo("[学委温馨提示]", "简单的消息弹出窗口!")


def open_err_box():
    mb.showerror("[学委温馨提示]", "演示错误消息窗口!")

#这里加上01和02在按钮显示文本上。
first = Button(top, text="点击01->查看消息", fg="tomato", command=open_msg_box)
second = Button(top, text="点击02->查看错误", fg="tomato", command=open_err_box)
#学委前一篇文章这里注释掉
# first.pack()
# second.pack()
#--- 雷学委CSDN代码展示 ---#
#然后添加两个按钮放在第二行
button03 = Button(top, text="点击03->查看消息", fg="tomato", padx=8, pady=8,
                  background="blue",
                  highlightbackground="blue")
button04 = Button(top, text="点击04->查看错误", fg="tomato", padx=8, pady=8,
                  background="green",
                  highlightbackground="green")
#好,下面学委展示用grid布局(也就是网格布局)
first.grid(row=0, column=0, sticky=W)
second.grid(row=0, column=1, sticky=W)
button03.grid(row=1, column=0, sticky=W)
button04.grid(row=1, column=1, sticky=W)
#老套路,调用事件循环保持UI程序不退出。
top.mainloop()
代码讲解
通过观察,我们主要是使用了grid函数,它接受了3个参数。

row 把ui组件放在第几排,从0开始
column 把ui组件放在第几列,从0开始
sticky 放置的方位W是表示朝向西边。
上面的grid放置组件的代码就是告诉程序:

first按钮放在第一排第一列 second按钮放在第一排第二列
button03放在第二行第一列 button04第二行第二列


学会了吗?运行程序就能看到上面的布局了。

布局的更多介绍
选项 含义
column 指定组件插入的列(0 表示第 1 列)
columnspan 指定用多少列(跨列)显示该组件
row 指定组件插入的行(0 表示第 1 行)
rowspan 指定用多少行(跨行)显示该组件
ipadx 指定水平方向上的内边距
ipady 指定垂直方向上的内边距
padx 指定水平方向上的外边距
pady 指定垂直方向上的外边距
sticky 不设置的时候居中,控制组件在 grid 分配的空间中的位置(ewsn代表东西南北,上北下南左西右东) 使用加号(+)表示拉长填充,例如 “n” + “s” 表示将组件垂直拉长填充网格,“n” + “s” + “w” + “e” 表示填充整个网格
in或in_ 这个选项,可以将该组件放到该选项指定的父组件中, 指定的组件必须是该组件的父组件。这个默认即可。

我们下面试试把,上面的表格可以多看无需记忆!



代码如下:
这里学委不贴全部了,直接在上面代码的按钮3(就是这一行开始*#— 雷学委CSDN代码展示 —#*)的位置开始覆盖为下面的代码。
保存文件,重新运行即可。

#--- 雷学委CSDN代码展示 ---#
# 然后添加两个按钮放在第二行
button03 = Button(top, text="点击03->查看消息", fg="tomato", padx=8, pady=8,
                  background="blue",
                  highlightbackground="blue")
button04 = Button(top, text="点击04->查看错误", fg="tomato", padx=8, pady=8,
                  background="green",
                  highlightbackground="green")
button05 = Button(top, text="点击05 放满第三行", fg="tomato", padx=8, pady=8,
                  background="green",
                  highlightbackground="green")
# 好,下面学委展示用grid布局(也就是网格布局)
first.grid(row=0, column=0, sticky=W)
second.grid(row=0, column=1, sticky=W)
button03.grid(row=1, column=0, sticky=W)
button04.grid(row=1, column=1, sticky=W)
button05.grid(row=2, column=0, columnspan=2, sticky=W+E) #放在在第三排,列合并,同时设置W+E铺满第三列。
# 老套路,调用事件循环保持UI程序不退出。
top.mainloop()

延伸
很多大型复杂的UI其实就是一个一个网格布局不断套用迭代起来的。掌握上面的核心布局可以推演,开发出更多层次的界面。
Tk还有其他两种布局,学委主要并非UI开发,我认为另外的要么过于粗放要么过于细致,不便于快速开发(喜欢细抠的可以看看place布局)。

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

回到顶部
嘿,我来帮您!