Flutter使用GetX调用嵌套JSON API时序列化与视图调用问题

• 类型转换错误：ApiManager.fetchEvents()返回的是单个Event外层包装对象，你在控制器中强行将其转为List<Event>，会直接抛出类型异常
• 存储结构不匹配：你需要渲染的活动列表实际存在于Event类的data字段中，是List<Datum>类型，控制器的eventList类型定义错误

1. 修改EventController #

将存储列表改为存Datum类型，赋值时直接取接口返回Event对象的data字段：

import 'package:api_test_2/models/event.dart';
import 'package:api_test_2/services/api_manager.dart';
import 'package:get/state_manager.dart';

class EventController extends GetxController {
  var isLoading = true.obs;
  // 改为存储Datum列表，这才是实际要渲染的活动数据
  var eventList = <Datum>[].obs;

  @override
  void onInit() {
    fetchEvents();
    super.onInit();
  }

  void fetchEvents() async {
    try {
      isLoading(true);
      Event? events = await ApiManager.fetchEvents();
      if (events?.data != null) {
        // 直接赋值data字段的列表，不需要强转
        eventList.value = events!.data!;
      }
    } finally {
      isLoading(false);
    }
  }
}

2. 修改EventTile组件 #

改为接收Datum类型参数，然后直接调用对应字段渲染内容：

import 'package:api_test_2/models/event.dart';
import 'package:flutter/material.dart';

class EventTile extends StatelessWidget {
  final Datum event;
  const EventTile(this.event, {super.key});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 2,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if(event.eventImage != null) Image.network(event.eventImage!),
            const SizedBox(height: 8),
            Text(
              event.eventtitle ?? '无标题',
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
            ),
            const SizedBox(height: 4),
            Text(event.datetime ?? '无时间'),
            const SizedBox(height: 4),
            if(event.location?.venue != null) Text(venueValues.reverse[event.location!.venue!] ?? ''),
            const SizedBox(height: 8),
            Text(event.description),
          ],
        ),
      ),
    );
  }
}

• 调用Speaker字段可以用event.speaker?.speakername获取演讲者名称
• 所有带?的可选字段调用前都要做空判断，避免空异常

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