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 自定义筛选框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android编程实现换肤功能实例

    Android编程实现换肤功能实例

    这篇文章主要介绍了Android编程实现换肤功能的方法,结合实例形式较为详细的分析了Android换肤的具体步骤与相关技巧,需要的朋友可以参考下
    2015-12-12
  • Android利用Gson解析嵌套多层的Json的简单方法

    Android利用Gson解析嵌套多层的Json的简单方法

    下面小编就为大家带来一篇Android利用Gson解析嵌套多层的Json的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Android中TextView显示圆圈背景或设置圆角的方法

    Android中TextView显示圆圈背景或设置圆角的方法

    TextView显示文本给用户,并允许他们选择编辑。TextView是一个完整的文本编辑器,但是其基本类配置为不允许编辑。下面这篇文章主要给大家介绍了关于Android中TextView显示圆圈背景或设置圆角的方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • Android BottomSheetDialog实现底部对话框的示例

    Android BottomSheetDialog实现底部对话框的示例

    这篇文章主要介绍了Android BottomSheetDialog实现底部对话框的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Android Compose 属性动画使用探索详解

    Android Compose 属性动画使用探索详解

    这篇文章主要为大家介绍了Android Compose 属性动画使用探索详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Android仿微信键盘切换效果

    Android仿微信键盘切换效果

    这篇文章主要为大家详细介绍了Android仿微信键盘切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • android实现加载动画对话框

    android实现加载动画对话框

    这篇文章主要为大家详细介绍了android实现加载动画对话框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Android AutoCompleteTextView连接数据库自动提示的方法(附demo源码下载)

    Android AutoCompleteTextView连接数据库自动提示的方法(附demo源码下载)

    这篇文章主要介绍了Android AutoCompleteTextView连接数据库自动提示的方法,结合实例形式分析了AutoCompleteTextView操作数据库的原理与具体技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2016-02-02
  • Android中ViewFlipper的使用及设置动画效果实例详解

    Android中ViewFlipper的使用及设置动画效果实例详解

    这篇文章主要介绍了Android中ViewFlipper的使用及设置动画效果的方法,以实例形式较为详细的分析了ViewFlipper的功能、原理及设置与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Android实现调用系统分享功能示例的总结

    Android实现调用系统分享功能示例的总结

    这篇文章主要介绍了通过Android调用系统分享文本信息、单张图片、多个文件和指定分享到微信、QQ,同时分享图片和文字的功能示例,小编觉得挺不错,一起跟随小编过来看看吧
    2018-05-05

最新评论