Flutter中ExpansionPanelList展开/折叠时避免组件重建的方案咨询

嘿，我来帮你搞定这个ExpansionPanelList触发不必要组件重建的问题！

问题根源分析 #

你当前的写法里，不管是用本地setState还是Bloc状态管理，每次更新展开状态时都会触发整个HomeState的build方法重新执行——这意味着Scaffold、AppBar、SingleChildScrollView这些无关组件都会跟着重建，完全是没必要的开销。

你提到觉得Selector组件没用，大概率是因为你把Bloc的监听放在了父组件层级，导致整个父组件都被重建了。我们需要把状态更新的影响范围缩小到只有ExpansionPanelList本身。

解决方案一：用ValueNotifier + ValueListenableBuilder（本地状态场景） #

这种方法适合不需要全局共享状态的场景，通过ValueNotifier来管理展开状态，再用ValueListenableBuilder包裹ExpansionPanelList，只在状态变化时重建这部分UI：

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Home()));

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => HomeState();
}

class HomeState extends State<Home> {
  late ValueNotifier<Map<String, bool>> _profileExpansionStateNotifier;

  @override
  void initState() {
    super.initState();
    _profileExpansionStateNotifier = ValueNotifier({
      "UserInformation": false,
      "UserWeight": false,
      "UserGeneralInformation": false,
    });
  }

  @override
  void dispose() {
    _profileExpansionStateNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 这里的build只会执行一次，父组件不会重复重建
    return Scaffold(
      appBar: AppBar(title: const Text('ExpansionPanel')),
      body: SingleChildScrollView(
        child: Container(
          padding: const EdgeInsets.all(20.0),
          // 只在状态变化时重建内部的ExpansionPanelList
          child: ValueListenableBuilder<Map<String, bool>>(
            valueListenable: _profileExpansionStateNotifier,
            builder: (context, state, child) {
              return ExpansionPanelList(
                expansionCallback: (int index, bool isExpanded) {
                  final keys = state.keys.toList();
                  // 必须创建新的Map，因为ValueNotifier只监听引用变化
                  _profileExpansionStateNotifier.value = {
                    ...state,
                    keys[index]: !isExpanded,
                  };
                },
                children: <ExpansionPanel>[
                  ExpansionPanel(
                    headerBuilder: (context, isExpanded) => Container(
                      height: 80.0,
                      child: const Text('aaaaaaaa'),
                    ),
                    body: const Text('aaaaaaaa'),
                    isExpanded: state["UserInformation"]!,
                  ),
                  ExpansionPanel(
                    headerBuilder: (context, isExpanded) => Container(
                      height: 80.0,
                      child: const Text('bbbbbbbbbbbb'),
                    ),
                    body: const Text('bbbbbbbbbbbb'),
                    isExpanded: state["UserWeight"]!,
                  ),
                  ExpansionPanel(
                    headerBuilder: (context, isExpanded) => Container(
                      height: 80.0,
                      child: const Text('ccccccccc'),
                    ),
                    body: const Text('ccccccccc'),
                    isExpanded: state["UserGeneralInformation"]!,
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

关键点：更新状态时要创建新的Map（用展开运算符...），因为ValueNotifier只会在值的引用发生变化时通知监听者，直接修改原Map不会触发更新。

解决方案二：优化Bloc使用（全局状态场景） #

如果你用Bloc管理状态，之前的问题是因为把Bloc监听放在了父组件层级，导致全量重建。改用BlocSelector来只监听展开状态的变化，并且只重建ExpansionPanelList部分：

假设你的Bloc状态包含expansionStateMap字段，代码示例如下：

@override
Widget build(BuildContext context) {
  // 父组件build只执行一次
  return Scaffold(
    appBar: AppBar(title: const Text('ExpansionPanel')),
    body: SingleChildScrollView(
      child: Container(
        padding: const EdgeInsets.all(20.0),
        // 只监听展开状态的变化，只有变化时才重建内部UI
        child: BlocSelector<YourBloc, YourState, Map<String, bool>>(
          selector: (state) => state.expansionStateMap,
          builder: (context, expansionState) {
            return ExpansionPanelList(
              expansionCallback: (index, isExpanded) {
                final keys = expansionState.keys.toList();
                context.read<YourBloc>().add(
                      UpdateExpansionStateEvent(
                        key: keys[index],
                        isExpanded: !isExpanded,
                      ),
                    );
              },
              children: <ExpansionPanel>[
                ExpansionPanel(
                  headerBuilder: (context, isExpanded) => Container(
                    height: 80.0,
                    child: const Text('aaaaaaaa'),
                  ),
                  body: const Text('aaaaaaaa'),
                  isExpanded: expansionState["UserInformation"]!,
                ),
                // 其他面板组件...
              ],
            );
          },
        ),
      ),
    ),
  );
}

关键点：BlocSelector会过滤Bloc状态的变化，只有当selector返回的expansionStateMap发生变化时，才会重建builder内部的ExpansionPanelList，父组件的其他部分不受影响。

额外优化小技巧 #

如果你的面板头部或内容是复杂组件，可以给它们添加const构造函数（如果数据不变的话），或者使用AutomaticKeepAliveClientMixin来保持组件状态，进一步减少不必要的重建。

总结一下，核心思路就是把状态更新的影响范围缩小到最小，只重建需要变化的部分，这两种方法都能有效解决你遇到的组件全量重建问题。

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