为什么帧在 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)

为什么帧在 tkinter 中相互重叠？

why do frames overlap each other in tkinter?

python

grid

tkinter