Flutter购物应用API数据不显示问题排查求助

问题根源 #

1. API响应解析错误：直接将整个API响应解析为List，但实际API返回的是多层嵌套的JSON对象，NewProducts数组仅存在于result字段下。
2. 数据未同步到视图绑定变量：控制器使用StateMixin的change方法更新状态，但视图绑定的是beveragesList，两者未关联导致视图无法获取解析后的数据。
3. 视图未处理状态变化：当前视图仅直接渲染列表，未处理加载中、请求失败等状态，无法反馈请求过程。

解决方案 #

1. 修改控制器的API数据解析逻辑 #

更新getProductList方法，正确解析API层级结构，并将数据同步到beveragesList：

class ShopController extends GetxController with StateMixin<List<NewProducts>>{
  var beveragesList = <NewProducts>[].obs;
  RxBool isLoading = false.obs;
  RxBool noMoreData = false.obs;
  int lastPage = 2;
  int currentPage = 1; // 修正拼写错误：currenctPage -> currentPage

  final count = 0.obs;

  ShopProductProvider provider;
  ShopController ({required this.provider});

  @override
  void onInit() {
    getProductList(true);
    super.onInit();
  }

  getProductList(bool isLoad) async {
    if(isLoad){
      change(null, status: RxStatus.loading());
      isLoading.value = true;
    }

    try {
      final responseBody = await provider.getProductlist();
      if (kDebugMode){
        print(responseBody);
      }
      // 逐层解析JSON结构
      Map<String, dynamic> responseMap = json.decode(responseBody) as Map<String, dynamic>;
      List<dynamic> newProductsJson = responseMap['result']['NewProducts'] as List;
      final data = newProductsJson.map((d) => NewProducts.fromJson(d)).toList();
      
      beveragesList.assignAll(data); // 同步数据到视图绑定变量
      change(data, status: RxStatus.success());
    } catch (error) {
      change(null, status: RxStatus.error(error.toString()));
    } finally {
      isLoading.value = false;
    }
  }
}

2. 更新视图代码，处理状态与数据显示 #

在视图中添加状态判断，根据控制器状态渲染对应内容：

class ShopView extends GetView<ShopController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Obx(() {
        // 加载中状态
        if (controller.isLoading.value) {
          return const Center(child: CircularProgressIndicator());
        }
        // 错误状态
        if (controller.status.isError) {
          return Center(child: Text('加载失败：${controller.status.errorMessage}'));
        }
        // 空数据状态
        if (controller.beveragesList.isEmpty) {
          return const Center(child: Text('暂无商品数据'));
        }
        // 成功渲染网格
        return StaggeredGrid.count(
          crossAxisCount: 2,
          mainAxisSpacing: 3.0,
          crossAxisSpacing: 0.0,
          children: controller.beveragesList
              .map((newproducts) => GestureDetector(
                    onTap: () {
                      Get.toNamed(Routes.SINGLEPRODUCT);
                    },
                    child: Container(
                      padding: const EdgeInsets.all(5),
                      child: MedicineCard(
                        item: newproducts,
                        heroSuffix: "explore_screen",
                      ),
                    ),
                  ))
              .toList(),
        );
      }),
    );
  }
}

3. 额外优化建议 #

• 在Provider中添加响应状态码校验，增强请求鲁棒性：

class ShopProductProvider extends GetConnect {
  Future<dynamic> getProductlist() async {
    final response = await http.get(Uri.parse('${BaseUrl.baseUrl}/api/homepage'));
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('请求失败，状态码：${response.statusCode}');
    }
  }
}

内容的提问来源于stack exchange，提问作者Mehedi Hasan Sumon