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

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

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

如果用户单击下拉值之一，即：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:",],Container(
          child: renderWidget(),);
  }
}

解决方法

我想我已经阅读了所有可用的文档并查看了所有示例，因此我不得不重新设计 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',new DropdownMenuItem(
                            value: "SECHS",child: new Text('SECHS',new DropdownMenuItem(
                            value: "ACHT",child: new Text('ACHT',],onChanged: (value) {
                          ddValue = value;
                          setState(() {});
                        },Text(
                    " Personen:",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,);
  }
}```