如何在getx颤动中使列表的各个项目可观察答案

【问题标题】：How to make individual items of a list observable in getx flutter如何在getx颤动中使列表的各个项目可观察
【发布时间】：2022-01-03 15:00:32
【问题描述】：

我有一个包含数字的列表，一旦它们改变，用户界面也应该改变。我正在使用 getx 来制作这个位于 GetXController 内的列表。 UI 使用此控制器获取列表，然后使用网格列表创建单独的 TextField 并分配它们各自的值。我也尝试将列表标记为可观察，但我似乎无法使其工作。

编辑：我想听列表中的单个 RxInt 对象，而不是列表本身。所以问题是，每当我更改列表中的这个值时，监听器都不会更新。

【问题讨论】：

标签： flutter dart flutter-getx

【解决方案1】：

像这样制作变量：

  RxList list = [].obs;

然后像这样使用列表：

  Obx(()=> Text(list.length.toString()));

【讨论】：

【解决方案2】：

控制器类示例

    class VendorOfferController extends GetxController {
        static VendorOfferController to = Get.find();

        Rx<VendorOffer> vendorOffer = new VendorOffer().obs;

        VendorOfferRepository _vendorOfferRepository = new VendorOfferRepository();


  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    getVendorOffer();
   
  }

  getVendorOffer() async {
    Either<Failure, VendorOffer> data =
        await _vendorOfferRepository.getVendorOffer();

    data.fold((l) {
      AppExceptionHandle.exceptionHandle(l);
    }, (r) {
  
      vendorOffer.value = r;
    });
  }
}

UI类示例

    class VendorOfferScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    Get.put(VendorOfferController());
    return Scaffold(body: Obx(() {

      return VendorOfferController.to.vendorOffer.value.vendorList.isEmpty
          ? Center(
              child: CircularProgressIndicator(),
            )
          :Padding(
              padding: const EdgeInsets.only(top: 16, bottom: 16),
              child: ListView.separated(
                  itemBuilder: (context, int index) {
               
          
                    return  VendorOfferCard(
                        address: VendorOfferController.to.vendorOffer.value
                                .vendorList[index].address ??
                            "12 /170 road:10 ,Mirpur 10 ",
                        name: VendorOfferController.to.vendorOffer.value
                                .vendorList[index].fullName ??
                            "Food Name",
                        deliveryCharge: VendorOfferController.to.vendorOffer
                                .value.vendorList[index].deliveryCharge ??
                            "\$10 ",
                        distance:
                            "${_distance == null ? 0 : _distance.round()} km",
                        rating: VendorOfferController.to.vendorOffer.value
                                .vendorList[index].rating ??
                            2,
                        offer:
                            "${VendorOfferController.to.vendorOffer.value.vendorList[index].offer == null ? "0" : VendorOfferController.to.vendorOffer.value.vendorList[index].offer.amount} %",
                        image: VendorOfferController.to.vendorOffer.value
                                    .vendorList[index].vendorImage !=
                                null
                            ? ApiUrls.download_base_url +
                                VendorOfferController.to.vendorOffer.value
                                    .vendorList[index].vendorImage
                            : AppAssets.demo_product_image,
                      ),
                    );
                  },
                  separatorBuilder: (context, int index) {
                    if (index == 0) {
                      return Container(
                        padding: EdgeInsets.only(top: 10),
                      );
                    }
                    return Container(
                      height: 10,
                    );
                  },
                  itemCount: VendorOfferController
                      .to.vendorOffer.value.vendorList.length),
            );

【讨论】：