Flutter Dart如何正确处理嵌套JSON并使用FutureBuilder展示地址列表

你已经生成了对应的实体类，接下来只需实现JSON解析逻辑和UI展示部分，以下是完整代码示例：

1. 异步解析JSON的函数 #

先写一个异步函数，负责加载并解析JSON数据（这里用模拟数据演示，实际可替换为网络请求）：

import 'dart:convert';

Future<List<Address>> fetchUserAddresses() async {
  // 模拟JSON数据，实际场景可替换为http请求返回的response.body
  final String rawJson = '''
  [
    {
      "name": "John",
      "age": 20,
      "address": [
        {
          "street": "103   Main St",
          "city": "gghhd"
        },
        {
          "street": "103     Main St",
          "city": "Anytown"
        },
        {
          "street": "13 Grog St",
          "city": "Anytown"
        },
        {
          "street": "3 delk St",
          "city": "upwn"
        }
      ]
    }
  ]
  ''';

  // 解析JSON数组，取出第一个用户的地址列表
  final List<dynamic> jsonArray = jsonDecode(rawJson);
  final Autogenerated user = Autogenerated.fromJson(jsonArray[0]);
  return user.address ?? [];
}

2. 用FutureBuilder+ListView展示数据 #

在页面Widget中，通过FutureBuilder处理异步数据的加载状态，并用ListView渲染地址列表：

import 'package:flutter/material.dart';

class AddressListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('John的地址列表')),
      body: FutureBuilder<List<Address>>(
        future: fetchUserAddresses(),
        builder: (context, snapshot) {
          // 加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }

          // 加载出错状态
          if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }

          // 数据加载完成，渲染列表
          final addresses = snapshot.data ?? [];
          return ListView.builder(
            itemCount: addresses.length,
            itemBuilder: (context, index) {
              final address = addresses[index];
              return ListTile(
                title: Text(address.street ?? '未填写街道'),
                subtitle: Text(address.city ?? '未填写城市'),
                leading: const Icon(Icons.location_on),
              );
            },
          );
        },
      ),
    );
  }
}

3. 实际项目注意点 #

• 如果用网络请求，需要在pubspec.yaml中添加http依赖：

  dependencies:
    flutter:
      sdk: flutter
    http: ^1.1.0
  

  并将模拟数据替换为真实请求：

  final response = await http.get(Uri.parse('你的API接口地址'));
  if (response.statusCode == 200) {
    final List<dynamic> jsonArray = jsonDecode(response.body);
    // 后续解析逻辑不变
  } else {
    throw Exception('请求失败，状态码: ${response.statusCode}');
  }
  

• 确保实体类代码中，泛型和空安全处理正确（你生成的代码已经做了基础处理）。

内容的提问来源于stack exchange，提问作者Eniedi Monday