下一篇：

本項目將分段設計“圖書管理登錄UI界面”的用戶登錄、用戶注冊、用戶賬號找回等。主要圍繞GUI標準庫tkinter、以及類的繼承（重點）來設計本項目。

首先新建一個文件夾命名為“圖書管理系統項目”，并在其目錄下新建文件夾code、photo、user_data。然后在code目錄下新建“登錄UI.py”，再然后把圖片放在photo目錄下，如下圖：

注意：此時的窗口組件并未綁定觸發事件，所以按鍵無法觸發。

運行結果

登錄UI.py 代碼示例

"""登錄UI 模塊
"""# 通配符 '*'
__all__ = ['LoginUI']import tkinter as tk
from tkinter import ttkclass LoginUI(tk.Tk):"""繼承tk.Tk，創建登錄UI"""def __init__(self):"""構造方法"""# 調用tk.Tk的構造方法super().__init__()self.width = self.winfo_screenwidth()           # 窗口寬初始位置為屏幕寬度位置顯示self.height = self.winfo_screenheight()         # 窗口高初始位置為屏幕高度位置顯示# 設計自己項目的UIself.title('圖書管理登錄界面')                                  # 標題self.geometry(f'610x406+{self.width//4}+{self.height//8}')   # 窗口像素大小self.resizable(0, 0)                                         # 窗口大小禁止調節# 窗口背景圖self.backgroundPhoto = tk.PhotoImage(file='..\\photo\\用戶登錄背景.png')self.backgroundButton = ttk.Button(self, image=self.backgroundPhoto)self.backgroundButton.pack()# 系統名self.titleLabel = tk.Label(self, text='圖  書  管  理  系  統', font=('Tahoma', 30, 'bold'))self.titleLabel.place(x=118, y=40)# 輸入格式錯誤提示self.hintLabel = tk.Label(self, text='歡迎使用【圖書管理系統】')self.hintLabel.pack(side=tk.BOTTOM, fill=tk.BOTH)# 用戶名tk.Label(self, text='用戶名').place(x=170, y=160)# 輸入用戶名self.userName = tk.StringVar()self.userEntry = ttk.Entry(self, textvariable=self.userName, width=22)self.userEntry.place(x=223, y=161)# 隨機用戶名self.randomPhoto = tk.PhotoImage(file='..\\photo\\隨機用戶名.png')self.randomButton = tk.Button(self, image=self.randomPhoto, relief=tk.FLAT)self.randomButton.place(x=358, y=162)# 密碼tk.Label(self, text='密   碼').place(x=170, y=200)# 輸入密碼self.password = tk.StringVar()self.passwordEntry = ttk.Entry(self, textvariable=self.password, width=22)self.passwordEntry.place(x=223, y=201)# 顯示/隱藏密碼self.showOrConcealCount = 0self.showPhoto = tk.PhotoImage(file='..\\photo\\密碼顯示.png')self.concealPhoto = tk.PhotoImage(file='..\\photo\\密碼隱藏.png')self.showOrConcealButton = tk.Button(self, image=self.showPhoto, relief=tk.FLAT)self.showOrConcealButton.place(x=358, y=205)# 驗證碼tk.Label(self, text='驗證碼').place(x=170, y=244)# 輸入驗證碼self.inputVerifyCode = tk.StringVar()self.verifyEntry = ttk.Entry(self, textvariable=self.inputVerifyCode, width=15)self.verifyEntry.place(x=223, y=244)# 隨機驗證碼self.showVerifyCode = tk.StringVar(value='獲取驗證碼')self.verifyButton = tk.Button(self, textvariable=self.showVerifyCode, relief='flat', width=8)self.verifyButton.place(x=350, y=240)# 刷新驗證碼self.updatePhoto = tk.PhotoImage(file='..\\photo\\驗證碼更新.png')self.updateButton = tk.Button(self, image=self.updatePhoto, relief='flat')self.updateButton.place(x=310, y=245)# 注冊self.registerButton = ttk.Button(self, text='注冊', width=4)self.registerButton.place(x=395, y=159)# 找回self.retrieveButton = ttk.Button(self, text='找回', width=4)self.retrieveButton.place(x=395, y=199)# 登錄self.loginButton = ttk.Button(self, text='登錄')self.loginButton.place(x=200, y=300)# 退出ttk.Button(self, text='退出', command=self.destroy).place(x=310, y=300)# 代碼測試
if __name__ == '__main__':ui = LoginUI()      # 對象實例化ui.mainloop()       # 窗口主循環
else:print(f'導入【{__name__}】模塊')

作者：周華

傳作日期：2023/12/10