Flutter -获取产品详细信息使用GetX将API连接到UI

zaq34kh6  于 2023-03-03  发布在  Flutter
关注(0)|答案(1)|浏览(145)

我是flutter初学者,使用dart语言。我尝试使用GetX在Flutter中集成一个API和UI。我创建了Json类和产品控件。当我尝试创建产品列表视图时,我收到以下错误。
先谢了!
错误行:

1. itemCount: productController.productList.length,
2. productController.productList[index].imageLink,
3. productController.productList[index].title,

错误:
1.没有为类型"Rx"定义getter "length"。
1.没有为类型"Rx"定义运算符"[]"。
1.没有为类型"Rx"定义运算符"[]"。
产品列表代码:

import 'package:flutter/material.dart';
    import 'package:practice/commonmodule/AppColor.dart';
    import 'package:practice/commonmodule/AppString.dart';
    import 'package:practice/productmodule/controllers/product_controller.dart';
    import 'package:get/get.dart';

    class ProductListView extends StatelessWidget {
     final ProductController productController = Get.put(ProductController());

     @override
    Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppString.productList),
      ),
      body: Obx(
        () {
          if (productController.isLoading.value)
            return Center(child: CircularProgressIndicator());
          else
            return ListView.builder(
              itemCount: productController.productList.length,
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    Row(
                      children: [
                        Container(
                          width: 150,
                          height: 100,
                          margin: EdgeInsets.fromLTRB(16, 8, 8, 8),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(8),
                            child: Image.network(
                              productController.productList[index].imageLink,
                              width: 150,
                              height: 100,
                              fit: BoxFit.fill,
                              color: AppColor.bluecolor,
                              colorBlendMode: BlendMode.color,
                            ),
                          ),
                        ),
                        Flexible(
                            child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              productController.productList[index].title,
                              style: TextStyle(fontSize: 18),
                            ),
                            Text(
                              productController.productList[index].description,
                              style:
                                  TextStyle(fontSize: 18, color: AppColor.grey),
                            ),
                            Text(
                              productController.productList[index].price,
                              style:
                                  TextStyle(fontSize: 18, color: AppColor.grey),
                            ),
                          ],
                        )),
                      ],
                    ),
                    Container(
                      color: AppColor.grey200,
                      height: 2,
                    )
                  ],
                );
              },
            );
        },
      ),
    );
    }
    }

产品控制器代码:

class ProductController extends GetxController {
  var isLoading = true.obs;
  var productList = ProductModel().obs;

  @override
  void onInit() {
    fetchProducts();
    super.onInit();
  }

  void fetchProducts() async {
    try {
      isLoading(true);
      var products = await ApiService.fetchProducts();
      if (products != null) {
        productList.value = products;
      }
    } finally {
      isLoading(false);
    }
  }
}

'

k10s72fa

k10s72fa1#

您需要创建产品列表模型到列表模型。

class ProductController extends GetxController {
  var isLoading = true.obs;
  RxList[ProductModel]  productList= [].obs;

  @override
  void onInit() {
    fetchProducts();
    super.onInit();
   }

   void fetchProducts() async {
   try {
    isLoading(true);
    var products = await ApiService.fetchProducts();
    if (products != null) {
    productList.value = products;
    }
  } finally {
    isLoading(false);
  }
}

}

相关问题