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

}

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 点击回调时应注意更改一级实体 Bean 中 isChecked 状态；

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 {
bool _isExpand = false;

@override
Widget build(BuildContext context) {
return InkWell(
child: Column(children: [
Divider(height: 0.5, color: Colors.blue),
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
child: Row(children: [
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: [ Flexible(child: _subCategoryItem(bean, index)) ]));
}
return _widget;
}

_subCategoryItem(CategoryBean bean, index) {
return Column(children: [
Divider(height: 0.5, color: Colors.deepOrange),
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
child: Row(children: [
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 时才会请求二级列表数据，并动态添加到数据列表中；这样的优势便是减少数据请求，简化数据格式；小菜默认在 分组五 中不设置二级列表数据，在点击时动态添加；

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
不断提升的资深开发者，这些资料都将为你打开新的学习之门**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！