Flutter：如何实现点击卡片按钮仅更新对应卡片数值加1

你当前代码中所有卡片共用父组件_MainBlockState里的同一个singleCounter计数器变量，点击任意卡片的按钮修改的都是这个全局唯一的数值，自然所有卡片的显示值会同步变化。

该方案下每张卡片自己管理内部计数，父组件不需要参与计数逻辑，新增卡片时无需额外调整父组件代码，适配你后期多卡片的需求。
修改后的完整代码如下：

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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: const [
            Expanded(child: MyCard(myName: 'Card 01')),
            Expanded(child: MyCard(myName: 'Card 02')),
            Expanded(child: MyCard(myName: 'Card 03')),
            // 后续新增卡片直接在此处添加即可，不需要额外配置
          ],
        ),
      ),
    );
  }
}

// 修改为StatefulWidget，自己维护计数状态
class MyCard extends StatefulWidget {
  final String myName;
  const MyCard({super.key, required this.myName});

  @override
  State<MyCard> createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  // 每个卡片独立的计数器，互相不影响
  int _singleCounter = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(30.0),
      color: const Color(0xFF4C93C7),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            child: Text(
              _singleCounter.toString(),
            ),
          ),
          Center(
            child: GestureDetector(
              onTap: () {
                // 仅修改当前卡片自己的计数器
                setState(() {
                  _singleCounter++;
                });
              },
              child: Text(
                'Button ${widget.myName}',
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如果你的业务逻辑需要父组件统一读取/修改所有卡片的计数，可以用列表存储每个卡片的计数值，通过下标区分不同卡片：
修改后的核心代码如下：

class _MainBlockState extends State<MainBlock> {
  // 用列表存储每个卡片的计数，下标对应卡片序号
  List<int> counters = List.generate(3, (index) => 0);

  void cardBrain(int index) {
    counters[index]++;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: MyCard(
                myName: 'Card 01',
                singleCounter: counters[0],
                button: () {
                  setState(() {
                    cardBrain(0);
                  });
                },
              ),
            ),
            Expanded(
              child: MyCard(
                myName: 'Card 02',
                singleCounter: counters[1],
                button: () {
                  setState(() {
                    cardBrain(1);
                  });
                },
              ),
            ),
            Expanded(
              child: MyCard(
                myName: 'Card 03',
                singleCounter: counters[2],
                button: () {
                  setState(() {
                    cardBrain(2);
                  });
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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