Flutter 如何将Widget存入List<Widget>并实现数据驱动UI更新？

你当前的实现无法生效的核心原因是：Flutter中的Widget是不可变对象，你在initState中提前创建的Text实例已经把初始化时的数值写死了。后续修改_counters数组的值时，既没有同步更新t列表中存储的Text实例，setState触发重构建时也直接复用了旧的t列表，因此UI不会跟随数据更新。

方案1：保留单独维护Widget列表的写法 #

如果你的业务场景确实需要单独维护List<Widget> t，只需要在修改数据时同步更新t列表对应的组件即可，修改_incrementCounter方法如下：

void _incrementCounter() {
  setState(() {
    for (var i = 0; i < _counters.length; i++) {
      _counters[i]++;
      // 同步更新对应位置的Text组件
      t[i] = Text('${_counters[i]}');
    }
  });
}

方案2：遵循Flutter规范的推荐写法（更建议使用） #

Flutter的响应式设计理念是UI是状态的映射，不需要提前缓存Widget实例，每次状态变化时通过setState触发重构建，动态生成对应UI即可，和Vue的响应式更新逻辑本质上是一致的，只是实现方式不同。
修改代码如下：

1. 删掉类中提前定义的List<Text> t = [];变量
2. 修改build方法中Column的children属性，动态生成Text列表：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        // 直接根据最新的_counters动态生成Text列表
        children: _counters.map((count) => Text('$count')).toList(),
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

这种写法不需要手动维护Widget列表，代码更简洁，也不会出现数据和UI不同步的问题。

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