Flutter主组件调用setState后执行build但界面未更新问题排查

这是一款基于网格方块的记忆猜谜小游戏，点击悬浮操作按钮会触发「新游戏」弹窗，点击「是」会调用主组件的setState()。通过print日志可见所有Tile组件已重新构建，但界面仍显示旧网格数值，恳请帮忙排查问题所在。

Main.dart 核心State代码 #

class MemHomePageState extends State<MemHomePage> {

  GameBoard gameBoard = GameBoard();
  GameController? gameController;
  int gameCount = 0, winCount = 0;

  @override
  void initState() {
    super.initState();
    gameController = GameController(gameBoard, this);
  }

  @override
  Widget build(BuildContext context) {
    if (kDebugMode) {
      print("MemHomepageState::build");
    }
    gameBoard.newGame(); // Resets secrets and grids
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GridView.count(
          crossAxisCount: Globals.num_columns,
          children: List.generate(Globals.num_columns * Globals.num_rows, (index) {
            int x = index~/Globals.NR, y = index%Globals.NR;
            int secret = gameBoard.secretsGrid![x][y];
            var t = Tile(x, y, Text('$secret'), gameController!);
            gameBoard.tilesGrid![x].add(t);
            if (kDebugMode) {
              print("Row $x is ${gameBoard.secretsGrid![x]} ${gameBoard.tilesGrid![x][y].secret}");
            }
            return t;
          }),
        ),
        // Text("You have played $gameCount games and won $winCount."),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => newGameDialog("Start a new game?"),
        tooltip: 'New game?',
        child: const Icon(Icons.refresh_outlined),
      ),
    );
  }

  /** Called from the FAB and also from GameController "won" logic */
  void newGameDialog(String message) {
    showDialog<void>(
        context: context,
        barrierDismissible: false, // means the user must tap a button to exit the Alert Dialog
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("New game?"),
            content: Text(message),
            //),
            actions: <Widget>[
              TextButton(
                child: const Text('Yes'),
                onPressed: () {
                  setState(() {
                    gameCount++;
                  });
                  Navigator.of(context).pop();
                },
              ),
              TextButton(
                child: const Text('No'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        }
    );
  }
}

Tile组件代码 #

import 'package:flutter/material.dart';
import 'gamecontroller.dart';
    
enum TileMode {
      SHOWN,
      HIDDEN,
      CLEARED,
    }
    
/// Represents one Tile in the game
class Tile extends StatefulWidget {
  final int x, y;
  final Widget secret;
  final GameController gameController;
  TileState? tileState;

  Tile(this.x, this.y, this.secret, this.gameController, {super.key});

  @override
  State<Tile> createState() => TileState(x, y, secret);
    
  setCleared() {
    tileState!.setCleared();
  }
}
    
class TileState extends State<Tile> {
  final int x, y;
  final Widget secret;
  TileMode tileMode = TileMode.HIDDEN;

  TileState(this.x, this.y, this.secret);

  _unHide() {
    setState(() => tileMode = TileMode.SHOWN);
    widget.gameController.clicked(widget);
  }

  reHide() {
    print("rehiding");
    setState(() => tileMode = TileMode.HIDDEN);
  }

  setCleared() {
    print("Clearing");
    setState(() => tileMode = TileMode.CLEARED);
  }

  _doNothing() {
    //
  }

  @override
  Widget build(BuildContext context) {
    switch(tileMode) {
      case TileMode.HIDDEN:
        return ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.teal,
            ),
            onPressed: _unHide,
            child: Text(''));
      case TileMode.SHOWN:
        return ElevatedButton(
            onPressed: _doNothing,
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.green,
            ),
            child: secret);
      case TileMode.CLEARED:
        return ElevatedButton(
            onPressed: _doNothing,
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.black12,
            ),
            child: const Icon(Icons.check));
    }
  }
}

问题根源 #

1. Tile State复用导致数据未更新：Flutter重建组件时，若未设置唯一Key，会复用旧的State实例。TileState中的secret是构造时传入的final变量，旧State不会读取新Tile的secret值，导致界面显示旧数据。
2. 游戏初始化逻辑位置错误：gameBoard.newGame()放在build方法中，每次组件重建都会重置游戏状态，不符合Flutter状态管理规范，还会导致状态混乱。
3. TileState依赖本地变量而非Widget属性：TileState自己存储secret，未关联到Widget的secret属性，即使Widget更新，State也无法感知。

修复步骤 #

1. 给Tile添加唯一Key #

在Main.dart生成Tile时，使用包含游戏次数和坐标的唯一Key，确保新游戏时Flutter识别为新组件，创建新State：

var t = Tile(x, y, Text('$secret'), gameController!, key: Key('tile-$x-$y-$gameCount'));

2. 调整游戏初始化逻辑位置 #

将gameBoard.newGame()从build方法移到新游戏确认的回调中，避免不必要的状态重置：

// 新游戏弹窗的"Yes"回调修改为：
TextButton(
  child: const Text('Yes'),
  onPressed: () {
    setState(() {
      gameCount++;
      gameBoard.newGame(); // 此处执行新游戏初始化
    });
    Navigator.of(context).pop();
  },
),

同时删除build方法中的gameBoard.newGame();代码。

3. 修改TileState的数据源 #

让TileState依赖Widget的secret属性，而非本地存储的final变量：

• 修改Tile的createState方法，移除secret参数：

@override
State<Tile> createState() => TileState(x, y);

• 修改TileState类，删除本地secret变量，使用widget.secret：

class TileState extends State<Tile> {
  final int x, y;
  TileMode tileMode = TileMode.HIDDEN;

  TileState(this.x, this.y);

  // 其他方法保持不变

  @override
  Widget build(BuildContext context) {
    switch(tileMode) {
      case TileMode.HIDDEN:
        return ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.teal,
            ),
            onPressed: _unHide,
            child: Text(''));
      case TileMode.SHOWN:
        return ElevatedButton(
            onPressed: _doNothing,
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.green,
            ),
            child: widget.secret); // 改为使用widget.secret
      case TileMode.CLEARED:
        return ElevatedButton(
            onPressed: _doNothing,
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.black12,
            ),
            child: const Icon(Icons.check));
    }
  }
}

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