当前位置：首页 > article >正文

SearchBar组件的功能与用法

article 2025/2/12 12:19:26

文章目录

1. 概念介绍
2. 使用方法
3. 代码与效果
- 3.1 示例代码
- 3.2 运行效果
4. 内容总结

我们在上一章回中介绍了"Material3中的IconButton"相关的内容，本章回中将介绍SearchBar组件.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中介绍的SearchBar是指搜索框，通常位于某个页面的最上方，通过它来搜索页面中的内容。该组件也是Material3中引入的新组件，本章回中将详细介绍
它的使用方法。

2. 使用方法

和其它的组件一样，SearchBar提供了相关的属性来控制自己，下面是该组件中常用的属性：

hintText属性: 用来控制搜索框中的提示内容；
leading属性: 用来控制搜索框最左侧显示的内容；
trailing属性: 用来控制搜索框最右侧显示的内容；
backgroundColor属性: 用来控制搜索框的背景颜色；
padding属性:用来控制搜索框中内容与边框的边距；
shape属性: 用来控制搜索框的形状，默认是圆角矩形；
onTap属性：它是方法类型，点击搜索框时会回调该方法；
onChanged属性：它是方法类型，搜索框中输入的内容变化会回调该方法；
除了上面介绍的这些属性外，搜索框还有其它的属性，我们就不一一介绍了，大家可以参考官方文档。搜索框的用法和我们之前介绍过的TextField组件的用法类似，其
实官方没有提供该组件前，我们就是拿TextField组件来实现搜索框。

3. 代码与效果

3.1 示例代码

介绍完搜索框的常用属性后，我们通过具体的示例代码来演示它的使用方法。我们在代码中关键位置添加了注释，方便大家理解代码。

Column(
  children: [
    const Padding(padding: EdgeInsets.only(bottom: 16),),
    const SearchBar(hintText:"Default SearchBar", ),
    const Padding(padding: EdgeInsets.only(bottom: 16),),
    const SearchBar(
      hintText:"add Icon SearchBar",
      leading: Icon(Icons.earbuds),
      trailing: [
        Icon(Icons.mic),
        Icon(Icons.search_rounded),
      ]
    ),
    const Padding(padding: EdgeInsets.only(bottom: 16),),
    SearchBar(
      hintText: "custom SearchBar",
      //修改背景颜色
      backgroundColor: const MaterialStatePropertyAll<Color>(Colors.grey),
      //控制内容与搜索框的边距
      padding:const MaterialStatePropertyAll<EdgeInsets>(
        EdgeInsets.symmetric(horizontal: 16),
      ),
      //修改形状
      shape: MaterialStatePropertyAll<OutlinedBorder>(
        RoundedRectangleBorder(borderRadius: BorderRadius.circular(80)),
      ),
      onTap: (){debugPrint("onTap:");},
      onChanged: (value){debugPrint("onChanged: $value");},
    )
  ],
),