跳到主要内容

下拉菜单

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 类的实例。

autofocus

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

bgcolor

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

要设置下拉菜单按钮的不同背景颜色,请使用 fill_colorfocused_bgcolor 属性。

border

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

border_color

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

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_colorfocused_bgcolorbgcolor

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 类型值。

icon_content

下拉菜单按钮的图标控件。默认为 Icon(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 指定的文本,或者添加一个自定义控件在输入字段前面。控件的基线将与输入字段的基线对齐。

只能指定一个 prefixprefix_text

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

prefix_icon

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

prefix_style

用于 prefix_textTextStyle

prefix_text

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

suffix

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

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

只能指定 suffixsuffix_text 中的一个。

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

suffix_icon

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

suffix_style

用于 suffix_textTextStyle

suffix_text

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

text_size

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

text_style

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

value

所选选项的 key 值。

focus()

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

on_blur

控件失去焦点时触发。

on_change

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

on_click

点击此下拉列表时触发。

on_focus

控件获得焦点时触发。

Option 属性

alignment

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

默认值为 alignment.center_left

content

一个用于在此选项中显示的Control。如果未指定,将使用text作为备用,否则text将被忽略。

key

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

text

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

text_style

定义 text 的样式。

值的类型为 TextStyle

Option 事件

on_click

点击此选项时触发。