我想把我的列表视图放在下拉列表中 [英] I want to put my listview inside a dropdownbottom

问题描述

此数据来自API，我希望将所有选项放入下拉列表中

有人能帮我吗？我是新手，我还在学习如何使用

这是我的代码：

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');
    }
  }

推荐答案

尝试下面的答案，希望对您有帮助。您也可以参考我的答案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()内调用接口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->；结果屏幕

您的下拉列表结果屏幕->；

这篇关于我想把我的列表视图放在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！