跳到主要内容

下拉菜单 - Dropdown

用于从列表中选择项的材料设计按钮。

下拉菜单允许用户从一系列项中进行选择。下拉菜单显示当前选择的项以及一个箭头，打开一个菜单以选择另一个项。

示例​

实时示例

基本下拉菜单​

import flet as ft

def main(page: ft.Page):
    def button_clicked(e):
        t.value = f"下拉菜单的值:  {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"下拉菜单已更改为 {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​

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

有关可能的值，请参见 Container.alignment 属性。

autofocus​

如果将控件设为初始焦点，则为 True。如果页面上有多个带有 autofocus 设置的控件，则会将焦点设置为页面中添加的第一个控件。

bgcolor​

下拉菜单的背景颜色。

border​

围绕输入的边框 - InputBorder 枚举类型，可选值为：OUTLINE（默认值）、UNDERLINE、NONE。

border_color​

边框的颜色。可以使用 transparent 来隐藏边框。

border_radius​

有关边框半径的更多信息，请参见 [Container.border_radius] 属性文档。

border_width​

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

color​

文本的颜色。

content_padding​

输入装饰容器的内边距。

counter_style​

用于 counter_text 的样式。

counter_text​

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

如果为 null 或空字符串，并且没有指定 counter，则不会显示在计数器位置。

dense​

True 如果 TextField 是紧凑型表单的一部分（即使用更少的垂直空间）。

error_style​

用于 error_text 的样式。

error_text​

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

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

filled​

如果为 True，则输入装饰容器将填充主题的 fillColor。

focused_bgcolor​

获取焦点时下拉菜单的背景颜色。

focused_border_color​

获取焦点时的边框颜色。

focused_border_width​

获取焦点时的边框宽度。

focused_color​

下拉菜单获取焦点时的文本颜色。

helper_style​

用于 helper_text 的样式。

helper_text​

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

如果非 null，则该文本显示在输入装饰项的下方，与 error_text 的位置相同。如果指定了非 null 的 error_text 值，则不会显示帮助文本。

hint_style​

用于 hint_text 的样式。

hint_text​

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

当输入字段为空且未聚焦时，标签显示在输入字段的顶部（即在可以在输入字段中输入文本的位置）。当输入字段接收焦点（或字段非空）时，标签移到上方，垂直或相邻于输入字段的中心。

icon​

要在输入字段之前和装饰容器之外显示的图标的名称。

有关内边距和可能值的更多信息，请参见 Container.padding。

label​

用于描述输入字段的可选文本。

当输入字段为空且未聚焦时，标签显示在输入字段的顶部（即在屏幕上可以输入文本的位置）。当输入字段接收焦点（或字段非空）时，标签移到上方，垂直相邻于输入字段或位于输入字段的中心位置。

label_style​

用于 label 的样式。

options​

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

prefix​

可选的Control，放置在输入框之前的位置。

例如，可以使用它来为原本使用prefix_text指定的文本添加一些填充，或者在输入框前添加一个自定义控件。控件的基线与输入框的基线对齐。

只能指定prefix和prefix_text中的一个。

如果同时指定了prefix和prefix_icon，则prefix会出现在prefix_icon之后。

prefix_icon​

在prefix或prefix_text以及可编辑部分之前，在装饰容器内部显示的图标。

prefix_style​

用于prefix_text的样式。

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的样式。

suffix_text​

可选的文本suffix，放置在输入框之后的位置。

text_size​

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

text_style​

用于下拉按钮和点击按钮时出现的下拉菜单中的文本的文本样式。

value​

选中选项的key值。

focus()​

将焦点移动到下拉菜单。

on_blur​

当控件失去焦点时触发。

on_change​

当下拉菜单的选中项发生变化时触发。

on_focus​

当控件获得焦点时触发。

Option 属性​

key​

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

text​

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