Flutter 使用 Getx 实现同一个界面被循环跳转多次并刷新数据的解决方案

在开发中的过程中可能会遇到这样的需求:同一个界面被循环跳转多次并且通过传递的参数不同刷新当前界面的数据。

场景如下:

接下来我们看下分析看,如何解决这个问题。

我们常用的方式是创建一个View extends GetView, 再创建 Controller extends GetxController,然后在 app_pages.dart文件中配置路由,然后就可以调用Getx提供的路由方法(比如:Get.toNamed )跳转到界面了,大概像下面这样(忽略细节):

View

scala 复制代码
class HomePage extends GetView<HomePageController> {
  const ScreenPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: null,
      body:SizedBox(
                  /// 省略布局
      ),
    );
  }
}

Controller

scala 复制代码
class HomePageController extends GetxController {

    @override
    void onInit()  {
        super.onInit();
        ///loading 数据
        }

}

路由配置

php 复制代码
static final routes = [
...
  GetPage(
    name: _Paths.HOME,
    page: () => const HomePage(),
    binding: BindingsBuilder((){
        Get.lazyPut<HomePageController>(()=>HomePageController());
    })

  ),
  ...
  ]

跳转

css 复制代码
Get.toNamed(Routes.HOME, arguments: {"arg1": 0, "arg2": 0});

我们注意到路由配置中使用到了,Get.lazyPut ,当你调过一次这个控制器后就会被缓存起来,直到这个控制器被销毁前它都是同一个实例,也就是俗称的单例。当在一个app中出现循环调用同一个界面时,它绑定的控制器不会重新初始化,导致界面数据不会被刷新。

怎么办呢?

这个时候我们的主角就上场了,他就是 "冷门" 而强大的 Get.create 搭配 GetWidget 使用就能解决我们遇到的问题。顾名思义,Get.create会在每次调用该控制器时重新创建一个新的实例控制器,且保留当前数据。

View 中的 GetView 替换为 GetWidget, 路由配置中的 Get.lazyPut 替换为 Get.create,这样就能实现同一个界面被循环跳转多次并且通过传递的参数不同刷新当前界面的数据的需求了。

更改后的代码:

View

scala 复制代码
class HomePage extends GetWidget<HomePageController> {
  const ScreenPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: null,
      body:SizedBox(
                  /// 省略布局
      ),
    );
  }
}

路由配置

php 复制代码
static final routes = [
...
  GetPage(
    name: _Paths.HOME,
    page: () => const HomePage(),
    binding: BindingsBuilder((){
        Get.create<HomePageController>(()=>HomePageController());
    })

  ),
  ...
  ]

问题解决了,开心。

相关推荐
renke3364几秒前
Flutter for OpenHarmony:形状拼图 - 基于路径匹配与空间推理的交互式几何认知系统
flutter
千逐681 分钟前
多物理场耦合气象可视化引擎:基于 Flutter for OpenHarmony 的实时风-湿-压交互流体系统
flutter·microsoft·交互
ujainu14 分钟前
保护你的秘密:Flutter + OpenHarmony 鸿蒙记事本添加笔记加密功能(五)
flutter·openharmony
特立独行的猫a15 分钟前
主要跨端开发框架对比:Flutter、RN、KMP、Uniapp、Cordova,谁是未来主流?
flutter·uni-app·uniapp·rn·kmp·kuikly
一只大侠的侠18 分钟前
Flutter开源鸿蒙跨平台训练营 Day17Calendar 日历组件开发全解
flutter·开源·harmonyos
晚霞的不甘19 分钟前
Flutter for OpenHarmony 打造沉浸式呼吸引导应用:用动画疗愈身心
服务器·网络·flutter·架构·区块链
renke336443 分钟前
Flutter for OpenHarmony:数字涟漪 - 基于扩散算法的逻辑解谜游戏设计与实现
算法·flutter·游戏
一只大侠的侠1 小时前
Flutter开源鸿蒙跨平台训练营 Day14React Native表单开发
flutter·开源·harmonyos
子春一1 小时前
Flutter for OpenHarmony:音律尺 - 基于Flutter的Web友好型节拍器开发与节奏可视化实现
前端·flutter
微祎_1 小时前
Flutter for OpenHarmony:单词迷宫一款基于 Flutter 构建的手势驱动字母拼词游戏,通过滑动手指连接字母路径来组成单词。
flutter·游戏