如何在帶有網格的Python3 / tkinter中創建具有3幀和動態布局的簡單窗口？

Question

我正在Python3中探索tkinter，並且剛剛開始了我的第一個GUI項目。 我正在嘗試使用網格定位系統和3個框架來創建一個簡單的布局，如下所示：

• 頂部框架：工具欄，一些按鈕，也許是搜索字段（應始終可見，並粘貼在窗口頂部，並從左到右延伸）。
• 主框架：樹狀視圖，用於從數據庫中檢索值（應堅持到頂部，在頂部框架的正下方，從左向右擴展，並且還應該擴展以占據頂部和底部框架剩下的所有空間）。
• 底框：數據輸入表單，狀態欄...（應粘貼到窗口底部，從左向右擴展，並留出空間留給主框架。

我一直在搞亂框架和重量，這似乎總是有問題。 如果我將窗口的大小調整得足夠小，則主框架會部分隱藏頂部框架。 如果放大窗口，則主框架和樹形視圖不會完全按照預期的方式向下擴展。 誰能幫忙嗎？

這是我現在擁有的代碼：

#!/usr/local/bin/python3
# encoding: utf-8
"""
docstring
"""

import sys
import os
import os.path
import csv
import re
from platform import node


from tkinter import *
from tkinter import ttk


__app_name__ = "APP NAME"
__version__ = "0.0.1"


def add_remessa():
    pprint("REMESSA")


def click_btn_hoje():
    print("HOJE")


root = Tk()
root.title(__app_name__+" "+__version__)
root.rowconfigure(0, weight=1)
root.columnconfigure(0, weight=1)

topframe = ttk.Frame(root, padding="3 3 12 12")
topframe.grid(column=0, row=0, sticky=(N, E, W))
topframe.columnconfigure(0, weight=1)
topframe.columnconfigure(1, weight=1)
topframe.rowconfigure(0, weight=1)
topframe.rowconfigure(0, weight=1)

mainframe = ttk.Frame(root, padding="3 3 12 12")
mainframe.grid(column=0, row=1, sticky=(N, W, E))
mainframe.columnconfigure(0, weight=1)
mainframe.rowconfigure(0, weight=1)

bottomframe = ttk.Frame(root, padding="3 3 12 12")
bottomframe.grid(column=0, row=2, sticky=(W, E, S))
bottomframe.columnconfigure(0, weight=1)
bottomframe.columnconfigure(1, weight=1)
bottomframe.rowconfigure(0, weight=1)
bottomframe.rowconfigure(0, weight=1)


def NovaRemessa():
    print("Nova remessa!")
def EditarRemessa():
    print("Editar")
def About():
    print("This is a simple example of a menu")
def painelAddRemessa():
        print("Mostrar painel de introdução de nova remessa")


btn_quit = ttk.Button(topframe, text="+", command=painelAddRemessa)
btn_quit.grid(row=0, column=6, sticky=E+N)

btn_quit = ttk.Button(topframe, text="  Sair  ", command=exit)
btn_quit.grid(row=0, column=1, sticky=E+N)

# Data entry form
obj_num = StringVar()
destin = StringVar()
cobr = StringVar()
dias = StringVar()
vols = StringVar()

ttk.Label(bottomframe, text="Nº Objeto").grid(row=5, column=0, sticky=W+S)
text_input_obj = ttk.Entry(bottomframe,textvariable=obj_num, width=13)
text_input_obj.grid(row=6, column=0, sticky=W+S)
text_input_obj.focus_set()

ttk.Label(bottomframe, text="Destinatário").grid(row=5, column=1, columnspan=1, sticky=W+S)
text_input_dest = ttk.Entry(bottomframe, textvariable=destin, width=25)
text_input_dest.grid(row=6, column=1, sticky=W+S)

ttk.Label(bottomframe, text="Cobrança").grid(row=5, column=2, sticky=W+E+S)
text_input_cobr = ttk.Entry(bottomframe, textvariable=cobr, width=7)
text_input_cobr.grid(row=6, column=2, sticky=W+E+S)

ttk.Label(bottomframe, text="Dias").grid(row=5, column=3, sticky=W+E+S)
text_input_dias = ttk.Entry(bottomframe, textvariable=dias, width=4)
text_input_dias.grid(row=6, column=3, sticky=W+E+S)

ttk.Label(bottomframe, text="Volumes").grid(row=5, column=4, sticky=W+E+S)
text_input_vols = ttk.Entry(bottomframe, textvariable=vols, width=5)
text_input_vols.grid(row=6, column=4, sticky=W+E+S)

# Botões
btn_add = ttk.Button(bottomframe, text="  Adicionar  ", command=add_remessa).grid(row=6, column=6,sticky=W+E+S)


ttk.Label(mainframe, text="Nº de remessas: XXXX").grid(row=2, column=0, columnspan=2, sticky=W)
ttk.Label(mainframe, text="Valor a cobrar: XXXXXX").grid(row=2, columnspan=2, column=2)
ttk.Label(mainframe, text="Recebido: XXXXX").grid(row=2, column=4)
ttk.Label(mainframe, text="Depositar: XXXXXXX").grid(row=2, column=6, sticky=E)

tree = ttk.Treeview(mainframe, selectmode='extended')
tree['columns'] = ('ID', 'Dias', 'Destinatário', 'Estado', 'Objeto nº', 'Cobr.', 'Chq.rec.', 'Depositar')
tree.grid(row=0, column=0, columnspan=7, sticky=N+W+E+S)
tree.column('#0', anchor=W, minwidth=0, stretch=0, width=0)
tree.column('ID', anchor=W, minwidth=30, stretch=1, width=30)
tree.column('Dias', minwidth=30, stretch=1, width=30)
tree.column('Destinatário', minwidth=100, stretch=1, width=200)
tree.column('Estado', minwidth=100, stretch=1, width=180)
tree.column('Objeto nº', minwidth=50, stretch=1, width=80)
tree.column('Cobr.', minwidth=60, stretch=1, width=60)
tree.column('Chq.rec.', minwidth=80, stretch=1, width=80)
tree.column('Depositar', anchor=E, minwidth=80, stretch=1, width=80)
tree.heading('ID', text="ID")
tree.heading('Dias', text="Dias")
tree.heading('Destinatário', text="Destinatário")
tree.heading('Estado', text="Estado")
tree.heading('Objeto nº', text="Objeto nº")
tree.heading('Cobr.', text="Cobr.")
tree.heading('Chq.rec.', text="Chq.rec.")
tree.heading('Depositar', text="Depositar")

for child in mainframe.winfo_children(): child.grid_configure(padx=1, pady=1)

mainloop()

Answer 1

您忽略了做幾件事。 首先，將所有權重賦予根窗口的第0行。 由於您希望主要區域占用所有多余的空間，因此需要為第1行賦予權重。

其次，您不會對主框架內的行和列施加任何權重。 由於要讓樹（我假設）填充空間，因此必須給樹的行和列賦予權重。

---

忠告：不要試圖立即解決所有布局問題。 重新開始程序，並在根目錄中僅創建三個框架：頂部，中間和底部。 暫時為它們中的每一個賦予獨特的顏色，以便您可以區分它們。 然后，將它們與包裝或網格一起布置，並確保在調整窗口大小時可以適當地增大和縮小這些區域。

只有在這三個區域的行為均正確之后，才應嘗試將窗口小部件僅添加到這些框架之一。 確保在調整窗口大小時一切都可以正常工作。 然后添加下一個框架，再次確認所有框架都可以正常工作，然后再繼續下一個問題。

您還應該考慮將pack用於部分GUI。 當您將東西從上到下或從一側到另一側堆疊時， pack是一個更好的選擇。 如果要編寫此代碼，則將pack用於三個主要框架，並將grid用於每個框架內的小部件。