如何从 Flutter 中的另一个小部件更改 DropdownButton 值？答案

【问题标题】：How can I change DropdownButton values from another widget in Flutter?如何从 Flutter 中的另一个小部件更改 DropdownButton 值？
【发布时间】：2020-05-24 16:56:30
【问题描述】：

我在 Stateless wigdet 中使用了那个 DropdownButton，但我想从另一个 Stateful 小部件中更改那个 DropdownButton 值。同样使用 DropdownButton 值，我想更改另一个无状态小部件的容器颜色。

这是我的第一个无状态小部件

  List<String> dropdownValues = ['red', 'green', 'blue'];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DropdownButton(
        items: dropdownValues
            .map((value) => DropdownMenuItem(
                  child: Text(value),
                  value: value,
                ))
            .toList(),
        onChanged: (String newValue) {},
        isExpanded: false,
        hint: Text('Chose Color'),
        selectedItemBuilder: ,
      ),
    );
  }
}

这是我的有状态小部件

  bool isLightOn = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      padding: new EdgeInsets.all(5.0),
      child: Column(
        children: <Widget>[
          LightBulb(
            isLightOn: isLightOn,
          ),
          LightButton(
            isLightOn: isLightOn,
            onButtonPress: onButtonPress,
          ),
          LightColorSelector(),
        ],
      ),
    );
  }

  void onButtonPress() {
    if (isLightOn == false) {
      setState(() {
        isLightOn = true;
      });
    } else {
      setState(() {
        isLightOn = false;
      });
    }
  }
}

如何处理这些问题以及如何操作 DropdownButton 值？同样，我想通过更改灯泡的容器颜色来反映 DropdownButton 值。

这是灯泡类

  final bool isLightOn;

  LightBulb({this.isLightOn});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: isLightOn == false ? Colors.red : Colors.green,
      padding: EdgeInsets.all(5.0),
      child: isLightOn == false ? Text("OFF") : Text("ON"),
    );
  }
}

【问题讨论】：

尝试使用提供程序包，如果不是，您可以很容易地声明有状态类的全局变量并使用它来更改另一个类的状态'

标签： flutter flutter-layout

【解决方案1】：

这是一个完整的工作示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> dropdownValues = ['red', 'green', 'blue'];

  String selected;
  Color color;

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(children: <Widget>[
        DropdownButton<String>(
          items: dropdownValues
              .map((value) => DropdownMenuItem(
                    child: Text(value),
                    value: value,
                  ))
              .toList(),
          onChanged: (String newValue) {
            setState(() {
              selected = newValue;
              if (newValue == "red") color = Colors.red;
              if (newValue == "green") color = Colors.green;
              if (newValue == "blue") color = Colors.blue;
            });
          },
          //isExpanded: false,
          hint: Text('Chose Color'),
          //selectedItemBuilder: ,
        ),
        Container(
          color: color != null ? color : Colors.black,
          padding: EdgeInsets.all(5.0),
          child: selected != null ? Text(selected) : Text("OFF", style: TextStyle(color: Colors.white)),
        )
      ]),
    );
  }
}

【讨论】：