文章目录
我们在上一章回中介绍了"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组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!