我剛剛開始使用 tkinter，并且仍在努力適應(yīng)它的工作方式。我試圖準(zhǔn)備某種包含 4 個部分的網(wǎng)格菜單。頂部有一個框架，帶有應(yīng)用程序的標(biāo)題，左側(cè)有一個框架，帶有一些用于配置應(yīng)用程序的按鈕，然后，其余的有 4 個大小相同的框架。我的主要問題是左框架和其他四個框架之間的空白列，我該如何調(diào)整它以便 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貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個贊
雖然我們只需進(jìn)行幾個小更改即可修復(fù)您的代碼，但花幾分鐘創(chuàng)建更智能的布局將使隨著應(yīng)用程序的增長修改代碼變得更加容易。
我將提供一些關(guān)于如何重新組織代碼的建議。答案的最后是一個最終的工作示例。其中 90% 是您的原始代碼，但在這里或那里進(jìn)行了一些調(diào)整，以使創(chuàng)建 UI 變得更容易。
不要用于grid一切
首先，我建議您不要用于grid所有用途。它對于創(chuàng)建網(wǎng)格很有用，但有時有更好的方法來布局整個窗口。將您的 UI 劃分為邏輯分組，然后使用這些分組來布局它們。
通過將 UI 組織成多個部分，可以更輕松地修改單個部分。當(dāng)您用于grid所有內(nèi)容時，進(jìn)行一個小的更改可能需要您更改十幾行代碼，您必須在其中調(diào)整行數(shù)和列數(shù)以及所有內(nèi)容的行和列跨度，以便容納一個新的小部件。
將布局代碼分組在一起
我還建議您將grid和的調(diào)用分組pack在一起，而不是將它們散布在整個代碼中。我發(fā)現(xiàn)它使布局可視化變得更加容易，并且更容易進(jìn)行更改，因?yàn)樗邢嚓P(guān)的更改都彼此靠近而不是分散開來。
將 UI 劃分為邏輯部分
顯然，您有三個不同的區(qū)域：頂部的標(biāo)題，左側(cè)的一些按鈕，然后是其他所有區(qū)域。因此，從創(chuàng)建它開始吧。pack當(dāng)您將物品沿空間兩側(cè)排列時，可以說是最佳選擇。
因此，首先為這三個區(qū)域創(chuàng)建框架。然后，您可以pack根據(jù)您的描述將它們沿邊緣對齊。
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)
將其他小部件放入這些容器中
盡管您在頂部創(chuàng)建了一個框架，但您還是將標(biāo)簽和日期放在了根窗口中。您應(yīng)該將它們放置在框架內(nèi)。當(dāng)您開始添加按鈕時，它們應(yīng)該位于左側(cè)框架中。最后，對于其他四個窗口，它們需要進(jìn)入第三幀。
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實(shí)際位于網(wǎng)格中的四個框架
使用 時grid，經(jīng)驗(yàn)法則是您應(yīng)該至少為一行和一列賦予權(quán)重，以便知道grid隨著窗口增大或縮小如何處理額外空間。在您的情況下，您希望所有四個單元格相等，因此您應(yīng)該給它們所有相同的權(quán)重。
因?yàn)槟F(xiàn)在僅對這四個窗口使用網(wǎng)格，而不是嘗試將所有內(nèi)容強(qiáng)制放入單個網(wǎng)格中，所以您可以使用有意義的行號和列號（即：行 0 和 1、列 0 和 1，而不是人為地設(shè)置大行）以及列和跨度）。
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")
這就是您的完整代碼的樣子。我沒有調(diào)整標(biāo)題區(qū)域中文本的位置，但是很容易更改它，而不會影響 GUI 的其他區(qū)域。
另請注意，您可以手動調(diào)整窗口大小，所有內(nèi)容都會適當(dāng)增大或縮小，而不是留下空白點(diǎn)。
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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個贊
日期字段位于單列中，因此它將下一列推到右側(cè)。
更新您的日期塊并添加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
提交
取消