Tkinter多页面异常：启动显示Page2、Page1显示Page2按钮

问题根源 #

1. 组件层级覆盖：创建两个页面时，Canvas都通过place(x=0, y=0)直接覆盖在主窗口同一位置，后创建的canvas_2默认处于上层，导致启动时显示Page2。
2. 布局管理器混用：使用pack()/pack_forget()管理已通过place()布局的Canvas，两种布局逻辑冲突，导致页面切换时组件层级混乱，无法正确隐藏/显示对应内容。

修复后的代码 #

from pathlib import Path
from tkinter import Tk, Canvas, Entry, Button, PhotoImage, Frame

OUTPUT_PATH = Path(__file__).parent
ASSETS_PATH1 = OUTPUT_PATH / Path(r"C:\Users\user\Documents\interface-py\exp99\build\assets\frame0")
def relative_to_assets1(path: str) -> Path:
    return ASSETS_PATH1 / Path(path)
ASSETS_PATH2 = OUTPUT_PATH / Path(r"C:\Users\user\Documents\interface-py\exp99\build\assets\frame1")
def relative_to_assets2(path: str) -> Path:
    return ASSETS_PATH2 / Path(path)

def create_page_1(parent_frame):
    global image_image_1
    global entry_image_1 
    global entry_image_2 
    global button_image_1
    canvas = Canvas(
        parent_frame,
        bg="#FFFFFF",
        height=625,
        width=1000,
        bd=0,
        highlightthickness=0,
        relief="ridge"
    )
    canvas.pack(fill="both", expand=True)
    image_image_1 = PhotoImage(
    file=relative_to_assets1("image_1.png"))
    image_1 = canvas.create_image(
        839.0,
        312.0,
        image=image_image_1
    )

    canvas.create_text(
        122.0,
        56.0,
        anchor="nw",
        text="Password Checker",
        fill="#000000",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault ExtraBold", 45 * -1)
    )

    canvas.create_text(
        117.0,
        157.0,
        anchor="nw",
        text="Username",
        fill="#000000",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault Bold", 18 * -1)
    )

    entry_image_1 = PhotoImage(
        file=relative_to_assets1("entry_1.png"))
    entry_bg_1 = canvas.create_image(
        329.0,
        242.0,
        image=entry_image_1
    )
    entry_1 = Entry(
        bd=0,
        bg="#FFFFFF",
        fg="#000716",
        highlightthickness=0,
        font=("RobotoFlex Regular", 18 * -1)  
    )
    entry_1.place(
        x=128.514874458313,
        y=213.0,
        width=400.970251083374,
        height=58.0
    )

    canvas.create_text(
        133.0,
        228.0,
        anchor="nw",
        text="Enter your  username",
        fill="#5F636D",
        font=("RobotoFlex Regular", 14 * -1)
    )

    def getInput():
        username=entry_1.get()
        password=entry_2.get()
        print("Username: ",username)
        print("Password: ",password)
        # 补充passwordCheck等函数实现后可取消注释
        # print("Simple check :",passwordCheck(password))
        # print("Davhtsal :",characterCheck(password))
        # print("Daraalal :",positionCheck(password))
        # print("percent :",percent)
        # a = (percent*100)/10
        # print("huvi :",a)
    percent = 0

    button_image_1 = PhotoImage(
        file=relative_to_assets1("button_1.png"))

    button_1 = Button(
        image=button_image_1,
        borderwidth=0,
        highlightthickness=0,
        command=getInput,
        relief="flat"
    )
    button_1.place(
        x=117.0,
        y=500.0,
        width=424.0,
        height=45.0
    )

    canvas.create_text(
        117.0,
        304.0,
        anchor="nw",
        text="Password\n",
        fill="#000000",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault Bold", 18 * -1)
    )

    entry_image_2 = PhotoImage(
        file=relative_to_assets1("entry_2.png"))
    entry_bg_2 = canvas.create_image(
        329.0,
        389.0,
        image=entry_image_2
    )
    entry_2 = Entry(
        bd=0,
        bg="#FFFFFF",
        fg="#000716",
        highlightthickness=0,
        font=("RobotoFlex Regular", 18 * -1)
    )
    entry_2.place(
        x=128.514874458313,
        y=360.0,
        width=400.970251083374,
        height=58.0,
    )

    canvas.create_text(
        133.0,
        375.0,
        anchor="nw",
        text="Enter your  password",
        fill="#5F636D",
        font=("RobotoFlex Regular", 14 * -1)
    )
    return canvas

def create_page_2(parent_frame):
    global image_image_2
    global button_image_2
    canvas = Canvas(
        parent_frame,
        bg="#FFFFFF",
        height=625,
        width=1000,
        bd=0,
        highlightthickness=0,
        relief="ridge"
    )
    canvas.pack(fill="both", expand=True)
    image_image_2 = PhotoImage(
    file=relative_to_assets2("image_1.png"))
    image_2 = canvas.create_image(
        839.0,
        312.0,
        image=image_image_2
    )
    
    canvas.create_text(
        122.0,
        56.0,
        anchor="nw",
        text="Password Checker",
        fill="#000000",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault ExtraBold", 45 * -1)
    )
    canvas.create_text(
        117.0,
        157.0,
        anchor="nw",
        text="Simple checking\n",
        fill="#000000",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault Black", 18 * -1)
    )
    
    button_image_2 = PhotoImage(file=relative_to_assets2("button_2.png"))
    button_2 = Button(
        image=button_image_2,
        borderwidth=0,
        highlightthickness=0,
        command=lambda: print("button_2 clicked"),
        relief="flat"
    )
    button_2.place(
        x=117.0,
        y=500.0,
        width=424.0,
        height=45.0
    )
    
    canvas.create_text(
        117.0,
        190.0,
        anchor="nw",
        text="Simple check",
        fill="#5F636D",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault SemiBold", 16 * -1)
    )
    
    canvas.create_text(
        117.0,
        222.0,
        anchor="nw",
        text="Dawhtsal\n",
        fill="#5F636D",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault SemiBold", 16 * -1)
    )
    
    canvas.create_text(
        117.0,
        253.0,
        anchor="nw",
        text="Daraalal",
        fill="#5F636D",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault SemiBold", 16 * -1)
    )
    
    canvas.create_text(
        117.0,
        285.0,
        anchor="nw",
        text="Percent\n",
        fill="#5F636D",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault SemiBold", 16 * -1)
    )
    
    canvas.create_text(
        117.0,
        329.0,
        anchor="nw",
        text="Advanced checking",
        fill="#000000",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault Black", 18 * -1)
    )
    
    canvas.create_text(
        117.0,
        362.0,
        anchor="nw",
        text="Brute force",
        fill="#5F636D",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault SemiBold", 16 * -1)
    )
    
    canvas.create_text(
        117.0,
        394.0,
        anchor="nw",
        text="Rockyou\n",
        fill="#5F636D",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault SemiBold", 16 * -1)
    )
    
    canvas.create_text(
        117.0,
        424.0,
        anchor="nw",
        text="Dictionary",
        fill="#5F636D",
        font=("RobotoFlexNormalNormalNormalNormalNormalNormalNormalNormalNormalDefault SemiBold", 16 * -1)
    )
    
    return canvas

def show_page(page_num):
    if page_num == 1:
        frame_1.pack(fill="both", expand=True)
        frame_2.pack_forget()
    elif page_num == 2:
        frame_2.pack(fill="both", expand=True)
        frame_1.pack_forget()

window = Tk()
window.geometry("1000x625")
window.configure(bg="#FFFFFF")

# 创建独立的页面容器Frame
frame_1 = Frame(window, bg="#FFFFFF")
frame_2 = Frame(window, bg="#FFFFFF")

# 初始化页面内容
create_page_1(frame_1)
create_page_2(frame_2)

# 单独存放切换按钮，避免被页面内容覆盖
button_frame = Frame(window, bg="#FFFFFF")
button_frame.pack(side="top", fill="x")

button_to_page_1 = Button(button_frame, text="Go to Page 1", command=lambda: show_page(1))
button_to_page_1.pack(side="left", padx=10, pady=5)

button_to_page_2 = Button(button_frame, text="Go to Page 2", command=lambda: show_page(2))
button_to_page_2.pack(side="left", padx=10, pady=5)

# 默认显示Page1
show_page(1)

window.resizable(False, False)
window.mainloop()

关键修改点 #

1. 用Frame隔离页面：每个页面的Canvas放在独立Frame中，通过管理Frame的显示/隐藏实现页面切换，彻底解决组件覆盖问题。
2. 统一布局逻辑：页面内部Canvas用pack()填充Frame，页面切换时同样用pack()/pack_forget()管理Frame，避免布局管理器冲突。
3. 独立按钮容器：将页面切换按钮放在单独的Frame中，固定在窗口顶部，不会被页面内容遮挡。

内容的提问来源于stack exchange，提问作者gogomaster