卡片组件与棋盘组件，谁应设为有状态组件？

首先明确：不需要将棋盘或卡片组件设为StatefulWidget——你已经用Card Provider来管理卡片状态，正确的做法是通过Provider的状态监听机制触发UI更新，而非依赖StatefulWidget的setState。

如果非要从二者里选，或者想理清逻辑：

• 若你的Card Provider管理的是所有卡片的集合状态（比如List<Playcard>），棋盘组件作为卡片的父容器，应该负责监听Provider的状态变化并更新子组件。即便硬要做Stateful，也是棋盘来持有状态监听逻辑，调用setState触发重建。
• 卡片组件本身应该是无状态的——它的UI完全由传入的Playcard实例的flipped值决定，不需要自己维护状态，只做纯展示和触发操作的工作。

具体实现参考 #

1. 先确保你的Card Provider用可监听的容器（比如ChangeNotifier），修改flipped后要调用notifyListeners()通知UI：

class CardProvider extends ChangeNotifier {
  List<Playcard> _cards = [];

  List<Playcard> get cards => _cards;

  void flipCard(Playcard card) {
    card.flipped = !card.flipped;
    notifyListeners(); // 必须调用，触发UI更新
  }
}

2. 棋盘组件用Consumer监听Provider状态，自动重建卡片列表：

class BoardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CardProvider>(
      builder: (context, provider, child) {
        return GridView.count(
          crossAxisCount: 4,
          children: provider.cards.map((card) => CardWidget(card: card)).toList(),
        );
      },
    );
  }
}

3. 卡片组件作为无状态组件，根据flipped值渲染内容：

class CardWidget extends StatelessWidget {
  final Playcard card;

  const CardWidget({required this.card});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Provider.of<CardProvider>(context, listen: false).flipCard(card);
      },
      child: Container(
        padding: EdgeInsets.all(16),
        child: Text(card.flipped ? card.back : card.front),
        // 这里可以加翻面动画、样式等
      ),
    );
  }
}

为什么不推荐用StatefulWidget？ #

• 用Provider管理状态能实现UI和逻辑分离，避免StatefulWidget的状态分散，代码更易维护。
• 如果让卡片组件做Stateful，每个卡片自己维护flipped状态，会和Provider的全局状态冲突，导致状态不一致。

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