為什么 tkinter 中的幀會相互重疊？

Question

我在某處發現了如何在tkinter的頁面之間導航。 拿了這段代碼，稍微改了一下，現在我的網格有問題。 當我切換到TablePage （我嘗試使用網格的地方）時，它顯示兩個標簽相互重疊。 我不太明白為什么會這樣。 當我在WPF (C#) 中編程並使用網格時，一切都很好。 但是在tkinter這個網格很奇怪。 我想要的只是在父框架中以 3:1 的比例再放置兩個框架。 好吧，問題本身 - 為什么TablePage class 中的這兩個框架相互重疊？

import tkinter as tk


class Page(tk.Frame):
    def __init__(self, *args, **kwargs):
        tk.Frame.__init__(self, *args, **kwargs)

    def show(self):
        self.lift()


class TablePage(Page):
    def __init__(self, *args, **kwargs):
        Page.__init__(self, *args, **kwargs)
        # label = tk.Label(self, text="Table page")
        # label.pack(side="top", fill="both", expand=True)
        table_frame = tk.Frame(self, bg="red")
        table_frame.grid(row=0, column=0, columnspan=3)
        buttons_frame = tk.Frame(self, bg="blue")
        buttons_frame.grid(row=0, column=1, columnspan=1)
        label = tk.Label(table_frame, text="Left side")
        label.pack(side="top", fill="both", expand=True)
        label2 = tk.Label(buttons_frame, text="Right side")
        label2.pack(side="top", fill="both", expand=True)


class MainPage(Page):
    def __init__(self, *args, **kwargs):
        Page.__init__(self, *args, **kwargs)
        label = tk.Label(self, text="Main page")
        label.pack(side="top", fill="both", expand=True)


class SettingsPage(Page):
    def __init__(self, *args, **kwargs):
        Page.__init__(self, *args, **kwargs)
        label = tk.Label(self, text="Settings page")
        label.pack(side="top", fill="both", expand=True)


class MainView(tk.Frame):
    def __init__(self, *args, **kwargs):
        tk.Frame.__init__(self, *args, **kwargs)
        p1 = MainPage(self)
        p2 = TablePage(self)
        p3 = SettingsPage(self)

        buttonframe = tk.Frame(self)
        container = tk.Frame(self)
        buttonframe.pack(side="top", fill="x", expand=False)
        container.pack(side="top", fill="both", expand=True)

        p1.place(in_=container, x=0, y=0, relwidth=1, relheight=1)
        p2.place(in_=container, x=0, y=0, relwidth=1, relheight=1)
        p3.place(in_=container, x=0, y=0, relwidth=1, relheight=1)

        b1 = tk.Button(buttonframe, text="Page 1", command=p1.lift)
        b2 = tk.Button(buttonframe, text="Page 2", command=p2.lift)
        b3 = tk.Button(buttonframe, text="Page 3", command=p3.lift)

        b1.pack(side="left")
        b2.pack(side="left")
        b3.pack(side="left")

        p1.show()


if __name__ == "__main__":
    root = tk.Tk()
    main = MainView(root)
    main.pack(side="top", fill="both", expand=True)
    root.wm_geometry("900x600")
    root.configure(bg='green')
    root.mainloop()

Answer 1

這是因為您已將columnspan=3用於table_frame ，因此table_frame將跨越 3 列，從 0 到 2。然后將buttons_frame放在第 1 列中，它將與table_frame重疊。

刪除columnspan=3或將buttons_frame放在第 3 列。

---

編輯：您需要使用.columnconfigure()設置weight選項以實現 3:1（圓形）布局：

class TablePage(Page):
    def __init__(self, *args, **kwargs):
        Page.__init__(self, *args, **kwargs)
        self.columnconfigure(0, weight=3)
        self.columnconfigure(1, weight=1)
        table_frame = tk.Frame(self, bg="red")
        table_frame.grid(row=0, column=0, sticky="ew")
        buttons_frame = tk.Frame(self, bg="blue")
        buttons_frame.grid(row=0, column=1, sticky="ew")
        label = tk.Label(table_frame, text="Left side", bg="red")
        label.pack(side="top", fill="both", expand=True)
        label2 = tk.Label(buttons_frame, text="Right side", bg="blue")
        label2.pack(side="top", fill="both", expand=True)