如何根據 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;
                    });
                  }
                ),
              ),
            ],
          ),
          
        );
      }
    }

Answer 1

您可以在構建 function 之外存儲臨時變量。 例如，

String firstDropDownData = "";

在您的第一個下拉列表的 onChange() function 中，只需更新“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(),
            ],
          ),
          
        );
      }
    }