在 FutureBuilder 中使用 GetX 构建列表 - UI 未更新答案

【问题标题】：Using GetX in a FutureBuilder to build a list - the UI is not updated在 FutureBuilder 中使用 GetX 构建列表 - UI 未更新
【发布时间】：2022-01-16 09:22:48
【问题描述】：

我正在创建一个待办事项列表（某种）应用程序。我有一个使用 FutureBuilder 的视图，它调用一个函数来从 SQLite 数据库中获取文章并显示为卡片。我有一个 getx_controller.dart，其中包含可观察的列表：

class Controller extends GetxController {
  // this is the list of items
  var itemsList = <Item>[].obs;
}

我有一个 items_controller.dart

  // function to delete an item based on item id
  void deleteItem(id) {
    final databaseHelper = DatabaseHelper();

    // remove item at item.id position
    databaseHelper.deleteItem(tableItems, id);

    print('delete item with id $id');
    this.loadAllItems();
  }

loadAllItems 是一个查询数据库的函数

最后是包含 FutureBuilder 的 list_builder.dart

final itemController = Get.put(ItemsController());

@override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Item>>(
        future: itemController.loadAllItems(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator();
          } else if (snapshot.hasData) {
            print(snapshot.data.toString());
            return Obx(() => ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  return Slidable(
                    actionExtentRatio: 0.25,
                    actionPane: SlidableDrawerActionPane(),
                    child: _itemCard(index, snapshot.data![index]),
                    actions: <Widget>[
                      IconSlideAction(
                          caption: 'Elimina',
                          color: Colors.red,
                          icon: Icons.delete,
                          onTap: () {
                            itemController.deleteItem(snapshot.data![index].id);
                            itemController.loadAllItems();
                          }),
                    ],
                    secondaryActions: <Widget>[
                      IconSlideAction(
                        caption: 'Modifica',
                        color: Colors.blue,
                        icon: Icons.edit,
                        onTap: () {},
                      ),
                    ],
                  );
                }));
          } else {
            return Container(
              child: Text('Loading'),
            );
          }
        });
    // });
  }

我的问题是，当我点击“Elimina”（或者我创建一个新项目，相同的过程）时，尽管重新创建了 itemsList（使用 getxController.itemsList = RxList.generate(...)），但 ListBuilder 不会刷新屏幕上的列表并且可以观察到。

【问题讨论】：

我不确定你为什么要使用 FutureBuilder 和 observables。
@S.M.JAHANGIR 因为这是我在 sqflite 教程中看到的。你有什么推荐的？

标签： flutter flutter-getx flutter-futurebuilder

【解决方案1】：

使用 observables 时不需要使用FutureBuilder。这是多余的，并使您的代码变得复杂。相反，您应该将等待的 Future（实际数据/项目）分配给您的可观察列表 (itemList)。您的 UI 应该会自动更新。

所以你的控制器应该是这样的：

class Controller extends GetxController {
 // this is the list of items
 var itemsList = <Item>[].obs;

 @override
 onInit()async{
   await loadAllItems();
 }

 loadAllItems()async{
     var databaseResponse= await dbHelper.getAll();

  itemList.assignAll(databaseResponse);
  }

}

您的 UI 构建方法应该只返回观察 (Obx) ListView.builder，如下所示，您就完成了：

@override
 Widget build(BuildContext context){
   return Obx(() => ListView.builder(
            itemCount: controller.itemList.length,
            itemBuilder: (context, index) {
    var item = comtroller.itemList[index]; // use this item to build your list item
              return Slidable(

【讨论】：