【Flutter 专题】123 图解简易 GroupList 二级分组列表

举报
阿策小和尚 发表于 2022/04/20 08:47:01 2022/04/20
【摘要】 0 基础学习 Flutter,第一百二十三步:尝试自定义 GroupList 二级分组列表!

    小菜在实践过程中,想实现一个可选的二级分组列表,pub.dev 插件库中已经有很多类似功能的插件,小菜还是准备从自己角度尝试实现一个简单的二级分组列表;

  • 列表分为两级,默认均折叠
  • 一级列表和二级列表均可选中和取消
  • 二级列表数据可以主动添加

    分组列表的实现有很多方式,小菜准备用最基本的两个 ListView 嵌套的思路来进行展示,默认是展示第一级列表信息,在点击展开操作时,展示对应的二级列表;

GroupList

1. Bean 数据结构

    小菜先准备好数据实体类,一级列表 CategoryBean 中包含对应的二级列表 SubCategoryBean,其中两个实体中均包含一个 isChecked 字段用于保存当前 item 是否选中状态;

class CategoryBean {
  String name;
  String url;
  bool _isChecked = false;
  List<SubCategoryBean> itemList;

  bool get isChecked => _isChecked ?? false;

  set isChecked(bool value) => _isChecked = value;

  CategoryBean({this.name, this.url, this.itemList});
}

class SubCategoryBean {
  String name;
  String url;
  bool _isChecked = false;

  SubCategoryBean({this.name, this.url});

  bool get isChecked => _isChecked ?? false;

  set isChecked(bool value) => _isChecked = value;
}

2. 一级列表

    小菜先展示一级列表,可根据使用场景确认是否使用 SliverListView,小菜测试过程中仅采用基本的 ListView;其中单项选择框,小菜采用了之前自定义的 ACECheckbox;其中注意,在 ACECheckbox 点击回调时应注意更改一级实体 BeanisChecked 状态;

return Scaffold(
    appBar: AppBar(title: Text('分组列表')),
    body: ListView.builder(
        itemCount: widget.listData.length,
        itemBuilder: (context, index) {
          return GroupItemWidget(widget.listData[index]);
        }));

class _GroupItemWidgetState extends State<GroupItemWidget> {
  bool _isExpand = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
        child: Column(children: <Widget>[
          Divider(height: 0.5, color: Colors.blue),
          Padding(
              padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
              child: Row(children: <Widget>[
                Icon(_isExpand ? Icons.arrow_drop_down : Icons.arrow_right, color: Colors.blue),
                _userIcon(false),
                SizedBox(width: 5.0),
                Expanded(child: Text('${widget.bean.name}', style: TextStyle(fontSize: 16.0))),
                _rightCheckBox(widget.bean, 0)
              ])),
          _subCategoryList(widget.bean)
        ]),
        onTap: () {
          _isExpand = !_isExpand;
          setState(() {});
        });
  }

  _userIcon(isCircle) {
    double size = isCircle ? 40.0 : 45.0;
    return PhysicalModel(
        color: Colors.transparent,
        shape: isCircle ? BoxShape.circle : BoxShape.rectangle,
        clipBehavior: Clip.antiAlias,
        elevation: 2.0,
        borderRadius: BorderRadius.all(Radius.circular(20.0)),
        child: Container(width: size, height: size, child: Image.asset(isCircle ? 'images/icon_qq.png' : 'images/icon_hzw01.jpg')));
  }

  _rightCheckBox(bean, type, {subIndex}) {
    bool _isChecked = type == 0 ? bean.isChecked : bean.itemList[subIndex].isChecked;
    return ACECheckbox(
        value: _isChecked,
        type: ACECheckBoxType.circle,
        unCheckColor: Colors.blue,
        onChanged: (value) {
          setState(() => _isChecked = value);
          if (type == 0) {
            bean.isChecked = _isChecked;
            List.generate(bean.itemList.length, (index) => bean.itemList[index].isChecked = _isChecked);
          }
        });
  }
}

3. 二级列表

    当点击一级列表 item 时,展现二级列表;而实际上只是在一级 item 中添加一个新的列表数据,仅视觉效果上是展开二级列表;当再次点击一级列表 item 时把新加的二级列表替换为空的 Container 布局即可;

_subCategoryList(CategoryBean bean) {
  Widget _widget;
  if (!_isExpand ||
      bean == null ||
      bean.itemList == null ||
      bean.itemList.length == 0) {
    _widget = Container();
  } else {
    _widget = ListView.builder(
        itemCount: bean.itemList.length,
        itemBuilder: (context, index) => Row(children: <Widget>[ Flexible(child: _subCategoryItem(bean, index)) ]));
  }
  return _widget;
}

_subCategoryItem(CategoryBean bean, index) {
  return Column(children: <Widget>[
    Divider(height: 0.5, color: Colors.deepOrange),
    Padding(
        padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
        child: Row(children: <Widget>[
          SizedBox(width: 40.0),
          _userIcon(true),
          SizedBox(width: 5.0),
          Expanded(child: Text(bean.itemList[index].name ?? 'SubName')),
          _rightCheckBox(bean, 1, subIndex: index)
        ]))
  ]);
}

4. ACECheckbox 选中 & 取消

    小菜最想处理的是列表 item 的选中和取消状态;小菜首先在实体 Bean 中添加一个 isChecked 状态用于记录当前选中状态;

    当一级列表选中时,无论展开或折叠,二级列表中各元素也全部选中,小菜通过 List.generate 遍历二级列表更改 isChecked 状态;

    当二级列表 item 部分选中时,对应的一级列表取消选中状态;同时当把二级列表中所有 items 均选中时,对应一级列表也要选中;小菜通过遍历判断二级列表中选中数量来调整一级 item 对应的 isChecked 状态;

_rightCheckBox(bean, type, {subIndex}) {
  bool _isChecked = type == 0 ? bean.isChecked : bean.itemList[subIndex].isChecked;
  return ACECheckbox(
      value: _isChecked,
      type: ACECheckBoxType.circle,
      unCheckColor: Colors.blue,
      onChanged: (value) {
        setState(() => _isChecked = value);
        if (type == 0) {
          bean.isChecked = _isChecked;
          List.generate(bean.itemList.length, (index) => bean.itemList[index].isChecked = _isChecked);
        } else {
          bean.itemList[subIndex].isChecked = _isChecked;
          int checkedSize = 0;
          List.generate(bean.itemList.length, (index) {
            if (bean.itemList[index].isChecked == false) {
              bean.isChecked = false;
            } else {
              checkedSize += 1;
            }
            if (checkedSize == bean.itemList.length) {
              bean.isChecked = true;
            }
          });
        }
      });
}

5. 数据动态添加

    小菜预期的目标是,首次数据只展示一级列表数据,再点击一级列表 item 时才会请求二级列表数据,并动态添加到数据列表中;这样的优势便是减少数据请求,简化数据格式;小菜默认在 分组五 中不设置二级列表数据,在点击时动态添加;

return InkWell(
    child: Column(children: <Widget>[
      Divider(height: 0.5, color: Colors.blue),
      Padding(
          padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
          child: Row(children: <Widget>[
            Icon(_isExpand ? Icons.arrow_drop_down : Icons.arrow_right, color: Colors.blue),
            _userIcon(false), SizedBox(width: 5.0),
            Expanded(child: Text('${widget.bean.name}', style: TextStyle(fontSize: 16.0))),
            _rightCheckBox(widget.bean, 0)
          ])),
      _subCategoryList(widget.bean)
    ]),
    onTap: () {
      _isExpand = !_isExpand;
      setState(() {});
      if (widget.bean.name == '分组五' &&
          (widget.bean.itemList == null || widget.bean.itemList.length == 0)) {
        widget.bean.itemList = [
          SubCategoryBean(name: 'O'),
          SubCategoryBean(name: 'P'),
          SubCategoryBean(name: 'Q')
        ];
      }
    });

6. 滑动冲突

    小菜通过两个 ListView 来实现二级分组列表,涉及到手势冲突,在二级列表展开时,手势只能在一级列表处触发,二级列表不会整体滑动且上下有主题色水波纹;小菜之前也曾处理过,只需要在 ListView 中设置 primary: false & shrinkWrap: true 等即可;

_widget = ListView.builder(
    primary: false,
    shrinkWrap: true,
    itemCount: bean.itemList.length,
    itemBuilder: (context, index) => Row(children: <Widget>[ Flexible(child: _subCategoryItem(bean, index)) ]));


    GroupListPage 案例源码


    小菜对 GroupList 二级分组列表的练习暂时告一段落,但真正应用到实际中还应配合具体的数据请求以及页面操作进行调整,以上仅为一个简单的测试 Demo;如有错误,请多多指导!

来源: 阿策小和尚

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。