本篇内容主要讲解“Flutter实现自定义筛选框的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Flutter实现自定义筛选框的方法”吧!
目录
一、首先自定义筛选框的按钮视图，布局很简单，一个listView就可以搞定。
二、定义筛选数据展示列表视图。
一、首先自定义筛选框的按钮视图，布局很简单，一个listView就可以搞定。
在数据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实现自定义筛选框的方法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
