Flutter中动态解析JSON并展示对应键值对的实现问题

1. 调整数据模型（ProductModel） #

把原来固定的mainFeatures字段替换为动态Map类型，兼容JSON里appDetails的任意键：

class ProductModel {
  // 保留原有其他字段
  final Map<String, dynamic> appDetails;

  ProductModel({
    // 传递其他参数
    required this.appDetails,
  });

  // 从JSON解析的工厂方法
  factory ProductModel.fromJson(Map<String, dynamic> json) {
    return ProductModel(
      // 解析其他字段
      appDetails: json['appDetails'] as Map<String, dynamic>,
    );
  }
}

如果之前用单独类定义appDetails，直接改成Map<String, dynamic>即可，无需为每个可能的键单独声明字段。

2. 动态构建UI组件 #

遍历appDetails的键值对，根据值的类型动态生成展示内容：

Widget buildDynamicAppDetails(ProductModel product) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: product.appDetails.entries.map((entry) {
      final String title = entry.key
          .replaceAllMapped(RegExp(r'([A-Z])'), (match) => " ${match.group(1)}")
          .trim();
      final dynamic value = entry.value;

      // 根据值的类型适配展示样式
      Widget content;
      if (value is List) {
        content = Column(
          children: value.map((item) => Padding(
            padding: const EdgeInsets.symmetric(vertical: 2),
            child: Text("- $item"),
          )).toList(),
        );
      } else if (value is Map) {
        // 处理嵌套对象，可根据需求递归构建UI
        content = Text(value.toString());
      } else {
        content = Text(value.toString());
      }

      return Padding(
        padding: const EdgeInsets.symmetric(vertical: 10),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 6),
            content,
          ],
        ),
      );
    }).toList(),
  );
}

3. 在页面中调用组件 #

在页面的build方法中引入动态展示组件：

@override
Widget build(BuildContext context) {
  // 假设已获取到ProductModel实例product
  return Scaffold(
    body: Padding(
      padding: const EdgeInsets.all(16),
      child: buildDynamicAppDetails(product),
    ),
  );
}

补充说明 #

• 如果JSON中存在更复杂的嵌套结构，可在遍历逻辑中增加对应类型的UI处理逻辑
• 键名的格式化规则可根据产品需求调整，比如自定义大小写或分隔符

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