无法将JSON响应解析为Dart，请求解析并展示数据列表方案

问题背景 #

需要将给定的JSON响应解析为Dart对象，并展示其中的讣告列表，尝试过在线转换工具和插件未成功。

实现步骤 #

一、定义数据模型类 #

推荐使用json_serializable包生成序列化代码，确保解析逻辑规范准确。

1. 添加依赖

在pubspec.yaml中引入以下依赖：

dependencies:
  flutter:
    sdk: flutter
  json_annotation: ^4.8.1

dev_dependencies:
  build_runner: ^2.4.4
  json_serializable: ^6.7.0

2. 创建三层模型类

根据JSON层级结构，定义三个对应的数据模型：

讣告条目模型（Obituary）

import 'package:json_annotation/json_annotation.dart';

part 'obituary.g.dart';

@JsonSerializable()
class Obituary {
  final int id;
  final String name;
  final String photo;
  final String sunrise_date;
  final String sunset_date;

  Obituary({
    required this.id,
    required this.name,
    required this.photo,
    required this.sunrise_date,
    required this.sunset_date,
  });

  factory Obituary.fromJson(Map<String, dynamic> json) => _$ObituaryFromJson(json);
  Map<String, dynamic> toJson() => _$ObituaryToJson(this);
}

分页数据模型（ObituaryPageData）

import 'package:json_annotation/json_annotation.dart';
import 'obituary.dart';

part 'obituary_page_data.g.dart';

@JsonSerializable()
class ObituaryPageData {
  final int current_page;
  final List<Obituary> data;
  final String first_page_url;
  final int from;
  final int last_page;
  final String last_page_url;
  final List<dynamic> links;
  final String? next_page_url;
  final String path;
  final int per_page;
  final String? prev_page_url;
  final int to;
  final int total;

  ObituaryPageData({
    required this.current_page,
    required this.data,
    required this.first_page_url,
    required this.from,
    required this.last_page,
    required this.last_page_url,
    required this.links,
    this.next_page_url,
    required this.path,
    required this.per_page,
    this.prev_page_url,
    required this.to,
    required this.total,
  });

  factory ObituaryPageData.fromJson(Map<String, dynamic> json) => _$ObituaryPageDataFromJson(json);
  Map<String, dynamic> toJson() => _$ObituaryPageDataToJson(this);
}

外层响应模型（ObituaryResponse）

import 'package:json_annotation/json_annotation.dart';
import 'obituary_page_data.dart';

part 'obituary_response.g.dart';

@JsonSerializable()
class ObituaryResponse {
  final String status;
  final String message;
  final ObituaryPageData data;

  ObituaryResponse({
    required this.status,
    required this.message,
    required this.data,
  });

  factory ObituaryResponse.fromJson(Map<String, dynamic> json) => _$ObituaryResponseFromJson(json);
  Map<String, dynamic> toJson() => _$ObituaryResponseToJson(this);
}

3. 生成序列化代码

在终端执行以下命令，自动生成.g.dart格式的序列化文件：

flutter pub run build_runner build

二、解析JSON数据 #

假设已获取到目标JSON字符串，解析代码如下：

import 'dart:convert';
import 'obituary_response.dart';

void parseObituaryJson(String jsonString) {
  final jsonMap = json.decode(jsonString);
  final response = ObituaryResponse.fromJson(jsonMap);
  
  // 提取需要展示的讣告列表
  final obituaryList = response.data.data;
  
  // 传入展示逻辑处理
  showObituaryList(obituaryList);
}

三、展示列表内容（Flutter示例） #

使用ListView实现列表展示：

import 'package:flutter/material.dart';
import 'obituary.dart';

Widget showObituaryList(List<Obituary> list) {
  return ListView.builder(
    itemCount: list.length,
    itemBuilder: (context, index) {
      final obit = list[index];
      return ListTile(
        leading: Image.network(
          'http://obituary.krescentglobal.com${obit.photo}',
          width: 50,
          height: 50,
          fit: BoxFit.cover,
          errorBuilder: (_, __, ___) => const Icon(Icons.person_outline),
        ),
        title: Text(obit.name),
        subtitle: Text('生卒：${obit.sunrise_date} — ${obit.sunset_date}'),
      );
    },
  );
}

备选：手动解析（无第三方依赖） #

如果不想引入外部包，可直接手动解析JSON：

import 'dart:convert';

void parseManually(String jsonString) {
  final jsonMap = json.decode(jsonString);
  final pageData = jsonMap['data'] as Map<String, dynamic>;
  final obitJsonList = pageData['data'] as List<dynamic>;
  
  for (final obitJson in obitJsonList) {
    final obit = obitJson as Map<String, dynamic>;
    print('姓名：${obit['name']}，生卒：${obit['sunrise_date']} - ${obit['sunset_date']}');
  }
}

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