基于TextField实现通用搜索组件

search_bar.dart


enum SearchBarType { home, normal, homeLight }/// 通用搜索组件
class SearchBar extends StatefulWidget {final bool enabled;// 是否隐藏左侧图标final bool hideLeft;// 搜索框类型final SearchBarType searchBarType;// 提示信息final String hint;// 默认输入内容final String defaultText;// 左侧图标点击final void Function() leftButtonClick;// 右侧图标点击final void Function() rightButtonClick;// 语音图标点击final void Function() speackClick;// 输入框点击final void Function() inputBoxClick;// 输入框文本变化final ValueChanged<String> onChanged;const SearchBar({Key key,this.enabled = true,this.hideLeft,this.searchBarType = SearchBarType.normal,this.hint,this.defaultText,this.leftButtonClick,this.rightButtonClick,this.speackClick,this.inputBoxClick,this.onChanged}): super(key: key);@override_SearchBarState createState() => _SearchBarState();
}class _SearchBarState extends State<SearchBar> {// 是否显示清除按钮bool showClear = false;// 输入框文本控制器final TextEditingController _controller = TextEditingController();@overridevoid initState() {super.initState();// 初始化输入框文本内容if (widget.defaultText != null) {setState(() {_controller.text = widget.defaultText;});}}@overrideWidget build(BuildContext context) {// 根据输入框类型构建不同样式的输入框return widget.searchBarType == SearchBarType.normal? _genNormalSearch(): _genHomeSearch();}/// 构建首页搜索组件样式_genHomeSearch() {return Container(child: Row(children: [// 左侧图标_wrapTap(Container(padding: EdgeInsets.fromLTRB(6, 5, 5, 5),child: Row(children: [Text('上海',style: TextStyle(color: _homeFrontColor(), fontSize: 14)),Icon(Icons.expand_more,color: _homeFrontColor(), size: 22)],)),widget.leftButtonClick),// 搜索框Expanded(child: _inputBox(), flex: 1),// 右侧消息图标_wrapTap(Container(padding: EdgeInsets.fromLTRB(10, 5, 10, 5),child: Icon(Icons.comment,color: _homeFrontColor(),size: 26,),),widget.rightButtonClick)],),);}/// 构建通用搜索组件样式_genNormalSearch() {return Container(child: Row(children: [// 左侧图标_wrapTap(Container(padding: EdgeInsets.fromLTRB(6, 5, 10, 5),child: widget.hideLeft ?? false? null: Icon(Icons.arrow_back_ios,size: 26,color: Colors.grey,),),widget.leftButtonClick),// 搜索框Expanded(child: _inputBox(), flex: 1),// 右侧搜索文字_wrapTap(Container(padding: EdgeInsets.fromLTRB(10, 5, 10, 5),child: Text('搜索',style: TextStyle(color: Colors.blue, fontSize: 17)),),widget.rightButtonClick)],),);}/// 构建搜索框Widget _inputBox() {Color inputBoxColor;if (widget.searchBarType == SearchBarType.normal) {inputBoxColor = Colors.white;} else {inputBoxColor = Color(int.parse('0xffEDEDED'));}return Container(height: 30,padding: EdgeInsets.fromLTRB(10, 0, 10, 0),// 搜索组件样式（设置背景色以及圆角）decoration: BoxDecoration(color: inputBoxColor,borderRadius: BorderRadius.circular(widget.searchBarType == SearchBarType.normal ? 5 : 15)),child: Row(children: [//搜索图标Icon(Icons.search,size: 20,color: widget.searchBarType == SearchBarType.normal? Color(0xffA9A9A9): Colors.blue),// 输入框Expanded(child: widget.searchBarType == SearchBarType.normal? TextField(controller: _controller,onChanged: _onChanged,autofocus: true,style: TextStyle(fontSize: 18,color: Colors.black,fontWeight: FontWeight.w300),// 输入文本样式decoration: InputDecoration(contentPadding: EdgeInsets.fromLTRB(5, 0, 5, 0),border: InputBorder.none,hintText: widget.hint ?? '',hintStyle: TextStyle(fontSize: 15)),): _wrapTap(// 首页搜索组件样式Container(child: Text(widget.defaultText,style: TextStyle(fontSize: 13, color: Colors.grey),),),widget.inputBoxClick)),!showClear? _wrapTap(// 语音图标Icon(Icons.mic,size: 22,color: widget.searchBarType == SearchBarType.normal? Colors.blue: Colors.grey,),widget.speackClick): _wrapTap(// 清除图标Icon(Icons.clear,size: 22,color: Colors.grey,), () {// 清空搜索内容setState(() {_controller.clear();});// 清空输入框内容_onChanged('');})],),);}/// 输入框监听文本变化_onChanged(String text) {if (text.length > 0) {setState(() {showClear = true;});} else {setState(() {showClear = false;});}// 回调输入的内容if (widget.onChanged != null) {widget.onChanged(text);}}/// 首页前景色_homeFrontColor() {return widget.searchBarType == SearchBarType.normal? Colors.black54: Colors.white;}// 返回自带点击事件的widget_wrapTap(Widget widget, void Function() callback) {return GestureDetector(onTap: () {if (callback != null) callback();},child: widget,);}
}

使用

SearchBar(searchBarType: appBarAlpha > 0.2? SearchBarType.homeLight: SearchBarType.home,inputBoxClick: _jumpToSearch,speackClick: _jumpToSpeak,// 输入框提示信息defaultText: SEARCH_BAR_DEFAULT_TEXT,leftButtonClick: () {},)/// 跳转到搜索页void _jumpToSearch() {}/// 跳转到语音识别页面void _jumpToSpeak() {}

基于TextField实现通用搜索组件相关推荐

基于 IOCP 的通用异步 Windows Socket TCP 高性能服务端组件的设计与实现
设计概述服务端通信组件的设计是一项非常严谨的工作,其中性能.伸缩性和稳定性是必须考虑的硬性质量指标,若要把组件设计为通用组件提供给多种已知或未知的上层应用使用,则设计的难度更会大大增加,通用性.可用 ...
Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
前言这次的后台管理系统项目选型用了Vue来作为主技术栈: 因为前段时间用过React来写过项目(用了antd),感觉棒棒的. 所以这次就排除了Element UI,而采用了Ant Design Vu ...
通用vue组件化搜索组件页面
一.组件化封装 1.首先创建一个form文件夹,将搜索框组件的内容全部写在这个里面,然后再在需要的页面直接引入相应的组件即可 2.首先先在goods.vue文件里面写对应的文本数组formItems, ...
基于 Mui 封装常用 React 组件
基于 Mui 封装常用 React 组件 Mui(MaterialUI) Mui 是基于google的Materia设计风格开发的基于React框架的 UI 框架,之前的名称为MaterialUI. ...
vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
MIS通用管理组件_通用管理组件V2.1.0发布
MIS通用管理组件是一个基于.NET4.0的MIS微型框架,实现单点登录,MIS类管理系统集群化管理配置,操作权限细化,数据集权限逐级授权:提供C/S代码生成器,丰富的类库:提供全部相关的源代码,为广 ...
天猫php采集列表,QueryList: QueryList是一个基于phpQuery的通用列表采集类,是一个简单、灵活、强大的采集工具，采集任何复杂的页面基本上就一句话就能搞定了。...
#QueryList交流社区: http://querylist.cc/ #QueryList文档: http://doc.querylist.cc/ #QueryList交流QQ群:12326696 ...
实现一个基于Vue的Button小组件
概述原生HTML的button只能保证功能存在,样式都不怎么好看.当然也可以通过编写css样式来改变原生HTML中的button显示,但是现在各个UI框架都很流行,也很方便,很多时候都是直接引入框架 ...
微信团队分享：iOS版微信的高性能通用key-value组件技术实践
本文来自微信开发团队guoling的技术分享. 1.前言本文要分享的是iOS版微信内部正在推广和使用的一个高性能通用key-value 组件的技术实践过程,该组件在微信内部被命名为MMKV(以下简称 ...

基于TextField实现通用搜索组件

基于TextField实现通用搜索组件相关推荐

最新文章

热门文章