Flutter中向列表变量添加Widget后骰子值无法更新的问题

问题原因 #

• 当你把dice()生成的Widget直接存入diceRow列表时，这些Widget在被添加的那一刻就固定了当时的diceVal值，后续setState更新diceV1/diceV2/diceV3时，列表里的旧Widget不会重新构建，所以显示的数值不会变化。
• 而直接在Row(children: [dice(diceV1),...])中使用时，每次setState触发build方法，都会重新调用dice()生成新的Widget，自然会使用最新的数值。

解决方案 #

不要存储Widget实例，而是存储骰子的数值数据，在build阶段根据数据动态生成Widget。这样每次状态变化时，build都会重新生成对应的骰子组件，确保显示最新数值。

修改后的代码：

import 'dart:math';

import 'package:flutter/material.dart';

class AskCom extends StatefulWidget {
  const AskCom({super.key});

  @override
  State<AskCom> createState() => _AskComState();
}

class _AskComState extends State<AskCom> {
  // 存储骰子数值，替代原Widget列表
  List<int> diceValues = [1, 2, 3];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 根据数值动态生成骰子组件
          Row(
            children: diceValues.map((val) => dice(val)).toList(),
          ),
          const SizedBox(height: 20),
          SizedBox(
            width: 200,
            child: ElevatedButton(
              onPressed: () {
                setState(() {
                  // 更新所有现有骰子的数值
                  for (int i = 0; i < diceValues.length; i++) {
                    diceValues[i] = Random().nextInt(6) + 1;
                  }
                });
              },
              child: const Text('ROLL'),
            ),
          ),
          SizedBox(
            width: 200,
            child: ElevatedButton(
              onPressed: () {
                setState(() {
                  // 添加三个随机数值的骰子
                  diceValues.addAll([
                    Random().nextInt(6) + 1,
                    Random().nextInt(6) + 1,
                    Random().nextInt(6) + 1,
                  ]);
                });
              },
              child: const Text('ADD'),
            ),
          )
        ],
      ),
    );
  }

  Expanded dice(int diceVal) {
    return Expanded(
      flex: 2,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Image.asset(
          'assets/images/dice/dice$diceVal.png',
          color: Colors.red,
        ),
      ),
    );
  }
}

关键修改说明 #

1. 数据与UI分离：将List<Widget> diceRow改为List<int> diceValues，只存储骰子的数值状态，而非组件实例。
2. 动态构建UI：通过diceValues.map((val) => dice(val)).toList()在build方法中动态生成骰子组件，确保每次状态更新时都会使用最新数值重新构建。
3. ROLL逻辑优化：遍历数值列表逐个更新随机值，触发setState后所有骰子都会同步更新显示。
4. ADD逻辑优化：直接向数值列表添加新的随机值，build时自动生成对应的新骰子组件，避免重复添加旧组件的问题。

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