ExpansionTile结合SetState：如何保持展开面板状态？

核心问题原因 #

当点击复选框触发父组件的setState时，页面会整体重建，ExpansionTile的内部展开状态会被重置为initiallyExpanded指定的false，进而导致折叠。要解决这个问题，需要将ExpansionTile的展开状态从组件内部转移到父组件的状态中统一维护，避免重建时丢失状态。

具体实现步骤 #

1. 在父组件中维护展开状态映射 #

在父组件的State类中，添加一个Map来存储每个ExpansionTile的展开状态，键可以用你已有的GlobalKey，或者业务数据的唯一ID：

// 用GlobalKey作为键，对应每个ExpansionTile的展开状态
final Map<GlobalKey, bool> _expansionStates = {};
// 同时维护选中项的状态（示例）
final Set<int> _selectedItems = {};

2. 修改ExpansionTile的初始化与状态更新 #

为每个ExpansionTile创建唯一的GlobalKey，初始化时从映射中读取展开状态；在onExpansionChanged回调中更新映射的状态：

// 为当前ExpansionTile创建唯一GlobalKey
final GlobalKey expansionTileKey = GlobalKey();
// 初始化状态（首次创建时默认设为false）
_expansionStates.putIfAbsent(expansionTileKey, () => false);

return Card(
  child: ExpansionTile(
    key: expansionTileKey,
    // 从映射中读取当前展开状态，替代固定的false
    initiallyExpanded: _expansionStates[expansionTileKey] ?? false,
    onExpansionChanged: (value) {
      // 更新映射中的状态并触发setState，确保状态同步
      setState(() {
        _expansionStates[expansionTileKey] = value;
      });
      if (value) {
        scrollToSelectedContent(expansionTileKey: expansionTileKey);
      }
    },
    leading: const Text('t1'),
    title: const Text('t2'),
    trailing: const Text('t3'),
    subtitle: null,
    children: [
      ListView.builder(
        physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (context, index2) {
          // 带复选框的Card示例，点击触发setState更新选中状态
          final isSelected = _selectedItems.contains(index2);
          return Card(
            color: isSelected ? Colors.lightBlueAccent[100] : null,
            child: CheckboxListTile(
              title: Text('选项 ${index2 + 1}'),
              value: isSelected,
              onChanged: (bool? value) {
                setState(() {
                  if (value == true) {
                    _selectedItems.add(index2);
                  } else {
                    _selectedItems.remove(index2);
                  }
                });
              },
            ),
          );
        },
        itemCount: 10,
        shrinkWrap: true,
        padding: const EdgeInsets.all(5),
        scrollDirection: Axis.vertical,
      )
    ],
  ),
);

3. 优化建议（可选） #

如果ExpansionTile是基于业务数据动态生成的，建议用数据的唯一ID（比如item.id）作为状态映射的键，比GlobalKey更轻量高效：

// 假设你的业务数据模型
class Category {
  final int id;
  final String name;
  Category({required this.id, required this.name});
}

// 父组件状态
final List<Category> _categories = [
  Category(id: 1, name: "分类1"),
  Category(id: 2, name: "分类2"),
];
final Map<int, bool> _expansionStates = {};

// 生成ExpansionTile时
for (var category in _categories) {
  _expansionStates.putIfAbsent(category.id, () => false);
  return Card(
    child: ExpansionTile(
      // 用ValueKey替代GlobalKey，更轻量
      key: ValueKey(category.id),
      initiallyExpanded: _expansionStates[category.id] ?? false,
      onExpansionChanged: (value) {
        setState(() {
          _expansionStates[category.id] = value;
        });
        // 如果需要滚动定位，可调整scroll函数适配ValueKey
      },
      title: Text(category.name),
      // ...其他属性
    ),
  );
}

原理说明 #

通过将ExpansionTile的展开状态提取到父组件的状态中存储，即使父组件因复选框点击触发setState重建，ExpansionTile会从映射中读取最新的展开状态，而不是回到初始的false，从而保持展开状态不变。

内容的提问来源于stack exchange，提问作者Icaroto