Flutter实现自定义筛选框的示例代码
一、首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定。
1、在数据model中添加了一个selectedModel属性,用来记录当前已选择的筛选项(目前仅支持单选)。
2、当按钮数量小于3个时,按钮最大宽度为屏幕宽度的1/3;小于屏幕宽度时,则为屏幕宽度/按钮数量。
具体代码如下:
var text = model.selectedFilterModel != null ? model.selectedFilterModel.dictValue : model.name ?? ""; return Container( padding: EdgeInsets.symmetric(horizontal: 20), constraints: BoxConstraints( maxWidth: MediaQuery.of(context).size.width / (widget.dataList.length > 3 ? 3 : widget.dataList.length), maxHeight: widget.viewHeight), color: Colors.white, child: InkWell( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( text, maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( fontSize: widget.textSize, color: model.isSelected ? widget.textSelectColor : widget.textColor), ), SizedBox( width: 4, ), model.isSelected == true ? Icon(Icons.keyboard_arrow_down, color: widget.textSelectColor) : Icon(Icons.keyboard_arrow_up, color: widget.textColor), ], ), onTap: () { setState(() { if (_selectModel != null && _selectModel != model) { _selectModel.isSelected = false; } model.isSelected = !model.isSelected; _selectModel = model; }); }));
二、定义筛选数据展示列表视图。
首先在剩余视图上定义一个背景黑色透明的遮罩层,然后在这层Container上展示listView,listView展示的数据为筛选的具体数据内容。Visibility控制整体视图是否可见,具体代码如下:
visible: Provider.of<FilterModelProvider>(context).isShowFilterOptionsView ?? false, child: GestureDetector( onTap: () { Provider.of<FilterModelProvider>(context, listen: false) .hideFilterOptionsView(); }, child: Container( color: Colors.black54, child: Container( margin: EdgeInsets.only( bottom: SizeFit.screenHeight - widget.filterButtonViewHeight - SizeFit.appBarHeight - listViewHeight + animation.value), color: Colors.white, child: ListView.builder( padding: EdgeInsets.zero, itemCount: _dataList.length, itemBuilder: (BuildContext context, int index) { return InkWell( child: Container( height: widget.listHeight, child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, // crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( _dataList[index].dictValue, overflow: TextOverflow.ellipsis, maxLines: 1, style: TextStyle( fontSize: 16, color: Colors.black87, fontWeight: FontWeight.normal), ), Divider( height: 1, indent: 1, ) ], ), ), onTap: () { Provider.of<FilterModelProvider>(context, listen: false) .selectFilterOption(_dataList[index]); }, ); }), ), ), ), );
到此这篇关于Flutter实现自定义筛选框的示例代码的文章就介绍到这了,更多相关Flutter 自定义筛选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Android中TextView显示圆圈背景或设置圆角的方法
TextView显示文本给用户,并允许他们选择编辑。TextView是一个完整的文本编辑器,但是其基本类配置为不允许编辑。下面这篇文章主要给大家介绍了关于Android中TextView显示圆圈背景或设置圆角的方法,需要的朋友可以参考借鉴,下面来一起看看吧。2017-05-05Android BottomSheetDialog实现底部对话框的示例
这篇文章主要介绍了Android BottomSheetDialog实现底部对话框的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-06-06Android AutoCompleteTextView连接数据库自动提示的方法(附demo源码下载)
这篇文章主要介绍了Android AutoCompleteTextView连接数据库自动提示的方法,结合实例形式分析了AutoCompleteTextView操作数据库的原理与具体技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-02-02Android中ViewFlipper的使用及设置动画效果实例详解
这篇文章主要介绍了Android中ViewFlipper的使用及设置动画效果的方法,以实例形式较为详细的分析了ViewFlipper的功能、原理及设置与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论