Flutter实现自定义筛选框的示例代码
作者:LDFeng 发布时间:2022-08-13 21:52:40
标签:Flutter,筛选框
目录
一、首先自定义筛选框的按钮视图,布局很简单,一个listView就可以搞定。
二、定义筛选数据展示列表视图。
一、首先自定义筛选框的按钮视图,布局很简单,一个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]);
},
);
}),
),
),
),
);
来源:https://juejin.cn/post/6983971330064384037
0
投稿
猜你喜欢
- 目录1.引用Nuget包 ServiceStack.Redis2. string 类型的使用作
- 为了能正常输出XML格式的内容,必须要对不被XML允许的那些特殊字符进行转换。本文介绍的正是如何使用C#判断XML字符串是否含特殊字符并进行
- 看书的时候被一段代码能凌乱啦,代码是这样的:package 继承;abstract class People {
- 本文实例为大家分享了java数据库唯一id生成工具类的具体代码,供大家参考,具体内容如下import java.io.File;import
- protected 来谈谈protected访问权限问题。看下面示例1:Test.javaclass MyObject {}public c
- @RequestParam@RequestParam:接收来自RequestHeader中,即请求头。通常用于GET请求,例如:http:/
- 这篇文章主要介绍了Java线程状态运行原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参
- 本篇文章主要介绍了java自动生成编号的实现,分享给大家,具体如下/** * 自动生成编号格式:yyMM+四位流水号 */ @Reques
- 判断某字符串是否为空,为空的标准是str==null或str.length()==01.下面是StringUtils判断是否为空的示例:St
- 接着上一篇继续,老铁们1.检查数组的有序性给定一个整型数组, 判断是否该数组是有序的(升序) public static bo
- 有个小伙伴遇到了这样一个问题,就是AutoCompleteTextView实现自动填充的功能。同时要具备手机格式化的功能。下拉列表最后一行是
- 前言最近因为一些个人原因,未能抽出太多精力更新Java多线程系列,一搁置就是好几个月,先向读者诸君致歉。在本系列的其他文章中,已经提到过线程
- MyBatis 是一款常用的持久层框架,使得程序能够以调用方法的方式执行某个指定的SQL,将执行SQL的底层逻辑进行封装。多数与Spring
- 1.ACSII码加密//ACSII码加密 private static string
- 1 数据响应  数据响应一般分为两种:页面响应和数据响应,一般来说页面响应是用来开发一些单体项目(也就是
- 本文实例讲述了Android编程实现的手写板和涂鸦功能。分享给大家供大家参考,具体如下:下面仿一个Android手写板和涂鸦的功能,直接上代
- 在上一篇文章中我介绍了使用Intent显式来实现页面向下跳转,接下来这篇文章主要介绍的是使用Intent隐式来实现向上跳转,什么意思呢,就是
- SpringBoot后台如何实现文件上传下载?最近做的一个项目涉及到文件上传与下载。前端上传采用百度webUploader插件。有关该插件的
- 目录顶级语句弃元参数仅初始化设置器 (Init only setters)记录类型 (Record)模式匹配增强Type patterns
- SpringBoot分离打Jar包的两种方式方式一:基于maven-jar-plugin此方式基于这个小伙伴的配置改的:https://ww