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

Question

我正在创建一个待办事项列表(某种)应用程序。我有一个使用 FutureBuilder 的 View ，它调用一个函数从 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”(或者我创建一个新项目，相同的过程)时，ListBuilder 不会刷新屏幕上的列表，尽管重新创建了 itemsList(使用 getxController .itemsList = RxList.generate(...)) 和可观察的。

Answer 1

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

所以你的 Controller 应该看起来像这样:

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(