Flet Python窗口标题颜色不随主题变化，如何修改窗口标题？

一、修改窗口标题 #

直接通过page.title赋值即可修改窗口标题，若需动态修改，赋值后调用page.update()刷新即可：

import flet as ft

def main(page: ft.Page):
    page.title = "初始标题"
    
    # 动态修改标题的示例
    def change_title(e):
        page.title = "新标题"
        page.update()
    
    page.add(ft.ElevatedButton("点击修改标题", on_click=change_title))

ft.app(main)

二、让窗口标题颜色跟随主题变化 #

默认系统级窗口标题栏不受Flet应用主题控制，要实现标题栏颜色随主题切换，需启用自定义窗口标题栏，手动构建可样式化的标题栏组件：

实现步骤 #

1. 隐藏原生窗口标题栏及控制按钮
2. 给自定义标题栏添加拖拽窗口的功能
3. 使用Flet主题色定义标题栏的背景和文本颜色，实现随主题自动切换

完整代码示例 #

import flet as ft

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.window_height, page.window_width = 300, 300
    
    # 隐藏原生标题栏和控制按钮
    page.window_title_bar_hidden = True
    page.window_title_bar_buttons_hidden = True

    # 窗口控制按钮逻辑
    def minimize_window(e):
        page.window_minimized = True
        page.update()
    
    def close_window(e):
        page.window_close()
    
    # 构建自定义标题栏
    custom_title_bar = ft.Container(
        content=ft.Row(
            [
                ft.Text("自定义标题", color=ft.colors.ON_SURFACE),
                ft.Spacer(),
                ft.IconButton(ft.icons.MINIMIZE, on_click=minimize_window, icon_color=ft.colors.ON_SURFACE),
                ft.IconButton(ft.icons.CLOSE, on_click=close_window, icon_color=ft.colors.ON_SURFACE)
            ],
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
            vertical_alignment=ft.CrossAxisAlignment.CENTER,
        ),
        padding=ft.Padding(left=10, top=5, right=10, bottom=5),
        bgcolor=ft.colors.SURFACE,
        height=35,
        drag_window=True  # 允许拖拽窗口
    )

    page.add(custom_title_bar, ft.Text('Hello'))
    
    # 主题切换测试按钮
    def toggle_theme(e):
        page.theme_mode = ft.ThemeMode.LIGHT if page.theme_mode == ft.ThemeMode.DARK else ft.ThemeMode.DARK
        page.update()
    
    page.add(ft.ElevatedButton("切换主题", on_click=toggle_theme))

ft.app(main)

说明 #

• 自定义标题栏使用SURFACE（背景色）、ON_SURFACE（文本/图标颜色）等Flet主题色，会自动跟随theme_mode切换深浅色
• 通过drag_window=True实现原生标题栏的拖拽窗口功能
• 最小化、关闭等窗口控制按钮需手动实现逻辑，最大化功能可参考相同方式添加

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