Flutter 来自有状态父级的无状态小部件下拉按钮的设置状态

我有三个小部件第一个是灯泡（无状态），它有一些颜色属性。第二个是名为

LightColorSelector（无状态）

的小部件，它有一个

下拉菜单

，带有字符串类型的项目

红色

、

绿色

和

蓝色

。第三个类是

教室（有状态小部件）

，它是这两个类的父类。我的目标是从那一类中确定各州。 我需要在

教室

内设置三种颜色的列表，当有人单击

LightColorSelector

项目时，

灯泡

应根据单击的颜色进行切换。但是，

灯泡内的颜色始终返回空值。我想它没有定下来。事实上，我可能知道哪里错了。我认为在
LightColorSelector
函数中有一个
onChanged
属性，我没有将
值设置为
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,
        padding: EdgeInsets.all(5),
        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(),
        ));
  }
}


导入“包装：颤振/材料.省道”；
//忽略：必须是不可变的
类LightBulb扩展了一个小部件{
布尔岛；
颜色；
灯泡（布尔伊斯利特，彩色）{
this.isLit=isLit；
这个颜色=颜色；
打印（color.toString（））；
}
小部件构建（构建上下文）{
返回容器(
颜色：isLit？颜色：Colors.red，
填充：边缘设置。全部（5），
子项：isLit？Text（'ON'）：Text（'OFF'），
);
}
}
类LightButton扩展了无状态小部件{
函数func；
布尔伊斯莱顿；
LightButton（功能func，布尔iSLightOn）{
this.func=func；
this.isLightOn=isLightOn；
}
字符串标题（）{
如果（isLightOn）返回“关灯”；
返回“打开灯”；
}
@凌驾
小部件构建（构建上下文）{
返回容器(
填充：边缘组。对称（垂直：4，水平：12），
颜色：颜色，红色，
子：容器(
颜色：颜色，蓝色，
子：材质按钮(
textColor:Colors.white，
onPressed:（）=>func（），
子：文本(
title（），
样式：TextStyle（颜色：Colors.white），
),
),
),
);
}
}
类教室扩展了StatefulWidget{
@凌驾
_ClassroomState createState（）；
}
类_ClassroomState扩展状态{
bool-isLightOn=false；
String title=“尚未设置”；
List lightColor=[Colors.red，Colors.green，Colors.blue]；
颜色；
字符串值；
选择LightColor（）{
设置状态（）{
如果（值=='Red'）color=lightColor[0]；
如果（值=‘绿色’）颜色=浅颜色[1]；
如果（值=‘蓝色’）
颜色=浅颜色[2]；
其他的
颜色=颜色。琥珀色；
});
}
onButtonPressed（）{
设置状态（）{
isLightOn=！isLightOn；
});
}
@凌驾
小部件构建（构建上下文）{
返回中心(
子：容器(
颜色：颜色，蓝色，
填充：边缘设置。全部（5），
子：列(
mainAxisAlignment:mainAxisAlignment.center，
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
灯泡（isLightOn，彩色），
LightButton（ON按钮按下，isLightOn），
LightColor选择器（选择LightColor），
],
),
),
);
}
}
类LightColorSelector扩展了无状态小部件{
字符串initialVal='Red'；
函数func；
LightColorSelector（函数func）{
this.func=func；
}
@凌驾
小部件构建（构建上下文）{
返回容器(
填充：边缘设置。全部（10），
孩子：下拉按钮(
值：initialVal，
onChanged:（value）=>func，//=============此处发生错误==========================
项目：[“红色”、“绿色”、“蓝色”]
.map（（字符串值）{
返回下拉菜单项(
价值：价值，
子项：文本（值），
);
}).toList（），
));
}
}

样本输出

无状态小部件没有状态，所以您不能在无状态小部件中设置状态，这就是为什么它被称为无状态。如果要设置状态，需要使用有状态小部件
您可以复制下面的粘贴运行完整代码

步骤1：在
\u ClassroomState

class _ClassroomState extends State<Classroom> {
  ..
  Color color = Colors.red;
  String value = 'Red';

第三步：
LightColorSelector
constructor
和
onChanged
需要设置
initialVal
和
onChanged
需要调用
func（值）

class LightColorSelector扩展了无状态小部件{
字符串初始值；
函数func；
LightColorSelector（函数func，字符串值）{
this.func=func；
this.initialVal=值；
}
@凌驾
小部件构建（构建上下文）{
返回容器(
填充：边缘设置。全部（10），
孩子：下拉按钮(
值：initialVal，
一旦更改：（值）{
initialVal=值；
func（值）；
},

工作演示


完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: Classroom()),
    );
  }
}

// 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 = Colors.red;
  String value = 'Red';

  selectLightColor(String selectedValue) {
    setState(() {
      value = selectedValue;
      if (selectedValue == 'Red') {
        color = lightColor[0];
      } else if (selectedValue == 'Green') {
        color = lightColor[1];
      } else if (selectedValue == 'Blue')
        color = lightColor[2];
      else
        color = Colors.amber;
    });
  }

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

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

class LightColorSelector extends StatelessWidget {
  String initialVal;
  Function func;

  LightColorSelector(Function func, String value) {
    this.func = func;
    this.initialVal = value;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        child: DropdownButton<String>(
          value: initialVal,
          onChanged: (value) {
            initialVal = value;

            func(value);
          },
          items: <String>['Red', 'Green', 'Blue']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ));
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
家：脚手架（主体：教室（）），
);
}
}
//忽略：必须是不可变的
类LightBulb扩展了一个小部件{
布尔岛；
颜色；
灯泡（布尔伊斯利特，彩色）{
this.isLit=isLit；
这个颜色=颜色；
打印（color.toString（））；
}
小部件构建（构建上下文）{
返回容器(
颜色：isLit？颜色：Colors.red，
填充：边缘设置。全部（5），
子项：isLit？Text（'ON'）：Text（'OFF'），
);
}
}
类LightButton扩展了无状态小部件{
函数func；
布尔伊斯莱顿；
class LightColorSelector extends StatelessWidget {
  String initialVal;
  Function func;

  LightColorSelector(Function func, String value) {
    this.func = func;
    this.initialVal = value;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        child: DropdownButton<String>(
          value: initialVal,
          onChanged: (value) {
            initialVal = value;

            func(value);
          },

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: Classroom()),
    );
  }
}

// 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 = Colors.red;
  String value = 'Red';

  selectLightColor(String selectedValue) {
    setState(() {
      value = selectedValue;
      if (selectedValue == 'Red') {
        color = lightColor[0];
      } else if (selectedValue == 'Green') {
        color = lightColor[1];
      } else if (selectedValue == 'Blue')
        color = lightColor[2];
      else
        color = Colors.amber;
    });
  }

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

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

class LightColorSelector extends StatelessWidget {
  String initialVal;
  Function func;

  LightColorSelector(Function func, String value) {
    this.func = func;
    this.initialVal = value;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(10),
        child: DropdownButton<String>(
          value: initialVal,
          onChanged: (value) {
            initialVal = value;

            func(value);
          },
          items: <String>['Red', 'Green', 'Blue']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ));
  }
}