Flutter 有状态父组件如何管理无状态子组件DropdownButton状态实现选色控灯

本次实现的三个联动组件分别为：

• 带颜色属性的无状态组件LightBulb
• 选项为Red/Green/Blue的下拉选择无状态组件LightColorSelector
• 承载两者的父级有状态组件Classroom
  核心需求为父组件统一管理颜色状态，下拉选项切换时LightBulb同步更新显示颜色，当前实际异常为LightBulb接收的color参数始终为null，状态无更新。

结合代码标注的异常位置，共有4处核心错误：

1. 下拉回调完全失效
   LightColorSelector中onChanged的实现为onChanged: (value) => func，既没有执行func的调用，也没有把下拉选中的新值传递给回调，等于用户操作下拉时没有触发任何父组件的状态更新逻辑。
2. 父组件状态更新方法缺入参
   Classroom内部定义的selectLightColor是无参方法，依赖的成员变量String value从未被赋值，一直保持初始null值，后续的颜色匹配逻辑完全无法命中正确分支。
3. 条件判断逻辑错误
   selectLightColor的分支判断缺失大括号，代码逻辑实际为：

if (value == 'Red') color = lightColor[0];
if (value == 'Green') color = lightColor[1];
if (value == 'Blue') color = lightColor[2];
else color = Colors.amber;

当value为Red或Green时，都会走到最后一个else分支，将color赋值为amber，前两个分支的赋值会被直接覆盖。
4. 下拉选中态无法同步
LightColorSelector是无状态组件，内部的initialVal是局部变量，即使修改也不会触发组件重建，下拉框的选中显示状态无法和实际选中值保持一致。

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Classroom()));

class LightBulb extends StatelessWidget {
  final bool isLit;
  final Color color;
  const LightBulb({super.key, required this.isLit, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: isLit ? color : Colors.grey,
      padding: const EdgeInsets.all(12),
      child: Text(isLit ? 'ON' : 'OFF', style: const TextStyle(color: Colors.white)),
    );
  }
}

class LightButton extends StatelessWidget {
  final Function() func;
  final bool isLightOn;
  const LightButton({super.key, required this.func, required this.isLightOn});

  String get title => isLightOn ? "Turn light off" : "Turn light on";

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
      child: ElevatedButton(
        onPressed: func,
        child: Text(title),
      ),
    );
  }
}

class Classroom extends StatefulWidget {
  @override
  _ClassroomState createState() => _ClassroomState();
}

class _ClassroomState extends State<Classroom> {
  bool isLightOn = false;
  final List<Color> lightColor = [Colors.red, Colors.green, Colors.blue];
  Color color = Colors.red;
  String selectedColorVal = 'Red';

  void selectLightColor(String newVal) {
    setState(() {
      selectedColorVal = newVal;
      if (newVal == 'Red') color = lightColor[0];
      if (newVal == 'Green') color = lightColor[1];
      if (newVal == 'Blue') color = lightColor[2];
    });
  }

  void onButtonPressed() {
    setState(() {
      isLightOn = !isLightOn;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            LightBulb(isLit: isLightOn, color: color),
            LightButton(func: onButtonPressed, isLightOn: isLightOn),
            LightColorSelector(
              currentVal: selectedColorVal,
              onColorChanged: selectLightColor,
            ),
          ],
        ),
      ),
    );
  }
}

class LightColorSelector extends StatelessWidget {
  final String currentVal;
  final Function(String) onColorChanged;
  const LightColorSelector({super.key, required this.currentVal, required this.onColorChanged});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: DropdownButton<String>(
        value: currentVal,
        onChanged: (newVal) {
          if (newVal != null) onColorChanged(newVal);
        },
        items: ['Red', 'Green', 'Blue']
            .map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      ),
    );
  }
}

• 打通传值链路：下拉选中时把新值作为参数传入父组件的状态更新方法，setState触发后同步更新灯泡颜色和下拉选中态
• 修复条件判断逻辑：所有颜色匹配分支独立判断，不再出现赋值被覆盖的问题
• 状态全部上移：下拉当前选中值放到父组件统一管理，避免无状态组件局部变量修改不触发重建的问题
• 给color设置初始默认值，避免初始渲染时color为null导致的空指针异常

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