Flutter使用GetX调用API时页面不刷新如何重新获取最新数据

核心原因 #

你当前的ProductListController在第一次Get.put后默认会全局留存，只有第一次初始化时会执行onInit生命周期触发接口请求。后续返回到列表页时，如果页面没有被销毁，initState不会重复执行，Controller也不会重新创建，因此不会主动拉取最新的接口数据。 #

可行的解决方法 #

方案1：新增/编辑数据返回后主动拉取（推荐） #

在跳转到新增数据页的位置，等待页面返回后手动调用接口拉取方法，只会在数据有变动的场景触发请求，性能最优：

// 原有跳转新增页面的逻辑修改为如下
await Get.to(const AddProductPage());
// 从新增页面返回后直接触发拉取最新数据
productListController.fetchproductList();

方案2：页面销毁时自动清除Controller，每次进入重新初始化 #

如果不需要全局保留Controller实例，可以在页面销毁时删除对应的Controller，下次进入页面会重新创建Controller自动触发接口请求：
重写列表页的dispose方法即可：

@override
void dispose() {
  Get.delete<ProductListController>();
  super.dispose();
}

方案3：页面可见时自动拉取 #

如果需要每次进入列表页都拉取最新数据，可以配合路由监听器，在页面切到前台时触发请求，实现逻辑如下：

// 首先在全局声明路由监听器并注册到MaterialApp
final RouteObserver<ModalRoute<void>> routeObserver = RouteObserver<ModalRoute<void>>();
MaterialApp(
  navigatorObservers: [routeObserver],
  // 其他原有配置
)

// 列表页State中加入监听逻辑
class _ProductListPageState extends State<ProductListPage> with RouteAware {
  var productListController = Get.put(ProductListController());

  @override
  void didChangeDependencies() {
    routeObserver.subscribe(this, ModalRoute.of(context)!);
    super.didChangeDependencies();
  }

  // 从其他页面返回当前页时自动触发拉取
  @override
  void didPopNext() {
    productListController.fetchproductList();
    super.didPopNext();
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }
}

注意事项 #

你的列表布局必须用Obx包裹才能响应响应式变量的更新，示例如下：

Obx(() {
  if (productListController.isLoading.value) {
    return const Center(child: CircularProgressIndicator());
  }
  return ListView.builder(
    itemCount: productListController.productList.length,
    itemBuilder: (context, index) {
      // 你的商品项布局代码
    },
  );
})

内容的提问来源于stack exchange，提问作者Kavati vamshi krishna