跳到主要内容

搜索栏 SearchBar

一个 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)

属性​

bar_bgcolor​

定义搜索栏的背景颜色。

bar_hint_text​

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

bar_leading​

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

bar_overlay_color​

定义高亮颜色，通常用于指示搜索栏被聚焦、悬停或按下。

要为特定的 MaterialState 配置此属性，将其值设置为一个字典，其中键是状态名称，值是相应的字面值。另一方面，要为 所有 的 MaterialState 配置此属性，将其值设置为相应的字面值（例如 bar_overlay_color=ft.colors.BLUE）。

bar_trailing​

在搜索视图关闭时在文本输入框之后显示的 Control。

这些控件可以代表额外的搜索模式（例如语音搜索）、一个头像或者一个溢出菜单，通常不超过两个。

capitalization​

启用实时大写。可以参考 TextField.capitalization 查看可能的值。

controls​

在搜索视图中显示的控件列表。这些控件通常是 ListTile，将以 ListView 的形式显示。

divider_color​

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

full_screen​

定义当点击搜索栏时，是否将搜索视图扩展至整个屏幕。默认值为 False。

header_hint_style​

定义 view_hint_text 的样式。

header_text_style​

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

value​

搜索栏中的文本。

view_bgcolor​

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

view_elevation​

定义搜索视图的海拔高度。

view_hint_text​

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

view_leading​

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

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

view_shape​

定义搜索视图的形状。可能的值请参见 Container.shape。

view_side​

定义搜索视图轮廓的颜色和粗细。

view_surface_tint_color​

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

view_trailing​

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

事件​

on_change​

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

on_submit​

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

on_tap​

当点击搜索栏时触发。

方法​

close_view(text)​

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

open_view()​

打开搜索视图。