Flutter：单个JSON在多个ExpansionPanelRadio中重复显示问题求助

我在Flutter应用里用一个带静态数据的JSON文件生成Widget列表，在某个页面用ExpansionPanelRadio展示多个面板项，每个面板展开后，body里要显示这个JSON生成的Widget列表。用Provider实现后，面板里的列表出现重复显示的情况（比如展开后面板列表循环多次）。我猜测问题出在Provider，但对它的原理理解不够，刚接触Flutter，希望有人解释原因并给解决思路。

相关代码：

SingleChildScrollView(
        child: ExpansionPanelList.radio(
        elevation: 0,
        children: MyList.map<ExpansionPanelRadio>((Item item) {
          return ExpansionPanelRadio(
              value: MyList.indexOf(item),
              headerBuilder: (BuildContext context, bool isExpanded) {
                return Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(10),
                      child: SvgPicture.asset(
                        "assets/images/some_image.svg"
                      ),
                    ),
                    Text('some label'),
                  ],
                );
              },
              body: ChangeNotifierProvider(
                  create: (context) => FeaturesProvider(),
                  builder: (context, child) {
                    Provider.of<FeaturesProvider>(context, listen: false)
                        .readFeatures();

                    return SingleChildScrollView(
                      child: Container(
                        child: Features(item.objectId.toString()),
                      ),
                    );
                  }));
        }).toList(),
      ))

1. Provider重复创建+数据累加：每个ExpansionPanelRadio的body里都新建了FeaturesProvider实例，每次面板展开都会执行readFeatures()读JSON数据。如果readFeatures()是把数据追加到现有列表而非重置后添加，就会导致数据重复累加，最终列表重复显示。
2. 面板重建触发重复读取：ExpansionPanelList.radio在面板展开/收起时会触发子组件重建，你在builder里直接调用readFeatures()，每次重建都会执行一次数据读取，进一步加重重复问题。
3. value值存在冲突风险：用MyList.indexOf(item)作为ExpansionPanelRadio的value，如果MyList里有重复的Item对象，会导致多个面板共用同一个value，触发不必要的重建和状态混乱。

1. 调整Provider作用域与数据读取逻辑 #

• 不要在每个面板body里单独创建FeaturesProvider，把Provider提升到ExpansionPanelList.radio的父级，让所有面板共享同一个实例，避免重复创建。
• 修正readFeatures()方法，读取数据前先清空旧列表：

  void readFeatures() {
    features.clear(); // 先清空旧数据
    features.addAll(/* JSON解析后的新数据 */);
    notifyListeners();
  }
  

• 把数据读取逻辑移到Provider构造函数或页面初始化阶段，只执行一次，而非每次面板重建都执行。

2. 优化ExpansionPanel的value设置 #

• 放弃用MyList.indexOf(item)作为value，改用每个Item独有的标识（比如你用到的objectId）：

  value: item.objectId,
  

3. 规范Provider的使用方式 #

• 在Features组件中用Consumer或默认listen: true的Provider.of监听数据变化，不要在builder里直接调用readFeatures()。如果只需读取一次数据，可放在页面的initState中：

  @override
  void initState() {
    super.initState();
    Provider.of<FeaturesProvider>(context, listen: false).readFeatures();
  }
  

4. 减少不必要的组件重建 #

• 给ExpansionPanelRadio的headerBuilder和body部分添加const修饰，或使用AutomaticKeepAliveClientMixin保持组件状态，避免无意义的重建。

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