Flutter中如何处理无键值对的API返回数组并展示到UI

1. 解析无键二维数组 #

你可以直接将API返回的JSON数据解析为List<List<int>>类型，无需额外定义模型类，因为这是纯数值组成的二维结构。

示例代码（基于http包实现请求）：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<List<List<int>>> fetchActivityData() async {
  final response = await http.get(Uri.parse('你的API接口地址'));
  
  if (response.statusCode == 200) {
    // 直接解码并转换为List<List<int>>类型
    return List<List<int>>.from(
      jsonDecode(response.body).map((item) => List<int>.from(item))
    );
  } else {
    throw Exception('数据请求失败');
  }
}

2. 将解析后的数据展示到UI #

以ListView.builder为例，假设二维数组中第一个元素是activityId，第二个是对应的统计数值（比如关联文档数量），直接通过下标取值并渲染：

class ActivityStatsPage extends StatefulWidget {
  const ActivityStatsPage({super.key});

  @override
  State<ActivityStatsPage> createState() => _ActivityStatsPageState();
}

class _ActivityStatsPageState extends State<ActivityStatsPage> {
  late Future<List<List<int>>> _activityDataFuture;

  @override
  void initState() {
    super.initState();
    _activityDataFuture = fetchActivityData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('活动数据统计')),
      body: FutureBuilder<List<List<int>>>(
        future: _activityDataFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final dataItem = snapshot.data![index];
                final activityId = dataItem[0];
                final statsValue = dataItem[1];
                return ListTile(
                  title: Text('活动ID: $activityId'),
                  subtitle: Text('统计值: $statsValue'),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          // 加载中状态
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

额外提示 #

如果二维数组的元素对应其他业务含义，只需要调整dataItem[0]、dataItem[1]的下标取值，以及UI上的文本描述即可，核心逻辑完全通用。

内容的提问来源于stack exchange，提问作者Minal Suryawanshi