下拉选项不显示Flutter

Question

我从json获取项目并在下拉列表中显示它们，当此人从下拉列表中选择一个项目时，我得到选择但所选项目不会更改。例如，列表中有我们（东京，巴黎，纽约）。默认选择是东京。当这个人选择巴黎时，我会得到它，但选择不会在下拉菜单中改变。这是我的代码：

new DropdownButton(
                value: cities.elementAt(0),
                hint: new Text("Ville"),
                items: cities.map((String value) {
                  return new DropdownMenuItem(value: value,
                    child: new Row(
                      children: <Widget>[
                        new Icon(
                          Icons.location_city, color: Colors.deepOrange,),
                        new Text(value)
                      ],
                    ),);
                }).toList(),
                onChanged: (String value) {
                  getTravelCity(value);
                },),

当人选择一个项目时，它仍然显示默认值

Answer 1

因为您需要使用“setState（（）{}）更新”value：“参数;”方法和新值必须与传递给“onChanged：”的类型相同。我建议你做这个，因为你可以动态改变你的图标。

1）在文件顶部声明一个新类;

class city {
  final String name;
  final IconData icon;

  const city({
    this.name,
    this.icon,
  });
}

2）在窗口小部件的状态下添加：

class yourState extend<myWidget>{

List<city> cities = [
    new city(name: "tokio", icon: Icons.location_city),
    new city(name: "paris", icon: Icons.location_city),
    new city(name: "new york", icon: Icons.location_city),
  ];

int index = 0;

Widget drop() {
    return DropdownButton(
        value: cities[index],
        hint: new Text("Ville"),
        items: cities.map((city value) {
          return new DropdownMenuItem(
            value: value,
            child: new Row(
              children: <Widget>[
                new Icon(
                  value.icon,
                  color: Colors.deepOrange,
                ),
                new Text(value.name)
              ],
            ),
          );
        }).toList(),
        onChanged: (city value) {
          setState(() {
            index = cities.indexOf(value);
            print(index);
          });
          //getTravelCity(value.name);
        });
  }

}

现在在你想要DropDown的地方调用“drop（）”。再见！

Answer 2

在我最近的应用程序中使用此代码，它的工作原理。也许你可以将它与你的代码进行比较。

return DropdownButton<String>(
    style: Theme.of(context).textTheme.title,
    items: _persons.map((String val) {
      return new DropdownMenuItem<String>(
        value: val,
        child: new Container(
          child: new Card(
            child: new Row(children: <Widget>[
              new Icon(Icons.person),
              new Text(val),
            ]),
          ),
        ),
      );
    }).toList(),
    hint: new Card(
        child: new Row(children: <Widget>[
      new Icon(Icons.person),
      new Text("check"),
    ])),
    value: _selectedPerson,
    onChanged: (newVal) {
      _selectedPerson = newVal;
      setState(() {});
    });

Answer 3

您将第一个城市硬编码为下拉列表的值。

new DropdownButton(
            value: cities.elementAt(0), //this one
...

您需要有一些state变量来保存所选城市。

class YourStatefulWidgetState extends State<YourStatefulWidget> {
  @override
  initState() {
   super.initState();
   selectedCity = cities.elementAt(0)
  }

 @override
 Widget build(BuildContext context) {
   ...
   new DropdownButton(
            value: selectedCity,
            hint: new Text("Ville"),
            items: cities.map((String value) {
              return new DropdownMenuItem(value: value,
                child: new Row(
                  children: <Widget>[
                    new Icon(
                      Icons.location_city, color: Colors.deepOrange,),
                    new Text(value)
                  ],
                ),);
            }).toList(),
            onChanged: (String value) {
              setState(() {
                selectedCity = getTravelCity(value);
              });
            },),
     ...

Answer 4

对于那些将来面临这个问题的人。使用变量将值设置为DropdownButton，并在onChanged调用时使用setState更新变量

Expanded(child: DropdownButton<String>(
          items: cities.map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          value: city,
          onChanged: (String val) {
            _onDropDownChanged(val);
          },
        ),)

使用状态更新城市变量

void _onDropDownChanged(String val) {
    setState(() {
      this.city = val;
    });
  }

有关详细信息，请查看以下链接

https://github.com/FazalHussain/Flutter-Demo/blob/trip_cost_app/lib/main.dart