Question

假设我们在ABC有状态小部件中创建了一个简单的DropdownButton ABCPageState。

class ABCPageState extends State<ABCPage> {

  @override 
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        child:
          new DropdownButton(
                hint: new Text("Please select value"),
                items: <String>['Value 1', 'Value2'].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                onChanged: (_) {},
          )
      )
    );
  }
}

但是在我们选择其中一个选项后，选择了没有值。换句话说，即使我们单击了某个项目，DropdownButton也为空。我们该如何解决？

Answer 1

只需创建dropdownSelectedItem变量即可存储所选项目。 DropdownButton具有value属性，用于设置所选值。在onChanged回调中-将值设置为dropdownSelectedItem变量。请记住，之后再调用setState方法以重绘UI。

class ABCPageState extends State<ABCPage> {

  var dropdownSelectedItem;

  @override 
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        child:
          new DropdownButton(
                hint: new Text("Please select value"),
                items: <String>['Value 1', 'Value2'].map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                }).toList(),
                value: dropdownSelectedItem,
                onChanged: (val) { dropdownSelectedItem = val; setState((){}); },
            ),
      ), 
    );
  }
}

Flutter-DropdownButton值在选择后保持为空

1 个答案: