如何在Tkinter应用右上角放置日期标签使其与蓝色横幅重叠且位置固定

解决方案 #

你可以通过调整组件创建顺序+place相对定位实现需求，place布局支持组件重叠，同时使用相对比例参数可以保证窗口缩放时位置固定，具体修改如下：

1. 调整HomePage组件创建顺序，后创建日期标签保证其层级高于蓝色横幅，会覆盖显示在横幅上层
2. 替换日期标签的pack布局为place相对定位，设置和横幅一致的背景色消除间隙
3. 修复原有日期获取逻辑，从日历组件中读取用户选中的日期而非固定使用当前日期

关键代码修改

1. 修改StartPage中的日历定义，改为实例属性方便外部读取选中值

# 把原来的局部变量cal改成实例属性self.cal
self.cal = Calendar(self, background="#e0f6fc", disabledbackground="white", bordercolor="light blue", headersbackground="light blue", normalbackground="#e0f6fc", foreground="black", normalforeground='black', headersforeground='white', selectmode="day", year=2021, month=8, day=9)
self.cal.place(relx=0.5, rely=0.5, anchor='center')

2. 修改set_date方法，获取用户选中的日期

def set_date(self, cont):
    frame: StartPage = self.frames[cont]
    # 转换日历返回的日期格式为你需要的显示格式
    selected_date = datetime.strptime(frame.cal.get_date(), "%m/%d/%y").strftime("%B %d, %Y")
    frame2: HomePage = self.frames[HomePage]
    frame2.date_label.config(text=selected_date)

3. 重写HomePage的布局逻辑

class HomePage(tk.Frame):
    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        # 先创建蓝色横幅
        tk.Label(self, text ="Name's Planner", fg="white", bg="#c0e3ed", font = LARGE_FONT).pack(fill="x", ipady=30)
        # 后创建日期标签，层级更高会覆盖在横幅上，背景色和横幅一致消除间隙
        self.date_label = tk.Label(self, text="", bg="#c0e3ed", fg="white", font=("Verdana", 12))
        # relx/rely用0-1的相对比例定位，窗口缩放时会保持在右上角固定位置
        self.date_label.place(relx=0.98, rely=0.02, anchor='ne')

        # 下方原有代码保持不变，注意替换图片路径为你本地的实际路径
        tk.Label(self, text="", fg="white", bg="#99cbd8").pack(side="left", fill="y", ipadx=73)
    
        button1 = tk.Button(self, height=2, width=10, bg="#e0f6fc", text="Home", command=lambda: controller.show_frame(HomePage))
        button1.place(x=35, y=145)
        
        button1 = tk.Button(self, height=2, width=10, bg="#e0f6fc", text="To Do", command=lambda: controller.show_frame(ToDoPage))
        button1.place(x=35, y=225)

        button1 = tk.Button(self, height=2, width=10, bg="#e0f6fc", text="Timetable", command=lambda: controller.show_frame(TimetablePage))
        button1.place(x=35, y=305)

        # 替换为你的图片实际路径
        photo2 = tk.PhotoImage(file="你的本地图片路径.png")
        panel = tk.Label(self, image = photo2)
        panel.image = photo2
        panel.place(x=35, y=400)

        self.configure(bg='#f7f6f6')

修改完成后日期标签会直接显示在蓝色横幅的右上角，不会出现灰色间隔，窗口缩放时也会始终固定在右上角位置。

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