Flutter点击按钮向GridView添加Container组件问题求助

这个问题的核心原因是你把存储GridView子元素的列表定义成了全局变量，而没有放在State类内部作为状态变量来管理，导致Flutter的状态更新机制无法正确感知列表的变化。

当你调用setState时，Flutter会重新执行当前State的build方法，但由于GridView.count的children参数引用的是同一个全局列表对象，Flutter的diff算法会判定这个参数没有发生变化（因为对象引用没变），所以不会重新渲染GridView的内容——哪怕你已经给列表添加了新元素。

解决方案1：将列表移到State类内部作为状态变量 #

把gridChild从全局作用域移到_GridState类里面，让它成为State的成员变量。这样每次调用setState时，Flutter会正确识别到状态发生了变化，进而重新构建GridView并渲染新的元素。

修改后的完整代码：

import 'package:flutter/material.dart';

class Grid extends StatefulWidget {
  @override
  _GridState createState() => _GridState();
}

class _GridState extends State<Grid> {
  // 将gridChild改为State类的成员变量
  List<Widget> gridChild = [
    Container(
      margin: EdgeInsets.all(8.0),
      width: 30.0,
      height: 50.0,
      color: Colors.green,
    ),
    Container(
      margin: EdgeInsets.all(8.0),
      width: 30.0,
      height: 50.0,
      color: Colors.green,
    ),
    Container(
      margin: EdgeInsets.all(8.0),
      width: 30.0,
      height: 50.0,
      color: Colors.green,
    ),
    Container(
      margin: EdgeInsets.all(8.0),
      width: 30.0,
      height: 50.0,
      color: Colors.green,
    ),
    Container(
      margin: EdgeInsets.all(8.0),
      width: 30.0,
      height: 50.0,
      color: Colors.green,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.red,
        child: Icon(Icons.add),
        onPressed: () {
          setState(() {
            gridChild.add(Container(
              margin: EdgeInsets.all(8.0),
              width: 30.0,
              height: 50.0,
              color: Colors.green,
            ));
            print(gridChild.length);
          });
        },
      ),
      body: Container(
        child: GridView.count(
          crossAxisCount: 2,
          children: gridChild,
        ),
      ),
    );
  }
}

解决方案2：创建列表副本传递给children（适合保留全局变量的场景） #

如果你因为某些原因必须保留全局的gridChild，可以在GridView.count的children参数中创建一个新的列表副本。这样每次setState时，children的引用会发生变化，Flutter会判定这部分需要重新渲染。

只需要修改body部分的代码：

body: Container(
  child: GridView.count(
    crossAxisCount: 2,
    children: [...gridChild], // 使用展开运算符创建新的列表副本
  ),
),

补充说明 #

第一种方案是更推荐的做法，因为它遵循了Flutter中状态应该由对应的State类管理的原则，代码结构更清晰，也更容易维护。第二种方案可以作为临时的 workaround，但长期来看还是建议把状态放到State内部。

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