python使用tkinter和ttkbootstrap制作UI界面（二）

这次讲解UI界面常用的主键，延续上文的框架进行编写，原界面如下：

Combobox组件应用（下拉框）

python 复制代码

        """
        Combobox组件
        """
        global comvalue_operator
        comvalue_operator = tk.StringVar()
        value_operator = ttk.Combobox(self.frame_two, textvariable=comvalue_operator, width=15)
        value_operator["values"] = ["1", "2"]
        value_operator.current(0)
        value_operator.place(x=550, y=50)

效果如下：

ScrolledText组件应用（多行文本）

python 复制代码

        """
        ScrolledText组件
        """
        scr_explain = scrolledtext.ScrolledText(self.frame_two, font=('微软雅黑', 10), width=102, height=11)
        scr_explain.place(x=10, y=400)

效果如下：

Meter组件应用（圆形进度表）

python 复制代码

        """
        Meter组件
        """
        progress_bar = ttkbootstrap.Meter(
            master=self.frame_two,
            bootstyle="success",
            subtextstyle="warning",
            stripethickness=10,
            metertype="full",  # 将仪表显示为一个完整的圆形或半圆形（semi）
            # wedgesize=5, #设置弧周围的指示器楔形长度,如果大于 0，则此楔形设置为以当前仪表值为中心的指示器
            amounttotal=100,  # 仪表的最大值，默认100
            amountused=100,  # 仪表的当前值
            metersize=130,  # 仪表大小
            showtext=True,  # 指示是否在仪表上显示左、中、右文本标签
            interactive=False,  # 是否可以手动调节数字的大小
            # textleft='进度:',  # 插入到中心文本左侧的短字符串
            textright='%',
            textfont="-size 20",  # 中间数字大小
            # subtext="  ",
            subtext="完成",
            subtextfont="-size 8",  # 文本大小
        )
        progress_bar.place(x=550, y=150)

效果如下：

Treeview组件（数据表单）

python 复制代码

        """
        Treeview组件
        """
        tree_top = ["信道", "制式", "速率", "频宽"]

        frame = Frame(self.frame_two)
        frame.place(x=10, y=10, width=500)

        # 设置x轴和y轴的滚动条
        ybar = ttk.Scrollbar(frame, orient=VERTICAL)
        ybar.pack(side='right', fill='y')

        xbar = ttk.Scrollbar(frame, orient=tk.HORIZONTAL)
        xbar.pack(side='bottom', fill='x')

        # 创建表格
        self.tree_date = ttk.Treeview(frame, show='tree headings', height=15)
        self.tree_date.pack(side='left', fill='y')

        self.tree_date.configure(yscrollcommand=ybar.set, xscrollcommand=xbar.set)

        # 使用command参数来绑定treevievw
        ybar.config(command=self.tree_date.yview)
        xbar.config(command=self.tree_date.xview)

        # 定义列
        date_columns = tree_top
        self.tree_date["columns"] = date_columns

        # 设置列宽度
        self.tree_date.column('#0', width=70, anchor="center", stretch=False)
        self.tree_date.column(tree_top[0], width=120, anchor="center")
        self.tree_date.column(tree_top[1], width=120, anchor="center")
        self.tree_date.column(tree_top[2], width=120, anchor="center")
        self.tree_date.column(tree_top[3], width=120, anchor="center")

        # 添加列名
        self.tree_date.heading("#0", text="场景")
        for j in date_columns:
            self.tree_date.heading(j, text=j)

效果如下：

Style风格应用（兼容老的参数设置）

python 复制代码

        """
        Style使用
        """
        style = ttk.Style()

        style.configure('custom.TButton', font=('宋体', 20), background='red')
        style.configure("My.TButton", font=('微软雅黑', 10), width=9, height=2)

        test_button_one = ttkbootstrap.Button(self.frame_two, text="测试按键一")
        test_button_one["style"] = "custom.TButton"
        test_button_one.place(x=750, y=50)

        test_button_two = ttkbootstrap.Button(self.frame_two, text="测试按键二")
        test_button_two["style"] = "My.TButton"
        test_button_two.place(x=750, y=150)

效果如下：

本次在ui_test.py新增代码，新增如下：

python 复制代码

import ttkbootstrap
from tkinter import Frame

from ui_show.test_one import UiTestOne
from ui_show.test_two import UiTestTwo


class UiTest(object):
    def __init__(self):
        self.window = ttkbootstrap.Window()
        self.frame_one = Frame()
        self.frame_two = Frame()

    def main_interface(self):
        """
        测试主界面
        """
        # 设置标题
        self.window.title('测试UI界面')

        # 屏幕的尺寸大小
        sw = self.window.winfo_screenwidth()
        sh = self.window.winfo_screenheight()

        # 设置UI界面的高度和宽度
        ww = 1000
        wh = 700

        # 窗口居中设置
        x = (sw - ww) / 2
        y = (sh - wh) / 2
        self.window.geometry("%dx%d+%d+%d" % (ww, wh, x, y))

        # 设置窗口是否可以变化长宽,默认可变
        self.window.resizable(width=False, height=False)

        """
        多窗口设置
        """
        all_notebook = ttkbootstrap.Notebook(self.window)
        all_notebook.pack(padx=10, pady=5, fill=ttkbootstrap.BOTH, expand=True)

        self.frame_one = Frame(all_notebook)
        self.frame_two = Frame(all_notebook)

        all_notebook.add(self.frame_one, text='测试界面一')
        all_notebook.add(self.frame_two, text='测试界面二')

    def run_main(self):
        self.main_interface()

        ui_test_one = UiTestOne(self.frame_one)
        ui_test_one.show_interface()

        ui_test_two = UiTestTwo(self.frame_two)
        ui_test_two.show_interface()

        self.window.mainloop()


if __name__ == '__main__':
    ui_test = UiTest()
    ui_test.run_main()

在test_two.py写入界面二，代码如下：

python 复制代码

import ttkbootstrap
import tkinter as tk

from tkinter import ttk, scrolledtext, Frame, VERTICAL


class UiTestTwo(object):
    def __init__(self, window):
        self.frame_two = window

    def show_interface(self):
        """
        Combobox组件
        """
        global comvalue_operator
        comvalue_operator = tk.StringVar()
        value_operator = ttk.Combobox(self.frame_two, textvariable=comvalue_operator, width=15)
        value_operator["values"] = ["1", "2"]
        value_operator.current(0)
        value_operator.place(x=550, y=50)

        """
        ScrolledText组件
        """
        scr_explain = scrolledtext.ScrolledText(self.frame_two, font=('微软雅黑', 10), width=102, height=11)
        scr_explain.place(x=10, y=400)

        """
        Style使用
        """
        style = ttk.Style()

        style.configure('custom.TButton', font=('宋体', 20), background='red')
        style.configure("My.TButton", font=('微软雅黑', 10), width=9, height=2)

        test_button_one = ttkbootstrap.Button(self.frame_two, text="测试按键一")
        test_button_one["style"] = "custom.TButton"
        test_button_one.place(x=750, y=50)

        test_button_two = ttkbootstrap.Button(self.frame_two, text="测试按键二")
        test_button_two["style"] = "My.TButton"
        test_button_two.place(x=750, y=150)

        """
        Meter组件
        """
        progress_bar = ttkbootstrap.Meter(
            master=self.frame_two,
            bootstyle="success",
            subtextstyle="warning",
            stripethickness=10,
            metertype="full",  # 将仪表显示为一个完整的圆形或半圆形（semi）
            # wedgesize=5, #设置弧周围的指示器楔形长度,如果大于 0，则此楔形设置为以当前仪表值为中心的指示器
            amounttotal=100,  # 仪表的最大值，默认100
            amountused=100,  # 仪表的当前值
            metersize=130,  # 仪表大小
            showtext=True,  # 指示是否在仪表上显示左、中、右文本标签
            interactive=False,  # 是否可以手动调节数字的大小
            # textleft='进度:',  # 插入到中心文本左侧的短字符串
            textright='%',
            textfont="-size 20",  # 中间数字大小
            # subtext="  ",
            subtext="完成",
            subtextfont="-size 8",  # 文本大小
        )
        progress_bar.place(x=550, y=150)

        """
        Treeview组件
        """
        tree_top = ["信道", "制式", "速率", "频宽"]

        frame = Frame(self.frame_two)
        frame.place(x=10, y=10, width=500)

        # 设置x轴和y轴的滚动条
        ybar = ttk.Scrollbar(frame, orient=VERTICAL)
        ybar.pack(side='right', fill='y')

        xbar = ttk.Scrollbar(frame, orient=tk.HORIZONTAL)
        xbar.pack(side='bottom', fill='x')

        # 创建表格
        self.tree_date = ttk.Treeview(frame, show='tree headings', height=15)
        self.tree_date.pack(side='left', fill='y')

        self.tree_date.configure(yscrollcommand=ybar.set, xscrollcommand=xbar.set)

        # 使用command参数来绑定treevievw
        ybar.config(command=self.tree_date.yview)
        xbar.config(command=self.tree_date.xview)

        # 定义列
        date_columns = tree_top
        self.tree_date["columns"] = date_columns

        # 设置列宽度
        self.tree_date.column('#0', width=70, anchor="center", stretch=False)
        self.tree_date.column(tree_top[0], width=120, anchor="center")
        self.tree_date.column(tree_top[1], width=120, anchor="center")
        self.tree_date.column(tree_top[2], width=120, anchor="center")
        self.tree_date.column(tree_top[3], width=120, anchor="center")

        # 添加列名
        self.tree_date.heading("#0", text="场景")
        for j in date_columns:
            self.tree_date.heading(j, text=j)

本次讲解UI常用组件的写法，后续将更新组件的调用方法，有疑问欢迎找博主进行答疑，我是活动的笑脸，希望大家积极点赞，本篇到此结束。