建站教学视频,移动网站开发环境 主流,网站建设维护保密协议书,高校网站建设管理制度文章目录 1. 概念介绍2. 使用方法3. 代码与效果3.1 示例代码3.2 运行效果 4. 内容总结 我们在上一章回中介绍了Material3中的IconButton相关的内容#xff0c;本章回中将
介绍SearchBar组件.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我们在… 文章目录 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 MaterialStatePropertyAllColor(Colors.grey),//控制内容与搜索框的边距padding:const MaterialStatePropertyAllEdgeInsets(EdgeInsets.symmetric(horizontal: 16),),//修改形状shape: MaterialStatePropertyAllOutlinedBorder(RoundedRectangleBorder(borderRadius: BorderRadius.circular(80)),),onTap: (){debugPrint(onTap:);},onChanged: (value){debugPrint(onChanged: $value);},)],
),3.2 运行效果
我们在上面小节中的示例代码中一共实现了三个搜索框第一个是默认的搜索框第二个搜索框添加了图标第三个搜索框修改了形状和背景颜色。三个搜索框按列显示方便大家对比不同的颜色与形状。下面是程序的运行效果图请大家参考 4. 内容总结
最后我们对本章回的内容做一个全面的总结
搜索框是Material3中新引入的组件主要用来实现搜索功能搜索框提供了相关的属性来控制自己的外观形状和点击事件搜索框的用法类似之前介绍过和TextField组件
看官们与SearchBar组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
