Flutter：如何动态修改已初始化Widget列表的颜色

你的问题核心是：预初始化的Widget实例不会在setState后自动更新状态。你在initState里调用_initMyList创建了所有列表项，此时Container的color是根据当时_counter的值固定下来的，后续setState更新_counter时，这些已经创建好的Widget不会重新计算颜色，自然看不到变化。

最简单的解决办法：在build方法里动态生成列表 #

把列表的生成逻辑移到build方法中，这样每次setState触发页面重建时，都会重新执行列表生成逻辑，使用最新的_counter值计算颜色。

修改后的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  // 改成返回列表的方法，不再提前存储Widget实例
  List<Widget> _buildMyList() {
    List<Widget> list = [];
    for (int i = 0; i < 5; i++) {
      Text text = Text("Item " + i.toString());
      GestureDetector gestureDetector = GestureDetector(onTap: _callback, child: text);
      Container container = Container(
        alignment: Alignment.center,
        child: gestureDetector,
        color: _counter % 2 == 1 ? Colors.green : Colors.red,
      );
      SizedBox sizedBox = SizedBox(width: 60, height: 40, child: container);
      list.add(sizedBox);
    }
    return list;
  }

  void _callback() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          // 直接调用_buildMyList生成最新的列表
          children: _buildMyList()
        ),
      ),
    );
  }
}

另一种方案：用StatefulWidget封装列表项（适合需要单独控制item的场景） #

如果需要保留列表项的引用，或者要实现点击单个item修改自身颜色的逻辑，可以把每个列表项封装成独立的StatefulWidget，让它能响应外部状态变化或管理自身状态。比如用ValueNotifier传递_counter的变化，每个列表项监听这个值来更新颜色。

不过针对你当前的需求（点击任意item切换所有item的颜色），第一种方案已经足够简洁高效。

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