来自有状​​态父级的无状态小部件 dropdownButton 的设置状态

如何解决来自有状​​态父级的无状态小部件 dropdownButton 的设置状态

我有三个小部件，第一个是具有一些颜色属性的 LightBulb(stateless)。第二个是名为 LightColorSelector(stateless) 的小部件，它有一个 DropdownMenu，带有字符串类型项 Red、Green 和 Blue。而且，第三个类是 Classroom(stateful widget)，它是这两个类的父类。我的目标是设置该类的状态。 我需要在 Classroom 中设置这三种颜色的列表，当有人点击 LightColorSelector 项之一时，LightBulb 应该根据点击的颜色切换。但是，LightBulb 中的颜色始终返回 null。我认为它没有设置。实际上，我可能知道错误在哪里。我认为在 LightColorSelector 函数中有一个 onChanged 属性并且我没有将 value 设置到 func() 中。我在下面标记了我怀疑发生 mnistake 的地方。

import 'package:Flutter/material.dart';

// ignore: must_be_immutable
class LightBulb extends StatelessWidget {
  bool isLit;
  Color color;
  LightBulb(bool isLit,Color color) {
    this.isLit = isLit;
    this.color = color;
    print(color.toString());
  }

  Widget build(BuildContext context) {
    return Container(
      color: isLit ? color : Colors.red,padding: EdgeInsets.all(5),child: isLit ? Text('ON') : Text('OFF'),);
  }
}

class LightButton extends StatelessWidget {
  Function func;
  bool isLightOn;
  LightButton(Function func,bool iSLightOn) {
    this.func = func;
    this.isLightOn = iSLightOn;
  }
  String title() {
    if (isLightOn) return "Turn light off";
    return "Turn light on";
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 4,horizontal: 12),color: Colors.red,child: Container(
        color: Colors.blue,child: MaterialButton(
          textColor: Colors.white,onpressed: () => func(),child: Text(
            title(),style: TextStyle(color: Colors.white),),);
  }
}

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

class _ClassroomState extends State<Classroom> {
  bool isLightOn = false;
  String title = "Not set yet";
  List<Color> lightColor = [Colors.red,Colors.green,Colors.blue];
  Color color;
  String value;
  selectLightColor() {
    setState(() {
      if (value == 'Red') color = lightColor[0];
      if (value == 'Green') color = lightColor[1];
      if (value == 'Blue')
        color = lightColor[2];
      else
        color = Colors.Amber;
    });
  }

  onButtonpressed() {
    setState(() {
      isLightOn = !isLightOn;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.blue,child: Column(
          mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
            LightBulb(isLightOn,color),LightButton(onButtonpressed,isLightOn),LightColorSelector(selectLightColor),],);
  }
}

class LightColorSelector extends StatelessWidget {
  String initialVal = 'Red';
  Function func;
  LightColorSelector(Function func) {
    this.func = func;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),child: DropdownButton(
          value: initialVal,onChanged: (value) => func,// =========== Here the error occurs ==========================
          items: <String>['Red','Green','Blue']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,child: Text(value),);
          }).toList(),));
  }
}

样本输出，

解决方法

StatelessWidget 没有状态，因此您无法在无状态小部件中设置状态，这就是它称为无状态的原因。如果你想设置状态，你需要使用有状态的小部件