如何将已选择选项的ft.Dropdown重置为初始状态？

要将Flet的ft.Dropdown重置为初始未选择状态（标签居中显示、无选中项），只需执行两步：

1. 将Dropdown的value设置为None（dropdown.value = None）
2. 调用page.update()触发UI刷新（page.update()）

原因说明 #

Flet的Dropdown初始状态下value为None，当选中选项后，value会被设置为对应选项的text（若未指定data属性）。之前尝试设置空字符串或空DropdownOption都无效，因为这不符合组件对初始状态的定义。必须显式调用page.update()才能让界面同步更新状态。

修改后的完整代码 #

import flet as ft

def main(page: ft.Page):
    page.title = 'Dropdown'
    page.window.width = 500
    page.window.height = 400
    page.padding = 40
    page.spacing = 30

    def reset(e):
        print('Reset')
        # 重置Dropdown到初始状态
        dropdown.value = None
        # 必须调用update刷新界面
        page.update()
    
    dropdown = ft.Dropdown(
        label = 'Examples',
        expand = True,
        options = [
            ft.DropdownOption(text='Option 1'),
            ft.DropdownOption(text='Option 2'),
            ft.DropdownOption(text='Option 3'),
        ]
    )
    page.add(dropdown)

    page.add(
        ft.Row([
            ft.FilledButton(
                text='Reset', 
                on_click=reset,
                expand = True,
            )]
        )
    )
    

ft.app(main)

状态说明 #

• 初始状态：Dropdown的标签文本在组件中间以大字体显示，无选中选项
• 选中后：标签文本移至顶部变为小字体，组件内显示选中的选项文本

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