Flutter如何将SharedPreferences的JSON数据填充到GridView替换硬编码数据

1. 导入基础解析库 #

Flutter 自带 JSON 解析能力，直接在对应 Dart 文件头部引入转换库即可：

import 'dart:convert';

2. 修改 PortfolioAdapter 新增JSON解析方法 #

你不需要调整原有 portfolioModel 结构，只需要在 Adapter 中新增适配 JSON 结构的取值逻辑，关联持仓项的 SYMBOLID 和价格映射表即可：

class PortfolioAdapter {
  // 新增：从JSON字符串解析持仓数据
  List<portfolioModel> getPortfolioFromJson(String jsonSource) {
    // 第一步：将JSON字符串转为Dart Map结构
    final Map<String, dynamic> fullData = jsonDecode(jsonSource);
    final portfolio = fullData["portfolio"];
    final List holdings = portfolio["holdings"];
    final Map openingPriceMap = portfolio["openingPrice"];
    final Map closingPriceMap = portfolio["closingPrice"];

    // 第二步：遍历持仓项，匹配对应价格，组装成Model列表
    return holdings.map((item) {
      String id = item["SYMBOLID"];
      return portfolioModel(
        symbol: item["SYMBOL"],
        openingP: openingPriceMap[id].toString(),
        closingP: closingPriceMap[id].toString(),
        holdings: item["HOLDINGS"],
        shareNames: item["SHARENAME"],
      );
    }).toList();
  }

  // 原有硬编码方法可保留用于本地测试
  List<portfolioModel> getPortfolio() {
    // 你原有硬编码逻辑不变
  }
}

3. 调用方法替换数据源 #

拿到JSON数据后，调用新方法获取的列表和原有硬编码返回的列表结构完全一致，不需要修改你的 GridView.builder 逻辑：

// 示例：假设responseBody是接口返回的JSON字符串
PortfolioAdapter adapter = PortfolioAdapter();
List<portfolioModel> realData = adapter.getPortfolioFromJson(responseBody);
// 直接把realData传给GridView的数据源即可

可选优化 #

如果需要做异常兼容，可以在取值时添加空判断，避免字段缺失导致崩溃，示例：

openingP: openingPriceMap[id]?.toString() ?? "0.0",

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