ExpansionTile 折叠组件的使用
前言
在flutter 中,为我们提供了一个可折叠的组件 ExpansionTile ,而且此组件还比较容易扩展,本篇文章将记录扩展的一种,card 可折叠的名片列表。
ExpansionTile 的使用
ExpansionTile({
Key key,
this.leading,//和ListTitle类似,在文字前面的Widget
this.title,//和ListTitle类似,文字
this.backgroundColor,//背景
this.onExpansionChanged,//展开或者关闭的监听
this.children = const <Widget>[],//内部孩子
this.trailing,//和ListTitle类似,右侧图标
this.initiallyExpanded = false,//默认是否展开
})
从上面的源码中,我们可以看到 ExpansionTile 相关的一些属性,当然,属性比较多,我挑选的是一些比较常用的属性。
这里我将使用 ListView.builder + card + ExpansionTile 来实现一个卡片型的折叠列表。
- 初始化数据
final List<Map<String, dynamic>> itemList = List.generate(50,
(index) => {"id": index, "title": "item${index}", "content": "这里是折叠的内容"});
- 我需要做一个删除操作,因此需要写一个删除数据的方法
removeItem(int id) {
itemList.removeWhere((element) => element["id"] == id);
notifyListeners();
}
- ExpansionTile 的使用
ListView.builder(
itemCount: model.itemList.length,
itemBuilder: (context, index) {
var item = model.itemList[index];
return Card(
// 记录唯一的key
key: PageStorageKey(item["id"]),
child: ExpansionTile(
expandedCrossAxisAlignment: CrossAxisAlignment.end,
expandedAlignment: Alignment.centerRight,
childrenPadding: EdgeInsets.all(10),
maintainState: true,
title: Text(
item["title"],
),
children: [
Text(item["content"]),
TextButton.icon(
onPressed: () => model.removeItem(item['id']),
icon: const Icon(Icons.delete),
label: const Text(
'Remove',
),
style: TextButton.styleFrom(primary: Colors.red),
)
],
),
);
},
)
运行结果如下
总结
整篇文章的记录比较简单,生成卡片折叠列表后,可以展开选项,并点击删除按钮,可以删除当前的cell 选项