Flutter电商应用SharedPreferences存储购物车数据异常求助

嘿，我看了你的代码，问题出在SharedPreferences的存储和解析方式上，咱们一步步来理清楚：

你当前代码的核心问题 #

你把从接口拿到的cart数组直接转成了字符串（['$cart']）存入StringList，但这个字符串并不是标准的JSON格式，而且取出后直接赋值给cartProduct，此时cartProduct是List<String>类型，不是你需要的List<Map<String, dynamic>>，所以用cartProduct[index]["product"]访问属性时自然会报错——字符串可没有键值对的访问方式呀！

正确的存储与解析方式 #

我们需要把数组转成标准JSON字符串存入SharedPreferences，取出时再解析回数组对象，这样就能正常访问商品属性了。

修改后的getCart方法代码

import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

// ... 你的Cart StatefulWidget代码保持不变

class _CartState extends State<Cart> {
  List cart = [];
  List cartProduct = [];

  @override
  void initState() {
    super.initState();
    getCart(); // 建议把super.initState放在前面，符合Flutter规范
  }

  Future getCart() async {
    // 用Uri.parse处理URL，更安全规范
    final response = await http.get(
      Uri.parse('http://192.168.10.6/flutter/cat6GetbyID.php?product_id=${widget.productId}'),
    );

    if (response.statusCode == 200) {
      // 明确类型转换，避免隐式类型问题
      cart = json.decode(response.body) as List;
      SharedPreferences prefs = await SharedPreferences.getInstance();

      // 1. 把cart数组转成标准JSON字符串存储
      await prefs.setString('cart_products', json.encode(cart));

      // 2. 读取并解析回数组对象
      String? savedCartJson = prefs.getString('cart_products');
      if (savedCartJson != null) {
        setState(() {
          cartProduct = json.decode(savedCartJson) as List;
        });
      }
    }
  }

  // ... 你的页面构建代码
  // 现在可以正常使用Text(cartProduct[index]["product"])了
}

额外优化建议（可选） #

如果你的需求是添加商品到购物车（而非每次替换），上面的代码还需要调整——因为当前代码会每次覆盖之前的购物车数据。你可以先读取已有购物车数据，再添加新商品，最后重新存储：

Future addToCart() async {
  final response = await http.get(
    Uri.parse('http://192.168.10.6/flutter/cat6GetbyID.php?product_id=${widget.productId}'),
  );

  if (response.statusCode == 200) {
    List newProduct = json.decode(response.body) as List;
    SharedPreferences prefs = await SharedPreferences.getInstance();

    // 读取已有购物车数据
    String? savedCartJson = prefs.getString('cart_products');
    List existingCart = savedCartJson != null ? json.decode(savedCartJson) as List : [];

    // 可选：检查商品是否已存在，避免重复添加
    bool isProductExist = existingCart.any(
      (item) => item['product_id'] == widget.productId,
    );

    if (!isProductExist) {
      existingCart.add(newProduct.first); // 假设接口返回的是单个商品的数组
      await prefs.setString('cart_products', json.encode(existingCart));
    }

    setState(() {
      cartProduct = existingCart;
    });
  }
}

这样调整后，你的购物车数据就能正常存储和读取，也能正确访问商品的product属性啦！

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