Flutter：如何在“DropdownButton”类中集成函数并将值传递给父类

Question

我正在尝试将 子类（实现具有四个值的 DropdownButton：2、4、6 和 8）集成到应该显示一些内容的父类取决于选择的值。

如果用户单击下拉值之一，即：2，主类上的小部件应显示蓝色容器。如果用户单击值 4，它应该显示一个红色的容器，依此类推。

我的想法是沿着这些思路走的，实现一个读取所选值的简单方法，调用适当的类（ClassTwo，ClassThree ...）将其内容传递给父类，但我不知道该怎么做。我的 renderWidget() 函数仍未使用且更完整，建议将其删除。

有人可以帮忙吗？

子类（DropdownMenuButton）

class VorschlageDropdownMenu extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<VorschlageDropdownMenu> {
  List<ListItem> _dropdownItems = [
    ListItem(1, "2"),
    ListItem(2, "4"),
    ListItem(3, "6"),
    ListItem(4, "8"),
  ];

  List<DropdownMenuItem<ListItem>> _dropdownMenuItems;
  ListItem _selectedItem;

  void initState() {
    super.initState();
    _dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);
    _selectedItem = _dropdownMenuItems[0].value;
  }

  List<DropdownMenuItem<ListItem>> buildDropDownMenuItems(List listItems) {
    List<DropdownMenuItem<ListItem>> items = List();
    for (ListItem listItem in listItems) {
      items.add(
        DropdownMenuItem(
          child: Text(listItem.name),
          value: listItem,
        ),
      );
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Container(
        padding: const EdgeInsets.only(left: 10.0, right: 10.0),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            color: kWidgetBacgroundColor,
            border: Border.all()),
        child: DropdownButtonHideUnderline(
          child: DropdownButton(
              value: _selectedItem,
              items: _dropdownMenuItems,
              onChanged: (value) {
                setState(() {
                  _selectedItem = value;
                  renderWidget() {
                    if (value == "2")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForZwei(),
                        ),
                      );
                    else if (value == "4")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForVier(),
                        ),
                      );
                    else if (value == "6")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForSechs(),
                        ),
                      );
                    else if (value == "8")
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context) => MenuForAcht(),
                        ),
                      );
                  }
                });
              }),
        ),
      ),
    );
  }
}

class ListItem {
  int value;
  String name;

  ListItem(this.value, this.name);
}

应显示所选值的父类

class VorschlageZutaten extends StatelessWidget {
  const VorschlageZutaten({
    Key key,
    this.renderWidget,
  }) : super(key: key);

  final Function renderWidget;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(bottom: 50, top: 20),
            ),
            Text(
              "Für ",
              style: TextStyle(
                color: kPrimaryHeaderColor.withOpacity(0.6),
                fontSize: (20.0),
                fontWeight: FontWeight.w600,
              ),
            ),
            Container(height: 40, child: VorschlageDropdownMenu()),
            Text(
              " Personen:",
              style: TextStyle(
                color: kPrimaryHeaderColor.withOpacity(0.6),
                fontSize: (20.0),
                fontWeight: FontWeight.w600,
              ),
            ),
          ],
        ),
        Container(
          child: renderWidget(),
        ),
      ],
    );
  }
}

Answer 1

我想我已经阅读了所有可用的文档并查看了所有示例，因此我不得不重新设计 VorschlageDropdownMenu() 类以达到预期的效果。这是主类现在的样子：

class VorschlageDropdownMenu extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _VorschlageDropdownMenuState();
  }
}

class _VorschlageDropdownMenuState extends State<VorschlageDropdownMenu> {
  String ddValue;

  @override
  void initState() {
    super.initState();
    ddValue = "ZWEI";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(50.0),
        child: AppBar(
          elevation: 0,
          backgroundColor: kWidgetBacgroundColor,
          title: Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  Text(
                    "Für ",
                    style: TextStyle(
                      color: kPrimaryHeaderColor.withOpacity(0.6),
                      fontSize: (20.0),
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(left: 10.0, right: 10.0),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: kWidgetBacgroundColor,
                        border: Border.all()),
                    child: DropdownButtonHideUnderline(
                      child: new DropdownButton(
                      iconSize: 0.0,
                        value: ddValue, //Default value
                        items: <DropdownMenuItem>[
                          new DropdownMenuItem(
                            value: "ZWEI",
                            child: new Text(
                              'ZWEI',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          new DropdownMenuItem(
                            value: "VIER",
                            child: new Text('VIER',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          new DropdownMenuItem(
                            value: "SECHS",
                            child: new Text('SECHS',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                          new DropdownMenuItem(
                            value: "ACHT",
                            child: new Text('ACHT',
                              style: TextStyle(
                                color: kPrimaryHeaderColor.withOpacity(0.6),
                                fontSize: (17.0),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                        ],
                        onChanged: (value) {
                          ddValue = value;
                          setState(() {});
                        },
                      ),
                    ),
                  ),
                  Text(
                    " Personen:",
                    style: TextStyle(
                      color: kPrimaryHeaderColor.withOpacity(0.6),
                      fontSize: (20.0),
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      body: ListederMenus(),
    );
  }

  Widget ListederMenus() {
    if (ddValue == "ZWEI") {
      return Center(child: MenuForZwei());
    } else if (ddValue == "VIER") {
      return Center(child: MenuForVier());
    } else if (ddValue == "SECHS") {
      return Center(child: MenuForSechs());
    } else if (ddValue == "ACHT") {
      return Center(child: MenuForAcht());
    }
  }
}```

and **MenuForZwei()** and other classes with different colours:

```class MenuForZwei extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
    );
  }
}```