如何根据变量值更新Flutter Widget状态？（Square组件场景）

问题场景 #

我尝试直接修改Square对象的alive变量来更新UI，但完全没效果。只有把列表里的Square实例换掉才能正常更新，但这不是我想要的——我希望只改对象的alive值，UI就能跟着变。

问题根源 #

问题出在这两点：

• Square是StatefulWidget，但你直接修改的是Widget类的字段。StatefulWidget设计上是不可变对象，Flutter不会监听它的字段变化来触发子组件重绘。
• 就算你硬改了Square的alive字段，对应的_SquareState也收不到任何通知，自然不会重新执行build方法更新UI。

可行方案 #

方案1：用ValueNotifier做轻量状态监听 #

ValueNotifier是Flutter自带的轻量状态管理工具，专门用来监听单个值的变化，刚好适合这个场景。

修改Square组件

class Square extends StatefulWidget {
  final ValueNotifier<bool> aliveNotifier;
  
  // 不再直接传bool，而是传ValueNotifier
  Square({super.key, required bool alive}) : aliveNotifier = ValueNotifier(alive);

  @override
  State<Square> createState() => _SquareState();
}

class _SquareState extends State<Square> {
  late final VoidCallback _listener;

  @override
  void initState() {
    super.initState();
    // 给ValueNotifier加监听：值一变就调用setState更新UI
    _listener = () => setState(() {});
    widget.aliveNotifier.addListener(_listener);
  }

  @override
  void dispose() {
    // 销毁时移除监听，防止内存泄漏
    widget.aliveNotifier.removeListener(_listener);
    super.dispose();
  }

  Color getColor() {
    // 从ValueNotifier里拿当前值
    return widget.aliveNotifier.value ? Colors.grey[800]! : Colors.grey[100]!;
  }

  @override
  Widget build(BuildContext context) {
    return Container(color: getColor());
  }
}

修改父组件的_increment方法

void _increment() {
  gol.tick();
  // 直接更新ValueNotifier的值就行，不用替换Square实例
  for (var x = 0; x < gol.cols; x++) {
    for (var y = 0; y < gol.rows; y++) {
      // 注意：之前x+y的索引计算有问题，会重复，改成x*gol.rows+y才对
      final index = x * gol.rows + y;
      squares[index].aliveNotifier.value = gol.grid.get(x, y);
    }
  }
  // 这里不用调用setState，Square内部会自己监听更新
}

方案2：把Square改成无状态组件，父组件统一管理状态 #

如果你的Square逻辑简单，直接改成StatelessWidget更省事，由父组件通过setState触发重绘：

修改Square为无状态组件

class Square extends StatelessWidget {
  final bool alive;
  
  const Square({super.key, required this.alive});

  Color getColor() => alive ? Colors.grey[800]! : Colors.grey[100]!;

  @override
  Widget build(BuildContext context) {
    return Container(color: getColor());
  }
}

修改父组件逻辑

父组件别存Square实例了，存状态列表就行：

// 父组件里定义状态列表，比如10x10网格就是100个bool值
List<bool> _squareStates = List.generate(100, (_) => false);

void _increment() {
  setState(() {
    gol.tick();
    for (var x = 0; x < gol.cols; x++) {
      for (var y = 0; y < gol.rows; y++) {
        final index = x * gol.rows + y;
        _squareStates[index] = gol.grid.get(x, y);
      }
    }
  });
}

// GridView里动态生成Square
GridView.count(
  physics: const NeverScrollableScrollPhysics(),
  padding: const EdgeInsets.all(10),
  crossAxisCount: 10,
  children: List.generate(_squareStates.length, (index) {
    return Square(alive: _squareStates[index]);
  })
)

注意事项 #

• 方案1适合需要单独控制每个Square更新的场景，不用父组件整体重绘，性能更好；
• 方案2更简单，小网格场景下完全够用，虽然父组件setState会触发所有子组件重绘，但开销可以忽略；
• 之前的x+y索引计算有bug，不同的(x,y)会算出同一个索引，一定要改成x*行数+y才能对应正确的网格位置。

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