Flutter使用Getx整合API到UI时遇Rx类型错误求助

问题描述 #

在Flutter中使用Getx连接API到UI，已创建JSON模型类和产品控制器，但创建产品列表视图时出现以下错误：

错误行及对应信息 #

• 错误行：itemCount: productController.productList.length,
  错误信息：The getter 'length' isn't defined for the type 'Rx'.
• 错误行：productController.productList[index].imageLink,
  错误信息：The operator '[]' isn't defined for the type 'Rx'.
• 错误行：productController.productList[index].title
  错误信息：The operator '[]' isn't defined for the type 'Rx'.

相关代码 #

产品列表视图代码 #

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:helloworld/commonmodule/Appcolor.dart';
import 'package:helloworld/productmodule/controllers/product_controller.dart';
import 'package:helloworld/commonmodule/Appstring.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.value[index].imageLink,
                                width: 150,
                                height: 100,
                                fit: BoxFit.fill,
                                color: AppColor.purplecolor,
                                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].brand,
                                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,
                    ),
                  ],
                );
              });
      }),
    );
  }
}

产品模型代码 #

import 'dart:convert';

ProductModel productModelFromJson(String str) =>
    ProductModel.fromJson(json.decode(str));

String productModelToJson(ProductModel data) => json.encode(data.toJson());

class ProductModel {
  List<Products>? products;
  int? total;
  int? skip;
  int? limit;

  ProductModel({this.products, this.total, this.skip, this.limit});

  ProductModel.fromJson(Map<String, dynamic> json) {
    if (json['products'] != null) {
      products = <Products>[];
      json['products'].forEach((v) {
        products!.add(new Products.fromJson(v));
      });
    }
    total = json['total'];
    skip = json['skip'];
    limit = json['limit'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.products != null) {
      data['products'] = this.products!.map((v) => v.toJson()).toList();
    }
    data['total'] = this.total;
    data['skip'] = this.skip;
    data['limit'] = this.limit;
    return data;
  }
}

class Products {
  int? id;
  String? title;
  String? description;
  int? price;
  double? discountPercentage;
  double? rating;
  int? stock;
  String? brand;
  String? category;
  String? thumbnail;
  List<String>? images;

  Products(
      {this.id,
      this.title,
      this.description,
      this.price,
      this.discountPercentage,
      this.rating,
      this.stock,
      this.brand,
      this.category,
      this.thumbnail,
      this.images});

  Products.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    description = json['description'];
    price = json['price'];
    discountPercentage = json['discountPercentage'];
    rating = json['rating'];
    stock = json['stock'];
    brand = json['brand'];
    category = json['category'];
    thumbnail = json['thumbnail'];
    images = json['images'].cast<String>();
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['description'] = this.description;
    data['price'] = this.price;
    data['discountPercentage'] = this.discountPercentage;
    data['rating'] = this.rating;
    data['stock'] = this.stock;
    data['brand'] = this.brand;
    data['category'] = this.category;
    data['thumbnail'] = this.thumbnail;
    data['images'] = this.images;
    return data;
  }
}

错误原因及解决方法 #

错误原因 #

productList在Getx控制器中是Rx类型的可观察对象，直接调用.length或[]操作符会报错，因为这些方法是针对原生List的，而非Rx包装后的对象。

解决方法 #

1. 获取Rx内部的List实例：所有操作都需要通过.value访问Rx对象包裹的List，再调用List的方法。
2. 修正模型字段匹配：代码中使用的imageLink在模型类中不存在，需替换为模型定义的thumbnail或images字段。
3. 类型转换：price是int类型，需转为字符串才能在Text组件中显示。

修改后的核心代码片段 #

return ListView.builder(
    itemCount: productController.productList.value.length,
    itemBuilder: (context, index) {
      final product = productController.productList.value[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(
                      product.thumbnail ?? '',
                      width: 150,
                      height: 100,
                      fit: BoxFit.fill,
                      color: AppColor.purplecolor,
                      colorBlendMode: BlendMode.color),
                ),
              ),
              Flexible(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      product.title ?? '',
                      style: TextStyle(fontSize: 18),
                    ),
                    Text(
                      product.description ?? '',
                      style: TextStyle(
                          fontSize: 18, color: AppColor.grey),
                    ),
                    Text(
                      product.brand ?? '',
                      style: TextStyle(
                          fontSize: 18, color: AppColor.grey),
                    ),
                    Text(
                      product.price?.toString() ?? '',
                      style: TextStyle(
                          fontSize: 18, color: AppColor.grey),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Container(
            color: AppColor.grey200,
            height: 2,
          ),
        ],
      );
    });

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