Getx 无法与 FutureBuilder 一起正常工作以获取更新列表答案

【问题标题】：Getx is not working properly with FutureBuilder for update listGetx 无法与 FutureBuilder 一起正常工作以获取更新列表
【发布时间】：2021-02-23 06:40:41
【问题描述】：

我在我的项目中使用 Getx 控制器。我已经为 FutureBuilder 创建了用于显示列表的控制器，但未在 Future Function 上设置 .Obs。我正在分享代码。

class PPHomeController extends GetxController {
  Future<List<PPProductRenterModel>> listNearProduct;

  // i want to set .Obs end of the "listNearProduct" but it's not working because of Future.  

  FetchNearProductList({@required int price}) async {
      listNearProduct = CallGetNearProducts();// Http API Result
  }
} 



{
  PPHomeController _homeController = Get.put(PPHomeController());

  Widget mainProductListView() {
return FutureBuilder<List<PPProductRenterModel>>
  (builder: (context, AsyncSnapshot<List<PPProductRenterModel>> projectSnap){
    if(!projectSnap.hasData){
      if(projectSnap.connectionState == ConnectionState.waiting){
        return Container(
          child: Loading(),
        );
      }
    }
   
    return ListView.builder(
        itemCount: projectSnap.data.length,
        itemBuilder: (context, index) {

          PPProductRenterModel model = projectSnap.data[index];
          PPPrint(tag: "CheckId",value: model.productId);
          return ProductMainItemRow(model);
        });

},
  future: _homeController.listNearProduct,);

【问题讨论】：

标签： flutter dart flutter-futurebuilder flutter-getx

【解决方案1】：

你从来没有真正打电话FetchNearProductList。

您需要在某个地方调用它，最好是在 FutureBuilder 使用该 Future 之前。

【讨论】：

【解决方案2】：

形成docs：

3 - 第三种，更实用，更简单和首选的方法，只需添加 .obs 作为您价值的属性：

final items = <String>[].obs;

按照该说明，这应该可以工作：

final listNearProduct = Future.value(<PPProductRenterModel>[]).obs;

例如：

// controller
final list = Future.value(<String>[]).obs;

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

Future<List<String>> callApi() async {
  await Future.delayed(Duration(seconds: 2));
  return ['test'];
}

void fetchList() async {
  list.value = callApi();
}


// screen
@override
Widget build(BuildContext context) {
  return GetX<Controller>(
    init: Controller(),
    builder: (controller) {
      return FutureBuilder<List<String>>(
        future: controller.list.value,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            print(snapshot.data[0]); // Output: test
            return Text(snapshot.data[0]);
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }

          // By default, show a loading spinner.
          return CircularProgressIndicator();
        },
      );
    },
  );
};

【讨论】：

感谢您的回复，但我遇到以下错误：- 类型“Future”不是“Future>”类型的子类型
在测试上面的代码时，我偶然发现了同样的错误。它是由Future callApi() async { 而不是Future<List<String>> callApi() async { 引起的。您的错误发生在哪里？
是的，我错过了在 API 调用方法中设置“Future>”。非常感谢它对我来说很好。再次感谢马蒂亚斯
太好了，欢迎您@Alpit Panchal。既然它解决了您的问题，您介意将其标记为已接受吗？
你能再帮帮我吗？如何在上述过程中从列表中删除项目。谢谢@Matthias。

【解决方案3】：

有一种更简洁的方法可以在 GetX 中实现 List 而无需担心类型转换：

实例化它：

final myList = [].obs;

分配它：

myList.assignAll( listOfAnyType );

（参考）使用List.value时出现Flutter错误：

'value' 已弃用，不应使用。 List.value 已弃用。使用 [yourList.assignAll(newList)]。尝试更换使用替换为已弃用的成员。

详细代码示例

ProductController.dart

class ProductController extends GetxController {
  final productList = [].obs;

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

  void fetchProducts() async {
    var products = await HttpServices.fetchProducts();
    if (products != null) {
      productList.assignAll(products);
    }
  }
}

HttpServices.dart

class HttpServices {
  static var client = http.Client();

  static Future<List<Product>> fetchProducts() async {
    var url = 'https://link_to_your_api';
    var response = await client.get(url);
    if (response.statusCode == 200) {
      return productFromJson(response.body);
    } else {
      return null;
    }
  }
}

product.dart

class Product {
  Product({
    this.id,
    this.brand,
    this.title,
    this.price,
    ....
  });
  ....
}

【讨论】：

这对我有用。谢谢...