Flutter中如何在不同Widget中循环渲染API返回的数组数据？

首先你当前的代码存在一个关键问题：API返回的JSON中，实际的账户数组嵌套在data字段里，但你的updateAccountData方法把整个外层Map存入了accountData，导致后续无法正确遍历单个账户。以下是修正步骤：

1. 修正AccountController的数据更新逻辑 #

修改AccountController.dart中的updateAccountData方法，从传入的Map中提取出data对应的账户数组：

import 'package:get/get.dart';

class AccountController extends GetxController {
  RxList<Map<String, dynamic>> accountData = <Map<String, dynamic>>[].obs;

  void updateAccountData(Map<String, dynamic> data) {
    // 取出data字段下的账户列表，转换为List类型
    List<Map<String, dynamic>> accountList = List.from(data['data']);
    // 将列表赋值给accountData
    accountData.assignAll(accountList);
  }
}

2. 在Widget中遍历渲染账户数据 #

因为accountData是RxList（响应式列表），需要用Obx包裹UI部分，确保数据更新时UI自动刷新。示例代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'your_account_controller_path.dart';

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

  @override
  State<AccountListScreen> createState() => _AccountListScreenState();
}

class _AccountListScreenState extends State<AccountListScreen> {
  late final AccountController accountController;

  @override
  void initState() {
    super.initState();
    accountController = Get.find<AccountController>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('账户列表')),
      body: Obx(() {
        // 处理空数据情况
        if (accountController.accountData.isEmpty) {
          return const Center(child: Text('暂无账户数据'));
        }

        // 遍历账户列表渲染
        return ListView.builder(
          itemCount: accountController.accountData.length,
          itemBuilder: (context, index) {
            // 获取单个账户数据
            final account = accountController.accountData[index];
            return ListTile(
              title: Text('账户ID: ${account['account_id']}'),
              subtitle: Padding(
                padding: const EdgeInsets.only(top: 8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('账户类型: ${account['account_type']}'),
                    Text('货币: ${account['currency']}'),
                    Text('状态: ${account['status']}'),
                    Text('创建时间: ${account['created_at']}'),
                  ],
                ),
              ),
            );
          },
        );
      }),
    );
  }
}

额外优化建议 #

• 可以创建一个Account实体类，把JSON数据转换为实体对象，这样比直接用Map更安全，避免字段名拼写错误。比如：

class Account {
  final int id;
  final String accountId;
  final String currency;
  final String accountType;
  final String status;
  final DateTime createdAt;

  Account({
    required this.id,
    required this.accountId,
    required this.currency,
    required this.accountType,
    required this.status,
    required this.createdAt,
  });

  // 从Map转换为Account对象
  factory Account.fromMap(Map<String, dynamic> map) {
    return Account(
      id: map['id'],
      accountId: map['account_id'].toString(),
      currency: map['currency'],
      accountType: map['account_type'],
      status: map['status'],
      createdAt: DateTime.parse(map['created_at']),
    );
  }
}

然后把Controller中的RxList<Map<String, dynamic>>改为RxList<Account>，更新数据时转换为实体对象，后续使用更规范。

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