在 Dropdown onchange 事件上更改小部件

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

我认为最简单的方法是创建一个函数来呈现您的小部件，让我们调用它_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.