Flutter实现自定义筛选框的示例代码
更新时间：2021年07月13日 11:29:30 作者：LDFeng
本文主要介绍了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 自定义筛选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Kotlin启动协程的三种方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
一文带你看懂Android Application启动流程是怎样的
谈到Android Application的启动流程，很多文章都是各种源码类和方法的一堆调用关系，这样的文章就算看一百遍，也只是云里雾里。源码得看，但是最好不要一下子深陷到源码的细节之中，不可自拔。这里站在前人的基础之上做一个总结2021-10-10
一提起位运算，人们往往想到它的高效性，无论是嵌入式编程还是优化系统的核心代码，适当的运用位运算总是一种迷人的手段，下面这篇文章主要给大家介绍了关于Kotlin基础学习之位运算的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2017-11-11
这篇文章主要为大家详细介绍了Android Studio实现带边框的圆形头像，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
大家在拿到dayu之后，都吐槽说，会经常熄屏，不利于调试，那么有没有一种办法，可以让app不熄屏呢，答案是有的，今天我们就来揭秘一下，如何控制屏幕亮度2022-11-11
本文主要介绍了android studio集成unity导出工程的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了Android 同时setTag两次保存多种值的示例代码,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了Android中使用ListView实现漂亮的表格效果,本文用详细的代码实例创建了一个股票行情表格,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了Android实现定制返回按钮动画效果的方法,涉及Android控件及动画的相关操作技巧,需要的朋友可以参考下2016-02-02
协程的作用是什么？协程是一种轻量级的线程，解决异步编程的复杂性，异步的代码使用协程可以用顺序进行表达，文中通过示例代码介绍详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-08-08
最新评论