tkinter界面设计_tkinter界面设计frame

        走在楼间，阳光透过窗户洒在了楼道里，伴随着丝丝冷意，侵进了我的身体。恍惚间，想起了前几年在白纸上写下的一句话：晨光曦曦，映我心田；现在的我却想到的是；外面的阳光正好，而我却把自己锁在了牢笼里，套上了枷锁，躲在了角落里，只有当光移过来时，我才看见它。

软件：PyCharmEAP
语言：Python
作者：落寞红颜玉玫瑰
时间：立冬——闭塞而成冬（十月获稻，葭月潜龙，腊月嘉年）

效果展示

目录

1、TKINTER界面设计

2、界面背景实时刷新

首先导入所需要的模块。

import os
import random
import string
import tkinter
import tkinter.messagebox
from PIL import Image, ImageTk
# 这个是我自己的代码模块包，不是系统或者库里的，按照自己实际需求引入。
from my_module_packages import getImage
1
2
3
4
5
6
7
8

1、TKINTER界面设计

1、大体页面设计

标题，最大化与最小化及打开界面大小设计，顺带设置一个图标

# 框架构建
root = tkinter.Tk()
root.title("TKINTER界面优化")
root.geometry("600x500+100+100")
root.minsize(300, 250)
root.maxsize(600, 500)
root.iconbitmap(r"C:\Users\JZ\Desktop\work\已完成项目\sendMes\gui.ico")
1
2
3
4
5
6
7

2、放入框架

方便本文展示，本文放入了两个框架，如若框架更多，或没有，则需要更改后面代码，这部分不难，主代码出来后，可自行更改。

# 分区，分为按钮区和输出区
frame1 = tkinter.Frame(root)
frame2 = tkinter.Frame(root)
frame1.place(relx=0.05, rely=0.05, relwidth=0.4, relheight=0.9)
frame2.place(relx=0.55, rely=0.05, relwidth=0.4, relheight=0.9)
1
2
3
4
5

3、加入组件

给第一个框架放入一个按钮，一个文本框，也可以加入其他组件。

f1_label = tkinter.Label(frame1, anchor="nw")
f1_label.place(relx=0, rely=0, relwidth=1, relheight=1)
f2_label = tkinter.Label(frame2, anchor="nw")# image=image2[0]
f2_label.place(relx=0, rely=0, relwidth=1, relheight=1)

button1 = tkinter.Button(frame1, compound="center", text="展示按钮1",
                         font=(u"楷体", 30), relief=tkinter.FLAT,
                         borderwidth=0, justify="center",
                         anchor="center", activebackground="purple")
button1.place(relx=0.2, rely=0.1, relwidth=0.6, relheight=0.1)

button2 = tkinter.Label(frame1, compound="center", text="实验文本框",
                         font=(u"楷体", 30), relief=tkinter.FLAT,
                         borderwidth=0, justify="center",
                         anchor="center", activebackground="purple")
button2.place(relx=0.2, rely=0.3, relwidth=0.6, relheight=0.1)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、运行主函数

第二部分的主要内容。

getImage.gen(root)
1

5、进入消息循环

root.mainloop()
1

2、界面背景实时刷新

1、导入文件

可按照实际需求自行添加。

# "根路径选择：选择一个放图片的文件夹，最好使用绝对路径。"
ROOTPATH = "C:\\Users\\JZ\\Desktop\\work\\每日报表_pycharm\\images"
1
2

2、读取图片列表

随机选择图片，本文两个框架，所以选取两张，如果框架较多，可用循环函数生成。

# 输出当前路径下的所有文件，需要全是图片相关格式。
images = os.listdir(ROOTPATH)

# 随机选择目标文件夹中的图片。
# 利用随机函数，来选取本次的图片。
path = ROOTPATH + "\\" + random.choice(images)
# 选取两张图片，因为本例中有俩frame。
path2 = ROOTPATH + "\\" + random.choice(images)
# 打开当前选择的图片
img1 = Image.open(path)
# 打开第二张图片，若不需要，注释掉即可。
img2 = Image.open(path2)
# 若是多个图片背景，则需要生成列表，方便选取
img_list = [img1, img2]

# 循环函数选择图片，将n换为需要的数目就可以了。
# img_list = [Image.open(ROOTPATH + "\\" + random.choice(images)) for i in range(n)]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3、更新背景

# 循环函数，用after来递归，进行刷新。
def gen(root) -> {ImageTk.PhotoImage}:
    """
    :param root: 定级路径。
    :return: 无返回值，背景就是返回值了。
    """
    # 获得当前框架的宽和高。
    now_size = root.wm_geometry().split("+")[0].split("x")
    # 主函数，用来重新配置 image。
    choice(root, now_size)
    # 利用after函数刷新，空间间隔是100毫秒。
    root.after(100, gen, root)
1
2
3
4
5
6
7
8
9
10
11
12

4、更新背景

在这儿，如果界面全是frame框架的话，则可以直接用，只要img_list元素对应就可以就可以。如若没有frame框架，则去掉frame框架判断即可，若是frame和其他组件（比如button，label等）时，则需要增加else条件。

def choice(root, now_size):
    """
    :param root: 定级路径。
    :param now_size: 当前框架的尺寸。
    :return:刷新的界面就是返回值。
    """
    # 查看根路径下面有啥元素，如果是frame，则不会又image属性，但其子元素需要。
    # 开始索引为0。
    index = 0
    for item in root.winfo_children():
        # 得到当前所要使用的图片。
        img = img_list[index]
        # 如果是此元素，则需要循环更新背景图片。
        if "frame" in str(item):
            # 获得当前框架的宽和高，作为当前框架内的基础数据。
            wid, hei = float(now_size[0]) * float(place(item)[2]), float(now_size[1]) * float(place(item)[3])
            # 缩放因子选择，选择最大的做为缩放因子，铺满框架，选择最小的则不改变图片视觉。
            resize_factor = max([wid / img.size[0], hei / img.size[1]])
            # 将图片的大小调成与当前框架相符！
            new_img = img.resize((int(img.size[0] * resize_factor), int(img.size[1] * resize_factor)))

            # 在当前框架内，调整子元素的大小，使其适应当前tkinter的大小。
            for child in item.winfo_children():
                # 裁剪图片，获得左上角与右下角的坐标（相对于当前框架）。
                x1, y1 = wid * float(place(child)[0]), hei * float(place(child)[1])
                x2, y2 = wid * (float(place(child)[0]) + float(place(child)[2])), hei * (
                        float(place(child)[1]) + float(place(child)[3]))
                image1 = new_img.crop((x1, y1, x2, y2))
                # 将其转换为可用于的图片。
                image = ImageTk.PhotoImage(image1)
                # 将图片配置到框架。
                child.configure(image=image)
                # 调节字体，使其相对于当前页面大小。
                child.config(font=(u"楷体", int(hei * 0.05)))
                # 这行代码防止页面闪烁。
                child.image = image

        # 对于多个框架背景选取不同图片的设置
        index += 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

5、用来获取子元素相关信息，来做假透明背景

def place(child) -> {tuple[str, str, str, str]}:
    """
    :param child: 输入元素。
    :return:返回一个tup，其四个元素是relx，rely，relwidth，relheight。
    """
    # 获得当前元素的相对位置，及相对大小。
    place_info: tuple[string, ...] = tuple(
        [child.place_info()["relx"],
         child.place_info()["rely"],
         child.place_info()["relwidth"],
         child.place_info()["relheight"]])
    return place_info
1
2
3
4
5
6
7
8
9
10
11
12

山有木兮木有枝，心悦君兮君不知。——佚名《越人歌》