我想把我的列表视图放在下拉底部

Posted 2023-02-23

【中文标题】我想把我的列表视图放在下拉底部

【英文标题】：I want to put my listview inside a dropdownbottom

【发布时间】：2022-01-04 00:53:14

【问题描述】：

此数据来自 API，我想将所有选项放在下拉列表中

谁能帮帮我？我是 Flutter 新手，还在学习使用

这是我的代码：

class _ApiFipePageState extends State<ApiFipePage>
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: FutureBuilder<dynamic>(
        future: pegarUsuarios(),
        builder: (context, snapshot) 
          if (snapshot.hasData) 
            return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) 
                  var usuario = snapshot.data![index];
                  return ListTile(
                    title: Text(usuario['nome']),
                  );
                );
           else if (snapshot.hasError) 
            return Center(
              child: Text('$snapshot.error'),
            );
          
          return Center(
            child: CircularProgressIndicator(),
          );
        ,
      ),
    );
  

  pegarUsuarios() async 
    var url = Uri.parse('https://parallelum.com.br/fipe/api/v1/carros/marcas');
    var resposta = await http.get(url);
    if (resposta.statusCode == 200) 
      return jsonDecode(resposta.body);
     else 
      throw Exception('não foi possivel carregar os usuarios');
    
  

【参考方案1】：

试试下面的答案希望它对你有所帮助。您也可以参考我的回答 here 和 here 来获取来自 API 的数据并将其显示到下拉列表中。

声明变量：

String? sid;
  List data = [];
  var urls = "https://parallelum.com.br/fipe/api/v1/carros/marcas";

您的 API 调用函数：

Future fetchData() async 
    var result = await http.get(Uri.parse(urls), headers: 
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    );
    var jsonData = json.decode(result.body);

    setState(() 
      data = jsonData;
    );
    return jsonData;
  

在 initState() 中调用您的 API fetchData()

@override
  void initState() 
    fetchData();
    super.initState();
  

您的下拉小部件：

Container(
                width: 200,
                child: InputDecorator(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                  ),
                  child: DropdownButtonHideUnderline(
                    child: DropdownButton(
                      isDense: true,
                      isExpanded: true,
                      value: sid,
                      hint: Text("Select Data",
                          style: TextStyle(color: Colors.black)),
                      items: data.map((list) 
                        return DropdownMenuItem(
                          child: Text(list['nome']),
                          value: list['codigo'].toString(),
                        );
                      ).toList(),
                      onChanged: (value) 
                        setState(() 
                          sid = value as String?;
                        );
                      ,
                    ),
                  ),
                ),
              ),

DropdownButton 的结果屏幕 ->

您的下拉结果屏幕 ->

【讨论】：

在fetchData 函数中返回数据有什么意义？改为无效。

@OMiShah 我听不懂你在说什么，但根据你的说法，我使用void fetchData 而不是Future fetchData 或者只是声明fetchData 它也有效

你不明白什么？ :( 它肯定会双向工作，但与it also work 无关！！

谢谢！工作正常

欢迎@RogerAraujo 支持我的回答谢谢，