跳到主要内容

下拉菜单

Material Design 按钮，用于从项目列表中选择。

下拉菜单允许用户从多个项目中选择。它显示当前选定的项目以及打开菜单以选择其他项目的箭头。

示例​

Live 示例

基本下拉菜单​

import flet as ft

def main(page: ft.Page):
    def button_clicked(e):
        t.value = f"Dropdown 值是： {dd.value}"
        page.update()

    t = ft.Text()
    b = ft.ElevatedButton(text="提交", on_click=button_clicked)
    dd = ft.Dropdown(
        width=100,
        options=[
            ft.dropdown.Option("红色"),
            ft.dropdown.Option("绿色"),
            ft.dropdown.Option("蓝色"),
        ],
    )
    page.add(dd, b, t)

ft.app(target=main)

带标签和提示的下拉菜单​

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Dropdown(
            label="颜色",
            hint_text="选择您喜欢的颜色？",
            options=[
                ft.dropdown.Option("红色"),
                ft.dropdown.Option("绿色"),
                ft.dropdown.Option("蓝色"),
            ],
            autofocus=True,
        )
    )

ft.app(target=main)

带 on_change 事件的下拉菜单​

import flet as ft

def main(page: ft.Page):
    def dropdown_changed(e):
        t.value = f"Dropdown 更改为 {dd.value}"
        page.update()

    t = ft.Text()
    dd = ft.Dropdown(
        on_change=dropdown_changed,
        options=[
            ft.dropdown.Option("红色"),
            ft.dropdown.Option("绿色"),
            ft.dropdown.Option("蓝色"),
        ],
        width=200,
    )
    page.add(dd, t)

ft.app(target=main)

在下拉菜单选项中更改项目​

import flet as ft

def main(page: ft.Page):
    def find_option(option_name):
        for option in d.options:
            if option_name == option.key:
                return option
        return None

    def add_clicked(e):
        d.options.append(ft.dropdown.Option(option_textbox.value))
        d.value = option_textbox.value
        option_textbox.value = ""
        page.update()

    def delete_clicked(e):
        option = find_option(d.value)
        if option!= None:
            d.options.remove(option)
            # d.value = None
            page.update()

    d = ft.Dropdown()
    option_textbox = ft.TextField(hint_text="输入项目名称")
    add = ft.ElevatedButton("添加", on_click=add_clicked)
    delete = ft.OutlinedButton("删除所选项目", on_click=delete_clicked)
    page.add(d, ft.Row(controls=[option_textbox, add, delete]))

ft.app(target=main)

alignment​

定义了提示或所选项目在下拉菜单中的位置。

对齐方式是 alignment.Alignment 类的实例。

autofocus​

如果控件将被选择为初始焦点，则为 True。如果页面上有多个控件具有 autofocus 设置，则第一个添加到页面的控件将获得焦点。

bgcolor​

下拉菜单按钮和菜单的背景颜色。

要设置下拉菜单按钮的不同背景颜色，请使用 fill_color 或 focused_bgcolor 属性。

border​

输入字段周围的边框。值是 InputBorder 枚举。默认是 OUTLINE。

border_color​

边框颜色。可以是 transparent 以隐藏边框。

border_radius​

边框半径是 border_radius.BorderRadius 类的实例。

border_width​

边框的宽度，以虚拟像素为单位。默认为 1。设置为 0 以完全删除边框。

color​

文本颜色。

content_padding​

输入装饰容器的填充。

counter_style​

用于 counter_text 的文本样式。

counter_text​

可选的文本，以显示在行下方作为字符计数。

如果为空字符串或 null，并且 counter 未指定，则不会出现任何内容。

dense​

是否TextField是密集表单的一部分（即，使用较少的垂直空间）。

elevation​

下拉菜单的 elevation。默认为 8。

enable_feedback​

是否检测到的手势应该提供音频和/或触觉反馈。例如，在 Android 上，设置为 True 将产生点击声音，并且长按将产生短暂的振动。

默认为 True。

error_style​

用于 error_text 的文本样式。

error_text​

出现在输入边框下的文本。

如果非 null，则边框的颜色将动画变为红色，并且 helper_text 不会显示。

filled​

如果为 True，则装饰容器将被填充为主题 fill_color。

如果 filled=None（默认），则隐式设置为 True，只要至少一个以下属性不为 null：fill_color、focused_bgcolor 和 bgcolor。

fill_color​

下拉菜单按钮的背景颜色。不会在 filled=False 时显示。

focused_bgcolor​

下拉菜单在焦点状态下的背景颜色。不会在 filled=False 时显示。

focused_border_color​

焦点状态下的边框颜色。

focused_border_width​

焦点状态下的边框宽度。

focused_color​

下拉菜单在焦点状态下的文本颜色。

helper_style​

用于 helper_text 的文本样式。

helper_text​

提供关于输入值上下文的文本，例如该值将如何使用。

如果非 null，则文本将显示在输入装饰器下方，在同一位置显示 error_text。如果非 null的 error_text 值被指定，则 helper 文本不会显示。

hint_content​

下拉菜单值的占位符控件，显示在值为空时。

hint_style​

用于 hint_text 的文本样式。

hint_text​

建议输入字段接受的输入类型的文本。

在输入字段为空且未聚焦时显示在输入字段上方，或者在输入字段聚焦时显示在输入字段上方。

icon​

显示在输入字段前面的图标的名称。

值是 padding.Padding 类的实例或一个数字。

icon_content​

下拉菜单按钮的图标控件。默认为 Icon(ft.icons.ARROW_DROP_DOWN)。

icon_enabled_color​

如果按钮启用，则任何 Icon 后代的颜色。

icon_disabled_color​

如果按钮禁用，则任何 Icon 后代的颜色。

icon_size​

图标按钮的大小，以虚拟像素为单位。默认为 24.0。

item_height​

下拉菜单中项目的高度。

label​

输入字段的可选标签。

当输入字段为空且未聚焦时，标签将显示在输入字段上方。 当输入字段聚焦或非空时，标签将移动到输入字段上方，垂直相邻或居中。

label_style​

用于 label 的文本样式。

max_menu_height​

下拉菜单的最大高度。

options​

一个 Option 控件列表，表示下拉菜单中的项目。

padding​

下拉菜单可见部分周围的填充。

prefix​

输入字段前的可选控件。

这可以用于添加一些填充到文本中，例如使用 prefix_text 指定的文本，或者添加一个自定义控件在输入字段前面。控件的基线将与输入字段的基线对齐。

只能指定一个 prefix 或 prefix_text。

prefix 将出现在 prefix_icon 之后，如果同时指定了这两个属性。

prefix_icon​

在 prefix 或 prefix_text 之前、在装饰容器内文本字段的可编辑部分之前显示的图标。

prefix_style​

用于 prefix_text 的 TextStyle。

prefix_text​

可选的文本 prefix，用于在输入内容之前显示。

suffix​

可选的 Control，用于在输入内容之后显示。

例如，可以使用此选项在输入后添加一些文本，否则会使用 suffix_text 指定，或在输入后添加自定义控件。控件的基线与输入的基线对齐。

只能指定 suffix 和 suffix_text 中的一个。

如果同时指定了 suffix 和 suffix_icon，则 suffix 出现在 suffix_icon 之前。

suffix_icon​

在装饰容器内的文本字段可编辑部分之后、在 suffix 或 suffix_text 之后显示的图标。

suffix_style​

用于 suffix_text 的 TextStyle。

suffix_text​

可选的文本 suffix，用于在输入内容之后显示。

text_size​

文本大小，以虚拟像素为单位。

text_style​

在此下拉按钮和点击按钮时出现的下拉菜单中使用的 TextStyle。

value​

所选选项的 key 值。

focus()​

将焦点移动到此下拉列表。

on_blur​

控件失去焦点时触发。

on_change​

当此下拉列表的所选项目更改时触发。

on_click​

点击此下拉列表时触发。

on_focus​

控件获得焦点时触发。

Option 属性​

alignment​

定义此选项在其容器中的对齐方式。对齐方式是 alignment.Alignment 类的实例。

默认值为 alignment.center_left。

key​

选项的键。如果未指定 key，则将使用 text 值。

text​

选项的显示文本。如果未指定 text，则将使用 key 值。

Option 事件​

on_click​

点击此选项时触发。