asynchronous - Flutter DropdownButton - 从 rest webservice 填充项目

Question

我的 fetchCities()方法返回 Future<List<City>>它从 rest web 服务加载数据。填充项目的代码:

 Widget buildCitiesSelector(){

    return new Center(
        child: FutureBuilder(
            future: fetchCities() ,
            builder: (context, snapshot){
              if (snapshot.hasData) {
                return new DropdownButton <City>(
                    hint: Text('Wybierz miasto'),
                  items: snapshot.data.map<DropdownMenuItem<City>>((City value) {
                    return DropdownMenuItem<City>(
                      value: value,
                      child: Text(value.name),
                    );
                  }).toList(),
                  onChanged: (value) {
                      setState(() {_selectedCity = value;});
                  },
                  value: _selectedCity,
                );
              }
              else{
                return CircularProgressIndicator();
              }
            }

        )

    );
  }

结果:项目在选择器中正确显示。但是，在选择任何特定项目时，出现异常:

I/flutter (13910): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (13910): The following assertion was thrown building FutureBuilder>(dirty, state: I/flutter (13910): _FutureBuilderState>#dacd9): I/flutter (13910): 'package:flutter/src/material/dropdown.dart': Failed assertion: line 560 pos 15: 'items == null || I/flutter (13910): items.isEmpty || value == null || items.where((DropdownMenuItem item) => item.value == I/flutter (13910): value).length == 1': is not true.

如何正确选择项目？有什么问题吗？

Answer 1

对于这种情况，您不应该使用 FutureBuilder。而是在 initState() 中获取数据，然后使用 setState() 进行重建以更新 View 。

如果每次调用 fetchCities() 都会创建一个新的 Future，那么 build() 将在每次 UI 时调用该 fetch重建(可能很频繁)

https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html

The future must have been obtained earlier, e.g. during State.initState, ...