Question

我有一个带几个选项的下拉菜单。为了简单起见，可以说它们是：“ A”，“ B”和“ C”。

这是我的代码段：

children: <Widget>[
                      FormBuilder(
                        key: _fbKey,
                        autovalidate: true,
                        child: Column(
                          children: <Widget>[
                            FormBuilderDropdown(
                              attribute: "value",
                              decoration: InputDecoration(
                              labelText: "Choose something?"),
                              hint: Text('Select Option'),
                              validators: [FormBuilderValidators.required()],
                              items: user.option.map((v) {
                                return DropdownMenuItem(
                                    value: v,
                                    child: ListTile(
                                      leading: Image.asset(
                                        'assets/img/image.png',
                                        width: 50,
                                        height: 50,
                                      ),
                                      title: Text("${v.option}"),
                                    ));

                              }).toList(),
                            ),
                          ],
                        ),
                       // if v.option == "A" is selected here build Widget A()
                       // if v.option == "B" is selected here build Widget B()
                       // if v.option == "C" is selected here build Widget C()
                      ),

因此，基于下拉列表选择，我想呈现适当的小部件。

如果在下拉菜单中选择A，如何选择B，如果选择B则选择C，如何构建窗口小部件A？

这必须动态更改，任何帮助都是好的。

Answer 1

使用stateful widget。您可以使用一个字段，该字段显示wich小部件，以便在每次选择其他选项时显示和调用设置状态。可以使用collection if将这三个小部件添加到主List<Widget>中，如下所示：

children: <Widget>[
                      FormBuilder(
                        key: _fbKey,
                        autovalidate: true,
                        child: Column(
                          children: <Widget>[
                            FormBuilderDropdown(
                              attribute: "value",
                              decoration: InputDecoration(
                              labelText: "Choose something?"),
                              hint: Text('Select Option'),
                              validators: [FormBuilderValidators.required()],
                              items: user.option.map((v) {
                                return DropdownMenuItem(
                                    value: v,
                                    child: ListTile(
                                      leading: Image.asset(
                                        'assets/img/image.png',
                                        width: 50,
                                        height: 50,
                                      ),
                                      title: Text("${v.option}"),
                                    ));

                              }).toList(),
                            ),
                          ],
                        ),
                        ),
                       if (v.option == "A") A(),
                       if (v.option == "B") B(),
                       if (v.option == "C") C(),
  ]

Answer 2

您可以制作一个在其构造函数中接受该选项的窗口小部件，然后在“下拉列表”构建器下对其进行调用

示例：

    class RenderOption extends StatelessWidget {
  final option;

  const RenderOption({Key key, this.option}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    switch (option) {
      case 1:
        return Container();
        break;
      case 2:
        return Container();
        break;
      case 3:
        return Container();
        break;

      default:
    }
  }
}

现在在您的代码上方

children: <Widget>[
                  FormBuilder(
                    key: _fbKey,
                    autovalidate: true,
                    child: Column(
                      children: <Widget>[
                        FormBuilderDropdown(
                          attribute: "value",
                          decoration: InputDecoration(
                          labelText: "Choose something?"),
                          hint: Text('Select Option'),
                          validators: [FormBuilderValidators.required()],
                          items: user.option.map((v) {
                            return DropdownMenuItem(
                                value: v,
                                child: ListTile(
                                  leading: Image.asset(
                                    'assets/img/image.png',
                                    width: 50,
                                    height: 50,
                                  ),
                                  title: Text("${v.option}"),
                                ));

                          }).toList(),
                        ),
                      ],
                    ),
                   //_currentOption is declared above in the widget tree
                   // it indicates the current selected option
                   RenderOption(option:_currentOption)
                 ),

注意：您必须使Parent Widget（该列或listView作为子代）成为有状态的Widget，以使代码正确运行

编辑：我添加了 _currentOption 变量，该变量指示当前选定的选项并将其粘贴到 RenderOption 小部件中。您应该在FormBuilderDropDown中实现onChanged函数，以更新选定的选项，像这样

onChanged: (option) =>setState(()=>_currentOption = option)

Answer 3

我所看到的最简单的方法是创建一个呈现小部件的函数，我们称其为_renderWidget()，在该函数内部，您可能会有以下内容：

_renderWidget() {
 if(condition == A) {
  return Text('Widget A'); // this could be any Widget
 } else if(condition == B) {
  return Text('Widget B');
 } else {
  return Text('Widget C');
 }
}

然后在DropdownButton onChanged函数中，您可以根据下拉值更改条件：

onChanged(String value) {

  if(value == 'something') {
    setState(() {
     condition = A; // A, B or C
    });  
  }

}

您可以在要显示它们的小部件内调用_renderWidget()函数，例如，假设一个Container小部件。

Container(
  child: _renderWidget()
)

当然，所有这些都需要在StatefulWidget内部完成。

在下拉onchange事件时更改小部件

3 个答案: