flutter - 如何根据 Flutter 中第一个 DropdownButton 的选择加载第二个 DropdownButton？

Question

我有两个下拉菜单。现在我只想在选择第一个下拉菜单时才显示第二个下拉菜单，否则它应该是隐藏的。我该如何在这段代码中做到这一点，请任何人帮助我。

如何根据下拉选择隐藏/显示小部件

'How can I hide second dropdown until first is choosen?'   

    
       
      @override
      Widget build(BuildContext context) {
        loadDatalistDropexpensetype();
        loadDatalistDropexpensetype1();
        return new Scaffold(
           appBar: AppBar(   'appbar'
            title: Text("DropDown Testing 2"),
          ),
          body: new Column(
            children: <Widget>[
              new DropdownButton(
                items: listDropexpensetype, 'item which are mentioned in function'
                  value: select,
                  hint: Text("select option"),
                  onChanged: (value){
                    print(value.toString());
                    setState(() {
                      select=value;
                    });
                  }
              ),
              Visibility(
                visible: tcVisibility,
                child: new DropdownButton(   'this should onlt show on selection of first'
                  items: listDropexpensetype1,
                  value: selectedexpensetype,
                  hint: Text("select option"),
                  onChanged: (value){
                    print(value.toString());
                    setState(() {
                      selectedexpensetype=value;
                    });
                  }
                ),
              ),
            ],
          ),
          
        );
      }
    }

标签： flutterdropdown

Answer 1

您可以在构建函数之外存储一个临时变量。例如，

String firstDropDownData = "";

在您的第一个下拉菜单的 onChange() 函数中，只需更新“firstDropDownData”的值并在其中存储相关内容。一旦你在“firstDropDownData”中有一些东西，你的第二个下拉菜单将在 UI 中自动呈现。

考虑使用以下行包装您的第二个下拉菜单。

        firstDropDownData != "" ? DropdownButton(
              items: listDropexpensetype1,
              value: selectedexpensetype,
              hint: Text("select option"),
              onChanged: (value){
                print(value.toString());
                setState(() {
                  selectedexpensetype=value;
                });
              }
            ) : Container()

更新：

根据您的要求，这是一个完整的演示代码：

String firstDropDownData = "";


@override
      Widget build(BuildContext context) {
        loadDatalistDropexpensetype();
        loadDatalistDropexpensetype1();
        return Scaffold(
           appBar: AppBar(   'appbar'
            title: Text("DropDown Testing 2"),
          ),
          body: Column(
            children: <Widget>[
              DropdownButton(
                items: listDropexpensetype, 
                  value: select,
                  hint: Text("select option"),
                  onChanged: (value){
                    print(value.toString());
                    setState(() {
                      firstDropDownData = value;
                    });
                  }
              ),
              firstDropDownData != "" ? DropdownButton(  
                  items: listDropexpensetype1,
                  value: selectedexpensetype,
                  hint: Text("select option"),
                  onChanged: (value){
                    print(value.toString());
                    setState(() {
                      selectedexpensetype=value;
                    });
                  }
                ) : Container(),
            ],
          ),
          
        );
      }
    }