Flutter嵌套Widget调用setState未按预期生效，如何实现指定组件更新？

问题原因 #

你当前的实现中所有BlockBCard组件共用同一个singleCounter全局状态，只要该值更新，所有绑定该状态的卡片都会同步刷新，因此无法实现单个卡片独立更新。

解决思路 #

为每张卡片单独分配独立的计数状态，用列表存储所有卡片的计数，点击时仅修改当前点击卡片对应的计数值即可，全局的totalCounter计算逻辑不受影响。

修改后完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainBlock(),
    );
  }
}

class MainBlock extends StatefulWidget {
  @override
  _MainBlockState createState() => _MainBlockState();
}

class _MainBlockState extends State<MainBlock> {
  int totalCounter = 0;
  // 配置卡片总数量，修改该值可直接适配任意多张卡片
  final int cardNum = 2;
  // 存储每张卡片的独立计数，初始值均为0
  late List<int> cardCounters;

  @override
  void initState() {
    super.initState();
    cardCounters = List.filled(cardNum, 0);
  }

  void myBrain() {
    totalCounter = totalCounter + 5;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(30.0),
        color: Color(0xFF122C39),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: BlockA(
                counter: totalCounter,
                button: () {
                  setState(() {
                    totalCounter = 0;
                    // 可选：重置所有卡片计数
                    // cardCounters = List.filled(cardNum, 0);
                  });
                },
              ),
            ),
            // 批量生成卡片，无需手动重复写代码
            ...List.generate(cardNum, (index) => Expanded(
              child: BlockBCard(
                counter: cardCounters[index],
                button: () {
                  setState(() {
                    myBrain();
                    // 仅修改当前点击卡片的计数
                    cardCounters[index]++;
                  });
                },
              ),
            ))
          ],
        ),
      ),
    );
  }
}

class BlockA extends StatelessWidget {
  final int counter;
  final Function button;

  BlockA({required this.counter, required this.button});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      color: Color(0xFF265672),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            child: Text(
              counter.toString(),
              style: TextStyle(
                color: Color(0xFFFFFFFF),
                fontSize: 22.0,
              ),
            ),
          ),
          Center(
            child: GestureDetector(
              onTap: () => button(),
              child: Text(
                'Button',
                style: TextStyle(
                  color: Color(0xFFFFFFFF),
                  fontSize: 22.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class BlockBCard extends StatelessWidget {
  final int counter;
  final Function button;

  BlockBCard({required this.counter, required this.button});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(30.0),
      color: Color(0xFF4C93C7),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            child: Text(
              counter.toString(),
              style: TextStyle(
                color: Color(0xFFFFFFFF),
                fontSize: 22.0,
              ),
            ),
          ),
          Center(
            child: GestureDetector(
              onTap: () => button(),
              child: Text(
                'Button',
                style: TextStyle(
                  color: Color(0xFFFFFFFF),
                  fontSize: 22.0,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

如果需要实现点击卡片后所有卡片同步更新的需求，只需要将计数改回统一的全局变量即可；如果需要部分卡片联动，也可以通过给卡片分组、维护多个分组计数列表的方式实现。

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