跳到主要内容

搜索栏

一个 Material Design 风格的搜索栏。它在视觉上类似于 TextField，不同之处在于点击它会打开一个搜索视图。

示例​

在线示例

基本示例​

import flet as ft

def main(page):

    def close_anchor(e):
        text = f"颜色 {e.control.data}"
        print(f"从{text}关闭视图")
        anchor.close_view(text)

    def handle_change(e):
        print(f"handle_change e.data: {e.data}")

    def handle_submit(e):
        print(f"handle_submit e.data: {e.data}")

    def handle_tap(e):
        print(f"handle_tap")

    anchor = ft.SearchBar(
        view_elevation=4,
        divider_color=ft.colors.AMBER,
        bar_hint_text="搜索颜色...",
        view_hint_text="从建议中选择一个颜色...",
        on_change=handle_change,
        on_submit=handle_submit,
        on_tap=handle_tap,
        controls=[
            ft.ListTile(title=ft.Text(f"颜色 {i}"), on_click=close_anchor, data=i)
            for i in range(10)
        ],
    )

    page.add(
        ft.Row(
            alignment=ft.MainAxisAlignment.CENTER,
            controls=[
                ft.OutlinedButton(
                    "打开搜索视图",
                    on_click=lambda _: anchor.open_view(),
                ),
            ],
        ),
        anchor,
    )


ft.app(target=main)

属性​

autofocus​

如果没有其他控件被聚焦，文本框是否应该自动聚焦。

默认为 False。

bar_bgcolor​

定义搜索栏在所有或特定 MaterialState 状态下的背景颜色。

bar_hint_text​

当搜索栏为空且搜索视图关闭时显示的文本。通常是一些提示用户输入的文本。

bar_leading​

当搜索视图关闭时，在文本输入字段之前显示的 Control。通常是一个 Icon 或一个 IconButton。

bar_overlay_color​

定义搜索栏处于 FOCUSED、HOVERED 或 PRESSED MaterialState 状态时通常使用的突出显示颜色。

bar_trailing​

当搜索视图关闭时，在文本输入字段之后显示的 Control。这些控件可以表示额外的搜索模式（例如语音搜索）、一个头像或一个溢出菜单，通常不超过两个。

capitalization​

启用输入文本的自动即时大写。属性值为 TextCapitalization 枚举。

默认为 NONE。

controls​

在搜索视图中搜索栏下方显示的控件列表。这些控件通常是 ListTile，并将显示在 ListView 中。

divider_color​

搜索视图中分隔线的颜色。

full_screen​

定义搜索视图在搜索栏被点击时是否会填充整个屏幕。默认为 False。

header_hint_style​

定义 view_hint_text 的 TextStyle。

header_text_style​

定义搜索视图中正在编辑的文本的 TextStyle。

keyboard_type​

键盘的操作按钮类型。

属性值为 KeyboardType 枚举。

默认为 TEXT。

value​

搜索栏中的文本。

view_bgcolor​

定义搜索视图的背景颜色。

view_elevation​

定义搜索视图的高度。

view_hint_text​

当搜索栏的输入字段为空时显示的文本。

view_leading​

当搜索视图打开时，在文本输入字段之前显示的 Control。通常是一个 Icon 或一个 IconButton。

默认为一个关闭按钮，用于关闭/弹出搜索视图。

view_shape​

定义搜索视图的形状。值为 BoxShape 枚举。

默认值为 RECTANGLE。

view_side​

定义搜索视图轮廓的颜色和线条粗细。值为 BorderSide 枚举。

view_surface_tint_color​

定义搜索视图表面色调的颜色。

view_trailing​

在搜索视图打开时，在文本输入字段之后显示的 Control 列表。默认为一个关闭按钮，用于关闭/弹出搜索视图。

事件​

on_change​

当搜索栏中输入的内容发生变化时触发。

on_submit​

当用户在搜索栏聚焦时按下 ENTER 键时触发。

on_tap​

当点击搜索栏时触发。

方法​

close_view(text)​

关闭搜索视图。text 参数（默认为空字符串）是搜索视图关闭后在搜索栏中显示的文本。

open_view()​

打开搜索视图。