Flutter ExpansionTile 折叠组件的使用

前言

在flutter 中，为我们提供了一个可折叠的组件 ExpansionTile ，而且此组件还比较容易扩展，本篇文章将记录扩展的一种，card 可折叠的名片列表。

ExpansionTile 的使用

ExpansionTile({
    Key key,
    this.leading,//和ListTitle类似，在文字前面的Widget
    @required this.title,//和ListTitle类似，文字
    this.backgroundColor,//背景
    this.onExpansionChanged,//展开或者关闭的监听
    this.children = const <Widget>[],//内部孩子
    this.trailing,//和ListTitle类似，右侧图标
    this.initiallyExpanded = false,//默认是否展开
  })

从上面的源码中，我们可以看到 ExpansionTile 相关的一些属性，当然，属性比较多，我挑选的是一些比较常用的属性。

这里我将使用 ListView.builder + card + ExpansionTile 来实现一个卡片型的折叠列表。

1. 初始化数据

  final List<Map<String, dynamic>> itemList = List.generate(50,
      (index) => {"id": index, "title": "item${index}", "content": "这里是折叠的内容"});

2. 我需要做一个删除操作，因此需要写一个删除数据的方法

  removeItem(int id) {
    itemList.removeWhere((element) => element["id"] == id);

    notifyListeners();
  }

3. 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 选项