Python3 Tkinter中Canvas为何显示在Widget下方？

Ah, I’ve run into this exact grid layout gotcha with Tkinter custom components before—let’s break down what’s going on and fix it. The core issue almost always boils down to incorrect parent component assignment or missing context in how grid is applied to your custom widgets.

Common Root Causes #

1. Your Die/Button widgets aren’t actually children of your custom Frame: If you forgot to pass self (the Frame instance) as the master when creating the Die or Button, they’ll default to the root window. This means their grid positions are relative to the root, not your Frame—so row numbers won’t behave as expected.
2. Accidental in_ parameter omission: While less likely if you set the master correctly, if you explicitly use grid() with an in_ parameter pointing to the wrong parent, it’ll break the layout hierarchy.

Step-by-Step Fixed Implementation #

Let’s rewrite your components with proper parent-child relationships and correct grid usage. First, the base Die and FreezableDie classes:

import tkinter as tk
import random

class Die(tk.Canvas):
    def __init__(self, master=None, size=100, **kwargs):
        # Critical: Pass the master to the Canvas superclass
        super().__init__(master, width=size, height=size, bg="white", **kwargs)
        self.size = size
        self.value = 1
        self.draw()

    def draw(self):
        # Simplified die drawing (replace with your full dot logic)
        self.delete("all")
        self.create_text(
            self.size//2, self.size//2, 
            text=str(self.value), font=("Arial", 32, "bold")
        )

    def roll(self):
        if not getattr(self, "frozen", False):
            self.value = random.randint(1,6)
            self.draw()

class FreezableDie(Die):
    def __init__(self, master=None, **kwargs):
        super().__init__(master, **kwargs)
        self.frozen = False

    def toggle_freeze(self):
        self.frozen = not self.frozen
        # Visual feedback for freeze state
        self.config(bg="#e0e0e0" if self.frozen else "white")

Now the custom Frame component—note that all child widgets use self as their master:

class DieWithFreezeControl(tk.Frame):
    def __init__(self, master=None, **kwargs):
        super().__init__(master, bg="lightblue", **kwargs)
        
        # 1. Create FreezableDie as a child of this Frame
        self.die = FreezableDie(self, size=120)
        # Grid it to row 0, column 0 of the Frame
        self.die.grid(row=0, column=0, padx=10, pady=(10,5))

        # 2. Create toggle button as a child of this Frame
        self.freeze_btn = tk.Button(
            self, text="Toggle Freeze", 
            command=self.die.toggle_freeze, padx=10
        )
        # Grid it to row 1, column 0 of the Frame
        self.freeze_btn.grid(row=1, column=0, padx=10, pady=(5,10))

Finally, the main application to test it:

if __name__ == "__main__":
    root = tk.Tk()
    root.title("Freezable Die Demo")

    # Add our custom Frame to the root window
    die_container = DieWithFreezeControl(root)
    die_container.pack(padx=20, pady=20)

    # Add a global roll button
    roll_btn = tk.Button(root, text="Roll Die", command=die_container.die.roll)
    roll_btn.pack(pady=5)

    root.mainloop()

Debugging Tips to Verify Layout #

If you’re still having issues, try these quick checks:

• Color-code components: Set unique background colors for your Frame, Die, and Button (like the example does) to visually confirm which parent each widget belongs to.
• Print widget masters: Add print(f"Die master: {self.die.master}") and print(f"Button master: {self.freeze_btn.master}") in your Frame’s __init__—both should reference your DieWithFreezeControl instance, not the root window.

内容的提问来源于stack exchange，提问作者Mr. Hax