第一百七十一回 SearchBar组件

我们在上一章回中介绍了"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");},
    )
  ],
),

3.2 运行效果

我们在上面小节中的示例代码中一共实现了三个搜索框，第一个是默认的搜索框，第二个搜索框添加了图标，第三个搜索框修改了形状和背景颜色。三个搜索框按列显示，方便大家对比不同的颜色与形状。下面是程序的运行效果图，请大家参考：

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 搜索框是Material3中新引入的组件，主要用来实现搜索功能；
• 搜索框提供了相关的属性来控制自己的外观形状和点击事件；
• 搜索框的用法类似之前介绍过和TextField组件；

看官们，与"SearchBar组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!