Tkinter制作登录界面以及登陆后页面切换（一）

前言

本帖子，默认您已了解Tkinter的基础操作，以及原理，文中仅会对部分逻辑描述，不会对Tkinter讲解.

序言

1. 由来

入职以来，很长时间都是在做网页版的后台，用到最多的就是Java语言，框架主要是：Spring Boot，Spring Cloud 。中间件大多用:Mq，Redis，Nacos等，但是随着项目的发展，网页版已经无法满足客户的需求以及业务生态的发展，需要增加客户端应用，由于公司没有此类开发经验，重担就留给了俺，一个小趴菜（报头痛哭）…好了，废话不多说，开搞。说到客户端第一时间想到的就是python的PyQt5，因为以前了解过。但是随着深入了解，好是好，功能也齐全，但是由于作者比较笨，也比较懒实在不想去烧脑学习了，就盯上了较为简单快捷的Tkinter。

2. 思路

制作客户端主要流程被我分为（不考虑后台服务情况下）：明白需求（了解业务）、设计架构（主要是使用的语言以及怎么模块化开发，方便后续升级管理）、打包部署（Inno setup 打包）、测试调优（测试人员）。

3. 项目结构描述

下文中出现的如： login/ui.py 这样的文件名称时则代表的是，在包login下的ui.py文件，后续可以自行修改。

4. 项目实战

1. 登录界面实现（代码）

1. 图片展示：
   

2. login/ui.py

   from tkinter import *
   from tkinter.ttk import *class WinGUI(Tk):def __init__(self):super().__init__()self.__win()self.iconbitmap('favicon.ico')self.tk_input_username_label = Entry(self, )self.tk_input_username_label.place(relx=0.5367, rely=0.2471, relwidth=0.4000, relheight=0.1471)self.tk_input_password_label = Entry(self, show='*')self.tk_input_password_label.place(relx=0.5367, rely=0.4441, relwidth=0.4000, relheight=0.1471)self.tk_button_login_button = Button(self, text="立即登录", takefocus=False, )self.tk_button_login_button.place(relx=0.5367, rely=0.6824, relwidth=0.4000, relheight=0.1471)self.tk_label_register = Label(self, text="还没有账号？立即注册", anchor="center", )self.tk_label_register.place(relx=0.6933, rely=0.8676, relwidth=0.2250, relheight=0.0882)self.tk_canvas_login_canvas = Canvas(self, )self.tk_canvas_login_canvas.place(relx=0.0000, rely=0.0000, relwidth=0.4667, relheight=1.0000)self.tk_label_welcome = Label(self, text="项目介绍（自定义）", anchor="center", )self.tk_label_welcome.place(relx=0.4667, rely=0.0588, relwidth=0.5333, relheight=0.1471)def __win(self):self.title("登录界面")width, height = 600, 340screenwidth = self.winfo_screenwidth()screenheight = self.winfo_screenheight()geometry = '%dx%d+%d+%d' % (width, height, (screenwidth - width) / 2, (screenheight - height) / 2)self.geometry(geometry)self.minsize(width=width, height=height)def login(self):username = self.tk_input_username_label.get()password = self.tk_input_password_label.get()return username, passwordclass Win(WinGUI):def __init__(self, controller):self.ctl = controllersuper().__init__()self.__event_bind()self.__style_config()self.ctl.init(self)def __event_bind(self):self.tk_input_password_label.bind('<Return>', self.ctl.login_submit)self.tk_button_login_button.bind('<Button-1>', self.ctl.login_submit)self.tk_button_login_button.bind('<Return>', self.ctl.login_submit)self.tk_label_register.bind('<Button-1>', self.ctl.register)passdef __style_config(self):pass
   

3. login/control.py

   import tkinter.messageboxfrom login.ui import WinGUIclass Controller:# 导入UI类后，替换以下的 object 类型，将获得 IDE 属性提示功能ui: WinGUIdef __init__(self):self.url = "登录地址"def init(self, ui):"""得到UI实例，对组件进行初始化配置"""self.ui = uidef close_windows(self):print("点击了菜单")if self.ui:self.ui.destroy()def version(self):print("点击了菜单")tkinter.messagebox.showinfo("版本信息", "当前版本: V1.0.0")def login_submit(self, evt):u, p = self.ui.login()if u is None or len(u) == 0:tkinter.messagebox.showinfo("登录提示", "请输入登录用户名！")elif p is None or len(p) == 0:tkinter.messagebox.showinfo("登录提示", "请输入登录密码！")print(f"触发了登录操作，地址：{self.url},账号：{u},密码：{p}")# 模拟登录操作if u == 'admin' and p == 'admin':print(f'登录成功')# 关闭登录窗口self.ui.destroy()from home.control import Controller as HomeUIControllerfrom home.ui import Win as MainWin# 这里创建首页界面，并进入GUI循环，可以将登陆后的Token统一管理，不想管理的可以当作参数传过去不过比较麻烦app = MainWin(HomeUIController())app.mainloop()else:tkinter.messagebox.showinfo("登录提示", "登陆失败了，请检查账号密码是否正确.")def register(self, evt):print(f"触发了注册操作，地址：{self.url}")

4. 启动类main.py

   # 导入窗口控制器
   from login.control import Controller as MainUIController
   # 导入布局文件
   from login.ui import Win as MainWinif __name__ == "__main__":app = MainWin(MainUIController())app.iconbitmap('favicon.ico')# 启动app.mainloop()
   

2. 首页界面实现（代码）

1. 图片展示
   

2. home/ui.py

   from tkinter import *
   from tkinter.ttk import *class WinGUI(Tk):def __init__(self):super().__init__()self.__win()# 当前页数self.index = 1self.total = 10self.data = []self.tk_table_m1ef1meg = self.__tk_table_m1ef1meg(self)self.tk_label_m1ef4id7 = self.__tk_label_m1ef4id7(self)self.tk_input_query = self.__tk_input_query(self)self.tk_button_query = self.__tk_button_query(self)self.tk_button_head = self.__tk_button_head(self)self.tk_button_previous__page = self.__tk_button_previous__page(self)self.tk_button_next_page = self.__tk_button_next_page(self)self.tk_button_last = self.__tk_button_last(self)def __win(self):self.title("项目名称")# 设置窗口大小、居中width = 800height = 600screenwidth = self.winfo_screenwidth()screenheight = self.winfo_screenheight()geometry = '%dx%d+%d+%d' % (width, height, (screenwidth - width) / 2, (screenheight - height) / 2)self.iconbitmap('favicon.ico')self.geometry(geometry)self.minsize(width=width, height=height)def scrollbar_autohide(self, vbar, hbar, widget):"""自动隐藏滚动条"""def show():if vbar: vbar.lift(widget)if hbar: hbar.lift(widget)def hide():if vbar: vbar.lower(widget)if hbar: hbar.lower(widget)hide()widget.bind("<Enter>", lambda e: show())if vbar: vbar.bind("<Enter>", lambda e: show())if vbar: vbar.bind("<Leave>", lambda e: hide())if hbar: hbar.bind("<Enter>", lambda e: show())if hbar: hbar.bind("<Leave>", lambda e: hide())widget.bind("<Leave>", lambda e: hide())def v_scrollbar(self, vbar, widget, x, y, w, h, pw, ph):widget.configure(yscrollcommand=vbar.set)vbar.config(command=widget.yview)vbar.place(relx=(w + x) / pw, rely=y / ph, relheight=h / ph, anchor='ne')def h_scrollbar(self, hbar, widget, x, y, w, h, pw, ph):widget.configure(xscrollcommand=hbar.set)hbar.config(command=widget.xview)hbar.place(relx=x / pw, rely=(y + h) / ph, relwidth=w / pw, anchor='sw')def create_bar(self, master, widget, is_vbar, is_hbar, x, y, w, h, pw, ph):vbar, hbar = None, Noneif is_vbar:vbar = Scrollbar(master)self.v_scrollbar(vbar, widget, x, y, w, h, pw, ph)if is_hbar:hbar = Scrollbar(master, orient="horizontal")self.h_scrollbar(hbar, widget, x, y, w, h, pw, ph)self.scrollbar_autohide(vbar, hbar, widget)def __tk_table_m1ef1meg(self, parent):# 表头字段 表头宽度columns = {"序列": 79, "姓名": 239, "民族": 79, "年龄": 79, "简介": 319}tk_table = Treeview(parent, show="headings", columns=list(columns), )for text, width in columns.items():  # 批量设置列属性tk_table.heading(text, text=text, anchor='center')tk_table.column(text, anchor='center', width=width, stretch=False)  # stretch 不自动拉伸tk_table.place(relx=0.0000, rely=0.1817, relwidth=0.9988, relheight=0.7500)return tk_tabledef __tk_button_next_page(self, parent):btn = Button(parent, text="下一页", takefocus=False, )btn.place(relx=0.8313, rely=0.9500, relwidth=0.0625, relheight=0.0500)return btndef __tk_button_previous__page(self, parent):btn = Button(parent, text="上一页", takefocus=False, )btn.place(relx=0.7462, rely=0.9500, relwidth=0.0625, relheight=0.0500)return btndef __tk_label_m1ef4id7(self, parent):label = Label(parent, text="当前第3页/总130页", anchor="center", )label.place(relx=0.4625, rely=0.9500, relwidth=0.1938, relheight=0.0500)return labeldef __tk_input_query(self, parent):ipt = Entry(parent, )ipt.place(relx=0.0000, rely=0.1183, relwidth=0.2500, relheight=0.0500)return iptdef __tk_button_query(self, parent):btn = Button(parent, text="搜索", takefocus=False, )btn.place(relx=0.2612, rely=0.1183, relwidth=0.0788, relheight=0.0500)return btndef __tk_button_head(self, parent):btn = Button(parent, text="首页", takefocus=False, )btn.place(relx=0.6675, rely=0.9500, relwidth=0.0625, relheight=0.0500)return btndef __tk_button_last(self, parent):btn = Button(parent, text="尾页", takefocus=False, )btn.place(relx=0.9187, rely=0.9500, relwidth=0.0625, relheight=0.0500)return btndef page_add_index(self):# 下一页if self.index < self.total:self.index += 1return self.indexdef page_sub_index(self):# 上一页if self.index > 1:self.index -= 1return self.indexdef update_table(self):if self.data and len(self.data) > 0:if self.tk_table_m1ef1meg.get_children():for get_child in self.tk_table_m1ef1meg.get_children():self.tk_table_m1ef1meg.delete(get_child)for index, datum in enumerate(self.data):self.tk_table_m1ef1meg.insert("", "end", text='',values=(index + 1, datum.get('name', ''), datum.get('nation', ''),datum.get('age', ''), datum.get('info', '')))class Win(WinGUI):def __init__(self, controller):self.ctl = controllersuper().__init__()self.__event_bind()self.__style_config()self.config(menu=self.create_menu())self.ctl.init(self)def create_menu(self):"""创建自定义的菜单，可以不要"""menu = Menu(self, tearoff=False)menu.add_cascade(label="设置", menu=self.menu_m1ecaoyu(menu))menu.add_cascade(label="帮助", menu=self.menu_m1eccdqt(menu))return menudef menu_m1ecaoyu(self, parent):menu = Menu(parent, tearoff=False)menu.add_command(label="关闭界面", command=self.ctl.close_windows)return menudef menu_m1eccdqt(self, parent):menu = Menu(parent, tearoff=False)menu.add_command(label="版本信息", command=self.ctl.version)return menudef __event_bind(self):"""此处对组件绑定事件"""# 搜索框绑定回车事件，回车直接搜索self.tk_input_query.bind('<Return>', self.ctl.select_member_data)# 搜索按钮绑定点击事件self.tk_button_query.bind('<Button-1>', self.ctl.select_member_data)# 首页事件self.tk_button_head.bind('<Button-1>', lambda event: self.ctl.load_member_data_next(self.index))self.tk_button_last.bind('<Button-1>', lambda event: self.ctl.load_member_data_next(self.total))self.tk_button_previous__page.bind('<Button-1>',lambda event: self.ctl.load_member_data_next(self.page_sub_index()))self.tk_button_next_page.bind('<Button-1>', lambda event: self.ctl.load_member_data_next(self.page_add_index()))passdef __style_config(self):pass
   

3. 打包build.py（与main.py同级目录）

import subprocessdef main_windows_package():# 定义 PyInstaller 命令pyinstaller_command = ['pyinstaller', '--onefile', '-w','--icon', 'favicon.ico', 'main.py']try:subprocess.run(pyinstaller_command, check=True)except subprocess.CalledProcessError as e:print(f"An error occurred while running PyInstaller: {e}")if __name__ == '__main__':main_windows_package()

4. 打包安装包

各位可以自行选择工具，由于此处项目过于简单，即开即用没有做打包的脚本，后续做到需要打包时会在后面写出来，当然有需要的也可以留言，看到后可以义务帮助。

执行了 build.py 后同级会出现一个dist目录，里边会有main.exe可执行文件，这个就是程序打包后的啦，好啦，到此结束。