Flutter收藏状态重启后未持久化问题求助（API交互正常）

核心问题 #

当前代码仅在用户手动点击收藏按钮时，更新内存中的isFavorite Map来维护UI状态，但应用启动阶段没有从后端拉取用户已有的收藏列表并初始化这个Map。重启后内存状态清空，UI自然无法显示之前的收藏状态。

解决方案 #

需要在控制器初始化时，主动请求后端获取用户的收藏列表，将已收藏的商品ID同步到isFavorite Map中，确保UI能正确渲染历史收藏状态。

具体代码修改 #

1. 更新FavoriteController，添加初始化逻辑与收藏列表获取方法

class FavoriteController extends GetxController {
  FavoriteData favoriteData = FavoriteData(Get.find());

  List data = [];
  late StatusRequest statusRequest;
  MyServices myServices = Get.find();
  Map isFavorite = {};

  // 控制器初始化时自动加载收藏列表
  @override
  void onInit() {
    super.onInit();
    _loadUserFavorites();
  }

  // 从后端拉取用户已收藏的商品列表
  Future<void> _loadUserFavorites() async {
    statusRequest = StatusRequest.loading;
    update(); // 触发UI加载状态更新

    final userId = myServices.sharedPreferences.getString("id")!;
    final response = await favoriteData.getFavoriteList(userId);
    print("获取收藏列表响应: $response");

    statusRequest = handlingData(response);
    if (StatusRequest.success == statusRequest) {
      if (response['status'] == "success") {
        data.addAll(response['data']);
        // 遍历返回的收藏数据，初始化isFavorite Map
        for (var item in response['data']) {
          // 注意：此处字段名需与后端返回的商品ID字段一致，比如items_id
          isFavorite[item['items_id']] = "1";
        }
      } else {
        statusRequest = StatusRequest.failure;
      }
    }
    update(); // 更新UI，渲染收藏状态
  }

  setFavorite(id, val) {
    isFavorite[id] = val;
    update();
  }

  // 原addFavorite方法保留，可在成功后选择重新拉取列表或依赖本地状态更新
  addFavorite(String itemsid) async {
    data.clear();
    statusRequest = StatusRequest.loading;
    var response = await favoriteData.addFavorite(
        myServices.sharedPreferences.getString("id")!, itemsid);
    print("添加收藏响应: $response");
    statusRequest = handlingData(response);
    if (StatusRequest.success == statusRequest) {
      if (response['status'] == "success") {
        Get.rawSnackbar(
            title: "اشعار",
            messageText: const Text("تم اضافة المنتج من المفضلة "));
      } else {
        statusRequest = StatusRequest.failure;
      }
    }
    update();
  }

  // 原removeFavorite方法保留
  removeFavorite(String itemsid) async {
    data.clear();
    statusRequest = StatusRequest.loading;
    var response = await favoriteData.removeFavorite(
        myServices.sharedPreferences.getString("id")!, itemsid);
    print("移除收藏响应: $response");
    statusRequest = handlingData(response);
    if (StatusRequest.success == statusRequest) {
      if (response['status'] == "success") {
        Get.rawSnackbar(
            title: "اشعار",
            messageText: const Text("تم حذف المنتج من المفضلة "));
      } else {
        statusRequest = StatusRequest.failure;
      }
    }
    update();
  }
}

2. 在FavoriteData中添加获取收藏列表的接口方法

// 示例实现，需根据实际后端接口调整
class FavoriteData {
  final Dio dio;
  FavoriteData(this.dio);

  Future getFavoriteList(String userId) async {
    return await DioHelper.postData(
      url: AppLink.getFavorite, // 替换为后端获取收藏列表的接口地址
      data: {"user_id": userId},
    ).then((response) => response.data);
  }

  // 原addFavorite、removeFavorite方法保留
}

注意事项 #

• 确认后端getFavorite接口返回的数据结构包含用户已收藏的商品ID列表，字段名需与代码中item['items_id']匹配
• 若需优化性能，可在本地用SharedPreferences缓存收藏状态，但需保证与后端数据同步
• UI部分的GetBuilder已绑定FavoriteController，控制器调用update()时会自动刷新收藏图标状态

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