Question

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

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

'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

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

String firstDropDownData = "";

在第一个下拉菜单的onChange（）函数中，只需更新“ firstDropDownData”的值并在其中存储一些相关内容。一旦您在“ firstDropDownData”中添加了内容，您的第二个下拉列表就会在用户界面中自动呈现。

请考虑在第二个下拉列表中添加以下行。

        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(),
            ],
          ),
          
        );
      }
    }

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

1 个答案: