Flutter开发中如何获取并展示JSON结构Data下的DietName字段

实现步骤 #

1. 先确认接口返回JSON结构（参考示例） #

通常这类接口返回结构如下，可对照你实际的返回调整字段匹配规则

{
  "code": 200,
  "msg": "请求成功",
  "Data": {
    "DietName": "注册营养师李XX",
    "PartnerData": [
      // 你已能正常解析的数组内容
    ]
  }
}

2. 确认模型类定义正确 #

需确保根模型DietDetailsModel已绑定根节点下的Data对象，且Data类中已声明DietName对应字段，以下是用json_serializable序列化的示例：

DietDetailsModel定义

import 'package:json_annotation/json_annotation.dart';
part 'diet_details_model.g.dart';

@JsonSerializable()
class DietDetailsModel {
  final int code;
  final String msg;
  // 如果JSON中key是大写开头的Data，需用@JsonKey指定映射
  @JsonKey(name: 'Data')
  final Data data;

  DietDetailsModel({
    required this.code,
    required this.msg,
    required this.data,
  });

  factory DietDetailsModel.fromJson(Map<String, dynamic> json) =>
      _$DietDetailsModelFromJson(json);
}

Data类定义

@JsonSerializable()
class Data {
  // 匹配JSON中大写开头的DietName字段
  @JsonKey(name: 'DietName')
  final String dietName;
  @JsonKey(name: 'PartnerData')
  final List<PartnerData> partnerData;

  Data({
    required this.dietName,
    required this.partnerData,
  });

  factory Data.fromJson(Map<String, dynamic> json) => _$DataFromJson(json);
}

// 你已定义的PartnerData类保持原有逻辑即可

如果是手动写序列化逻辑，确保Data.fromJson中已正确赋值dietName：

factory Data.fromJson(Map<String, dynamic> json) {
  return Data(
    dietName: json['DietName'] as String,
    partnerData: (json['PartnerData'] as List)
        .map((item) => PartnerData.fromJson(item))
        .toList(),
  );
}

3. 页面展示DietName字段 #

接口请求解析得到DietDetailsModel实例后，直接通过层级调用获取字段即可，示例（用FutureBuilder演示）：

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

  @override
  State<DietDetailsPage> createState() => _DietDetailsPageState();
}

class _DietDetailsPageState extends State<DietDetailsPage> {
  late Future<DietDetailsModel> _detailsFuture;

  @override
  void initState() {
    super.initState();
    // 调用你的接口请求方法，解析得到DietDetailsModel实例
    _detailsFuture = requestDietDetailsApi();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<DietDetailsModel>(
        future: _detailsFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done &&
              snapshot.hasData) {
            final details = snapshot.data!;
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 直接通过层级调用获取DietName展示
                Padding(
                  padding: const EdgeInsets.all(16),
                  child: Text(
                    details.data.dietName,
                    style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                ),
                // 你原有展示PartnerData数组的逻辑保持不变
                Expanded(
                  child: ListView.builder(
                    itemCount: details.data.partnerData.length,
                    itemBuilder: (context, index) {
                      final item = details.data.partnerData[index];
                      // 返回你原有PartnerData的item组件
                      return PartnerItemWidget(data: item);
                    },
                  ),
                )
              ],
            );
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

注意事项 #

• 模型字段映射必须和接口返回的JSON key完全一致，大小写、拼写不能有差异
• 若接口返回的DietName可能为空，需将模型中对应字段声明为可空类型String?，展示时做判空处理

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