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

最新推荐文章于 2024-04-08 14:03:53 发布

编程_进阶路

最新推荐文章于 2024-04-08 14:03:53 发布

阅读量376

点赞数 4

分类专栏： 2024年程序员学习文章标签： flutter 数据库 linux

本文链接：https://blog.csdn.net/bq520111/article/details/137102224

版权

2024年程序员学习专栏收录该内容

151 篇文章 0 订阅

订阅专栏

本文介绍了如何在Android应用中实现分组列表的动态展开与收缩功能，包括一级列表的点击事件处理、二级列表的显示与隐藏以及ACECheckbox的选中/取消状态管理。同时提及了作者提供的一份系统化的Android学习资源，旨在帮助开发者提升技能并解决自学中的问题。

摘要由CSDN通过智能技术生成

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)
]))
]);
}