Flutter中如何在FutureBuilder内访问Chart字段的JSON数组并展示？

1. 先修正模型类的同名问题 #

原代码里两个Chart类重名，会直接导致编译错误，必须重命名区分：

• 把包含id/name/chart数组的外层类改名为UserChart
• 把存a/b/c的内层类改名为ChartItem

修正后的模型代码：

// 对应返回JSON数组里的单个对象
class UserChart {
  String? id;
  String? name;
  List<ChartItem>? chart;

  UserChart({this.id, this.name, this.chart});

  UserChart.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    if (json['chart'] != null) {
      chart = <ChartItem>[];
      json['chart'].forEach((v) {
        chart!.add(ChartItem.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['id'] = id;
    data['name'] = name;
    if (chart != null) {
      data['chart'] = chart!.map((v) => v.toJson()).toList();
    }
    return data;
  }

  // 新增：把返回的JSON数组转成模型列表
  static List<UserChart> fromJsonList(List<dynamic> jsonList) {
    return jsonList.map((e) => UserChart.fromJson(e as Map<String, dynamic>)).toList();
  }
}

// 对应chart数组里的单个数据项
class ChartItem {
  String? a;
  String? b;
  String? c;

  ChartItem({this.a, this.b, this.c});

  ChartItem.fromJson(Map<String, dynamic> json) {
    a = json['a'];
    b = json['b'];
    c = json['c'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['a'] = a;
    data['b'] = b;
    data['c'] = c;
    return data;
  }
}

2. 修正API请求方法 #

原方法里的Rate.fromJsonList是错误的，同时要确保id参数正确传递：

import 'package:dio/dio.dart';

Future<List<UserChart>> getCategory(int id) async {
  String link = "xxxxxxx"; // 替换成你的实际接口地址
  var response = await Dio().get('$link$id');
  return UserChart.fromJsonList(response.data);
}

3. 用FutureBuilder展示chart数据 #

在Widget中通过FutureBuilder获取数据，然后遍历chart数组渲染内容：

class ChartDisplayPage extends StatelessWidget {
  final int targetId; // 传入需要请求的id

  const ChartDisplayPage({super.key, required this.targetId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图表数据')),
      body: FutureBuilder<List<UserChart>>(
        future: getCategory(targetId),
        builder: (context, snapshot) {
          // 加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }

          // 请求错误处理
          if (snapshot.hasError) {
            return Center(child: Text('加载失败：${snapshot.error}'));
          }

          // 空数据处理
          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Center(child: Text('暂无数据'));
          }

          // 取出第一个对象的chart数组（根据你的JSON结构，返回数组只有一个元素）
          final List<ChartItem>? chartItems = snapshot.data![0].chart;

          if (chartItems == null || chartItems.isEmpty) {
            return const Center(child: Text('暂无图表数据'));
          }

          // 用ListView展示每个chart项
          return ListView.builder(
            itemCount: chartItems.length,
            itemBuilder: (context, index) {
              final item = chartItems[index];
              return ListTile(
                title: Text('状态：${item.a ?? '未知'}'),
                subtitle: Text('数值B：${item.b ?? '0'} | 数值C：${item.c ?? '0'}'),
              );
            },
          );
        },
      ),
    );
  }
}

关键提醒 #

• 模型类同名是原代码的核心问题，必须先解决才能正常编译
• 接口返回的是List<UserChart>，对应JSON的数组结构
• FutureBuilder里要依次处理加载、错误、空数据的场景，避免崩溃
• 如果接口可能返回多个UserChart对象，可遍历整个snapshot.data列表展示

内容的提问来源于stack exchange，提问作者Artin Yunesi