我正在创建一个待办事项列表(某种)应用程序。 我有一个使用 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(...)
) 和可观察的。
最佳答案
使用 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(
关于flutter - 在 FutureBuilder 中使用 GetX 构建列表 - UI 未更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70325600/