使用 HashMap<String, dynamic> 的 List 填充 ListView Builder Flutter答案

【问题标题】：Using List of HashMap<String, dynamic> to populate ListView Builder Flutter使用 HashMap<String, dynamic> 的 List 填充 ListView Builder Flutter
【发布时间】：2022-01-19 08:03:30
【问题描述】：

我收到了如下所示的json 回复

[
  {
        "email": "kamchatka@mail.com",
        "about": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem.",
        "name": "kamchatka",
        "picture": "https://media.istockphoto.com/photos/fashion-beauty-african-american-beautiful-woman-profile-portrait-picture-id1197851431?k=20&m=1197851431&s=612x612&w=0&h=g3tb57yHvOHiFT3F35STNKNCQB0W1e9vKqFocnvnehE=",
        "index": 1,
        "imageFetchType": "networkImage"
  },
  {
        "email": "valjakutse@mail.com",
        "about": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem.",
        "name": "Valjakutse",
        "picture": "https://images.unsplash.com/photo-1561406636-b80293969660?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8YmxhY2slMjBsYWR5fGVufDB8fDB8fA%3D%3D&w=1000&q=80",
        "index": 2,
        "imageFetchType": "imageNetwork"
  }
  
]

我想要实现的是填充 ListView Builder 而不使用 class 而是使用 List 的 HashMap<String, dynamic>

下面是我如何使用async 将字符串响应映射到List<HashMap<String, dynamic>> Future


Future<List<HashMap<String, dynamic>>>
  _fetchUsersUsingListOfStringDynamicHashMap() async {
    try {
      final response = await http.get(
          Uri.parse(
              "https://api.json-generator.com/templates/Eh5AlPjYVv6C/data"),
          headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer tltsp6dmnbif01jy9xfo9ssn4620u89xhuwcm5t3",
          });

      final List<HashMap<String, dynamic>> responseList;

      if (response.statusCode == 200) {
        responseList = json
            .decode(response.body)
            .map<HashMap<String, dynamic>>(
                (e) => HashMap<String, dynamic>.from(e))
            .toList();
      } else if (response.statusCode == 401) {
        responseList = [];
      } else {
        responseList = [];
      }

      return responseList;
    } catch (e) {
      if (kDebugMode) {
        Logger().wtf("FetchUsersUsingListOfStringObjectHashMapException $e");
      }

      rethrow;
    }
  }

下面是我的 FutureBuilder 在一个 SizedBox


SizedBox(
        child: FutureBuilder(
            future: _fetchUsersUsingListOfStringDynamicHashMap(),
            builder: (BuildContext context, AsyncSnapshot asyncSnapshot) {
              if (asyncSnapshot.data == null) {
                return const Center(child: CircularProgressIndicator());
              } else {
                return RefreshIndicator(
                  // background color
                    backgroundColor: Colors.white,
                    // refresh circular progress indicator color
                    color: Colors.green,
                    onRefresh: () async {
                      setState(() {
                        _fetchUsersUsingListOfStringDynamicHashMap();
                      });
                    },
                    child: ListView.builder(
                      itemCount: asyncSnapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return ListTile(
                          contentPadding: const EdgeInsets.all(10),
                          title: Text(asyncSnapshot.data[index]."email" ?? ''),
                          subtitle: Text(
                              asyncSnapshot.data[index]."name" ?? ''),
                        );
                      },
                    ));
              }
            }),
      ),

我被困在下面的某些代码中，其中有一个 ListView.Builder 我收到 Expected an identifier. 错误

return ListTile(
                          contentPadding: const EdgeInsets.all(10),
                          title: Text(asyncSnapshot.data[index]."email" ?? ''),
                          subtitle: Text(
                              asyncSnapshot.data[index]."name" ?? ''),
                        );

我尝试了以下方法

return ListTile(
                          contentPadding: const EdgeInsets.all(10),
                          title: Text(asyncSnapshot.data["email"] ?? ''),
                          subtitle: Text(
                              asyncSnapshot.data["name"] ?? ''),
                        );

但我收到错误 type 'String' is not a subtype of type 'int' of index' 当我使用 ListTile 时，我如何能够使用 hashmap 中的键将标题设置为电子邮件，将副标题设置为名称

【问题讨论】：

标签： flutter dart hashmap future flutter-futurebuilder

【解决方案1】：

试试：

 asyncSnapshot.data[index]["name"]

和

 asyncSnapshot.data[index]["email"]

【讨论】：

如果它回答了您的问题，请接受它。