Flutter - 选择带有显示和返回值的列表

Posted 2023-02-23

【中文标题】Flutter - 选择带有显示和返回值的列表

【英文标题】：Flutter - Select list with display and return value

【发布时间】：2021-12-29 02:27:05

【问题描述】：

是否可以在flutter中使用带有显示和返回值的选择列表

例如：

来自这个网络服务https://jsonplaceholder.typicode.com/users

id = 选择列表中的值，name = 选择列表中的显示值

如果用户选择 Leanne Graham，我需要获取 Leanne Graham (1) 的 id 并发送到数据库。如果选择 Ervin Howell 需要获取值 (2)。

【问题讨论】：

你想要一个下拉列表（选择列表）在选择选项时返回一个值吗？

【参考方案1】：

请参考我的回答 here。

您想为您的所有列表创建一个类并为此调用 this url

您的所有列表 API 调用

 Future<List<dynamic>> getJobsData() async 
    String url = 'https://jsonplaceholder.typicode.com/users';
    var response = await http.get(Uri.parse(url), headers: 
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    );
    return json.decode(response.body);
  

您的所有列表小部件：

 Expanded(
        child: FutureBuilder<List<dynamic>>(
          future: getJobsData(),
          builder: (context, snapshot) 
            if (snapshot.hasData) 
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListView.builder(
                  shrinkWrap: true,
                   itemCount: snapshot.data!.length,
                  itemBuilder: (context, index) 
                    var name = snapshot.data![index]['name'];
                    var email = snapshot.data![index]['email'];
                    var id = snapshot.data![index]['id'];
                    return Card(
                      shape: RoundedRectangleBorder(
                        side: BorderSide(color: Colors.green.shade300),
                        borderRadius: BorderRadius.circular(15.0),
                      ),
                      child: Column(
                        children: [
                          ListTile(
                            leading: Text(id.toString()),
                            title: Text(name),
                            subtitle: Text(email),
                          ),
                        ],
                      ),
                    );
                  ,
                ),
              );
            
            return CircularProgressIndicator();
          ,
        ),
      ),
      

所有数据的结果屏幕 ->

然后您为所选用户创建发送到该名称的 Id 到下一个类并使用 this url

你通过上面选择的用户ID this甲