如何在颤动中从未来构建下拉列表

Question

我想从 Future 构建下拉列表，这是我的简单列表视图功能，它正在工作，但是如何从中填充下拉列表，我真的很困惑这个列表映射等来自php背景，

 child: FutureBuilder(
    future:userApi.getUsers(),
    builder: (BuildContext context, AsyncSnapshot snapshot){
      if(snapshot.data == null){
        return Container(
          child: Center(
            child: Text("Loading...")
          )
        );
      } else {
        return Container(
          child: DropdownButton(
         items: snapshot.data.map((item) {
         return DropdownMenuItem(child: Text(item.title));
         }).toList(),
         onChanged: (value){},
        )
        );
      }
    },
  ),


class UserApi{
 Future<List<User>>getUsers() async {

    var data = await http.get("https://jsonplaceholder.typicode.com/albums/");

    var jsonData = json.decode(data.body);

    List<User> users = [];

    for(var u in jsonData){

      User user = User(u["id"], u["title"]);

      users.add(user);

    }

    return users;

  }

class User {
  final int id;
  final String title;
User(this.id,this.title);

}

Answer 1

您可以在任何转换列表元素的列表上调用 map 函数。

return DropdownButton(
          items: snapshot.data.map((item) {
              return DropdownMenuItem(child: Text(item.title));
          }).toList(),
          onChanged: (value){},
        );

如果您在这里看到，我们正在通过在 snapshot.data 上调用 map 将列表 snapshot.data 转换为另一个 DropdownMenuItem 类型列表，map 函数采用另一个函数，该函数在 [的每个元素上调用=17=] ，映射 returns 类型为 DropdownMenuItem 的 Iterable（在每个元素上调用的函数的返回类型），我们通过调用 toList() 将 Iterable 转换为列表

我希望这足以解释，地图功能非常有用。

Answer 2

好的，我刚刚阅读了上面留下的评论，如果您的问题是获取数据，那么这可能对您没有帮助，但如果快照有数据，这将有效

//initialize this outside your build method
String dropDownValue;


 FutureBuilder(
        future:userApi.getUsers(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return snapshot.hasData
              ? Container(
                  child: DropdownButton<String>(
                    hint: Text(dropDownValue ?? 'Make a selection'),
                    items: snapshot.data.map<DropdownMenuItem<String>>((item) {
                      return DropdownMenuItem<String>(
                        value: item.title,
                        child: Text(item.title),
                      );
                    }).toList(),
                    onChanged: (value) {
                      setState(() {
                        dropDownValue = value;
                        print(value);
                      });
                    },
                  ),
                )
              : Container(
                  child: Center(
                    child: Text('Loading...'),
                  ),
                );
        },
      ),

如何在颤动中从未来构建下拉列表

How to build dropdown list from future in flutter

future

flutter