我剛剛開始使用 tkinter，并且仍在努力適應它的工作方式。我試圖準備某種包含 4 個部分的網格菜單。頂部有一個框架，帶有應用程序的標題，左側有一個框架，帶有一些用于配置應用程序的按鈕，然后，其余的有 4 個大小相同的框架。我的主要問題是左框架和其他四個框架之間的空白列，我該如何調整它以便 4 個方塊填充該空間？請看下面的代碼：import datetimeimport tkinter as tkfrom time import strftimewindow = tk.Tk()window.geometry("1400x800")window.configure(bg="white")window.rowconfigure(20,weight=1)window.columnconfigure(35,weight=1)window.title("Hello World App")entry_var_server = tk.StringVar(window,"")entry_var_db = tk.StringVar(window,"")entry_var_driver = tk.StringVar(window,"")def window_widgets(): db_ini_frame_top = tk.Frame(master=window,bg="#57b956",height=120,width=1400,highlightbackground="black",highlightthickness=2) db_ini_frame_top.grid(rowspan=3,columnspan=34,sticky="w") db_ini_label_top = tk.Label(master=window,text="Hello World",bg="#57b956") db_ini_label_top.configure(font=("Calibri",26)) db_ini_label_top.grid(row=1,column=18,sticky="n") def cur_date(dic = {'01':'st','21':'st','31':'st', '02':'nd','22':'nd', '03':'rd','23':'rd'}): x = strftime('%A, %B %d') return x + dic.get(x[-2:],'th')+strftime(" %G - %H:%M") date = cur_date() db_ini_date = tk.Label(master=window,text=date,bg="#57b956") db_ini_date.configure(font=("Calibri",12)) db_ini_date.grid(row=0,column=0,sticky="w") db_ini_frame_left = tk.Frame(master=window,bg="light grey",height=800,width=120,colormap="new",highlightbackground="black",highlightthickness=2) db_ini_frame_left.grid(row=3,rowspan=16,columnspan=2,sticky="w")
2 回答
牧羊人nacy
TA貢獻1862條經驗 獲得超7個贊
雖然我們只需進行幾個小更改即可修復您的代碼，但花幾分鐘創建更智能的布局將使隨著應用程序的增長修改代碼變得更加容易。
我將提供一些關于如何重新組織代碼的建議。答案的最后是一個最終的工作示例。其中 90% 是您的原始代碼，但在這里或那里進行了一些調整，以使創建 UI 變得更容易。
不要用于grid一切
首先，我建議您不要用于grid所有用途。它對于創建網格很有用，但有時有更好的方法來布局整個窗口。將您的 UI 劃分為邏輯分組，然后使用這些分組來布局它們。
通過將 UI 組織成多個部分，可以更輕松地修改單個部分。當您用于grid所有內容時，進行一個小的更改可能需要您更改十幾行代碼，您必須在其中調整行數和列數以及所有內容的行和列跨度，以便容納一個新的小部件。
將布局代碼分組在一起
我還建議您將grid和的調用分組pack在一起，而不是將它們散布在整個代碼中。我發現它使布局可視化變得更加容易，并且更容易進行更改，因為所有相關的更改都彼此靠近而不是分散開來。
將 UI 劃分為邏輯部分
顯然，您有三個不同的區域：頂部的標題，左側的一些按鈕，然后是其他所有區域。因此，從創建它開始吧。pack當您將物品沿空間兩側排列時，可以說是最佳選擇。
因此，首先為這三個區域創建框架。然后，您可以pack根據您的描述將它們沿邊緣對齊。
db_ini_frame_top = tk.Frame(master=window, ...)
db_ini_frame_left = tk.Frame(master=window, ...)
db_ini_main = tk.Frame(master=window, ...)
db_ini_frame_top.pack(side="top", fill="x")
db_ini_frame_left.pack(side="left", fill="y")
db_ini_main.pack(side="top", fill="both", expand=True)
將其他小部件放入這些容器中
盡管您在頂部創建了一個框架，但您還是將標簽和日期放在了根窗口中。您應該將它們放置在框架內。當您開始添加按鈕時，它們應該位于左側框架中。最后，對于其他四個窗口，它們需要進入第三幀。
db_ini_label_top = tk.Label(master=db_ini_frame_top, ...)
db_ini_date = tk.Label(master=db_ini_frame_top, ...)
db_ini_frame_center_nw = tk.Frame(master=db_ini_main, ...)
db_ini_frame_center_sw = tk.Frame(master=db_ini_main, ...)
db_ini_frame_center_ne = tk.Frame(master=db_ini_main, ...)
db_ini_frame_center_se = tk.Frame(master=db_ini_main, ...)
用于grid實際位于網格中的四個框架
使用 時grid，經驗法則是您應該至少為一行和一列賦予權重，以便知道grid隨著窗口增大或縮小如何處理額外空間。在您的情況下，您希望所有四個單元格相等，因此您應該給它們所有相同的權重。
因為您現在僅對這四個窗口使用網格，而不是嘗試將所有內容強制放入單個網格中，所以您可以使用有意義的行號和列號（即：行 0 和 1、列 0 和 1，而不是人為地設置大行）以及列和跨度）。
db_ini_frame_center_nw = tk.Frame(master=db_ini_main,height=350,width=640,bg="blue")
db_ini_frame_center_sw = tk.Frame(master=db_ini_main,height=450,width=640,bg="light blue")
db_ini_frame_center_ne = tk.Frame(master=db_ini_main,height=350,width=640,bg="light blue")
db_ini_frame_center_se = tk.Frame(master=db_ini_main,height=450,width=640,bg="blue")
db_ini_main.grid_rowconfigure((0,1), weight=1)
db_ini_main.grid_columnconfigure((0,1), weight=1)
db_ini_frame_center_nw.grid(row=0,column=0, sticky="nsew")
db_ini_frame_center_sw.grid(row=0,column=1, sticky="nsew")
db_ini_frame_center_ne.grid(row=1,column=0, sticky="nsew")
db_ini_frame_center_se.grid(row=1,column=1, sticky="nsew")
這就是您的完整代碼的樣子。我沒有調整標題區域中文本的位置，但是很容易更改它，而不會影響 GUI 的其他區域。
另請注意，您可以手動調整窗口大小，所有內容都會適當增大或縮小，而不是留下空白點。
import datetime
import tkinter as tk
from time import strftime
window = tk.Tk()
window.geometry("1400x800")
window.configure(bg="white")
window.rowconfigure(20,weight=1)
window.columnconfigure(35,weight=1)
window.title("Hello World App")
entry_var_server = tk.StringVar(window,"")
entry_var_db = tk.StringVar(window,"")
entry_var_driver = tk.StringVar(window,"")
def window_widgets():
db_ini_frame_top = tk.Frame(master=window,bg="#57b956",height=120,width=1400,highlightbackground="black",highlightthickness=2)
db_ini_frame_left = tk.Frame(master=window,bg="light grey",height=800,width=120,colormap="new",highlightbackground="black",highlightthickness=2)
db_ini_main = tk.Frame(master=window,bg="light grey",height=800,width=120,colormap="new",highlightbackground="black",highlightthickness=2)
db_ini_frame_top.pack(side="top", fill="x")
db_ini_frame_left.pack(side="left", fill="y")
db_ini_main.pack(side="top", fill="both", expand=True)
db_ini_label_top = tk.Label(master=db_ini_frame_top,text="Hello World",bg="#57b956")
db_ini_label_top.configure(font=("Calibri",26))
db_ini_label_top.grid(row=1,column=18,sticky="n")
def cur_date(dic = {'01':'st','21':'st','31':'st',
'02':'nd','22':'nd',
'03':'rd','23':'rd'}):
x = strftime('%A, %B %d')
return x + dic.get(x[-2:],'th')+strftime(" %G - %H:%M")
date = cur_date()
db_ini_date = tk.Label(master=db_ini_frame_top,text=date,bg="#57b956")
db_ini_date.configure(font=("Calibri",12))
db_ini_date.grid(row=0,column=0,sticky="w")
db_ini_frame_center_nw = tk.Frame(master=db_ini_main,height=350,width=640,bg="blue")
db_ini_frame_center_sw = tk.Frame(master=db_ini_main,height=450,width=640,bg="light blue")
db_ini_frame_center_ne = tk.Frame(master=db_ini_main,height=350,width=640,bg="light blue")
db_ini_frame_center_se = tk.Frame(master=db_ini_main,height=450,width=640,bg="blue")
db_ini_main.grid_rowconfigure((0,1), weight=1)
db_ini_main.grid_columnconfigure((0,1), weight=1)
db_ini_frame_center_nw.grid(row=0,column=0, sticky="nsew")
db_ini_frame_center_sw.grid(row=0,column=1, sticky="nsew")
db_ini_frame_center_ne.grid(row=1,column=0, sticky="nsew")
db_ini_frame_center_se.grid(row=1,column=1, sticky="nsew")
window_widgets()
window.tk.mainloop()
SMILET
TA貢獻1796條經驗 獲得超4個贊
日期字段位于單列中，因此它將下一列推到右側。
更新您的日期塊并添加columnspan=4
date = cur_date()
db_ini_date = tk.Label(master=window,text=date,bg="#57b956")
db_ini_date.configure(font=("Calibri",12))
db_ini_date.grid(row=0,column=0,columnspan=4,sticky="w") # Allow 4 columns for date
輸出
添加回答
舉報
0/150
提交
取消