Flutter - Get进阶用法

01344

698人浏览 · 2025-10-29 11:28:31

01344 · 2025-10-29 11:28:31 发布

单论上手难度来讲，Get包绝对是功能强大最好用的状态管理之一，并且Get还提供了简单的路由管理，多语言实现，Dialog等无需手动传递上下文（BuildContext）

路由管理示例


final routes = [
  GetPage(name: '/', page: () => HomePage()),
  GetPage(name: '/details', page: () => DetailsPage()),
];

// 使用 Get.to() 跳转到新的页面
Get.to(DetailsPage());

// 使用命名路由跳转
Get.toNamed('/details');

// 返回上级页面
Get.back();

多语言示例

class Messages extends Translations{
  static Locale? get locale => Get.deviceLocale;
  static const fallbackLocale = Locale('en', 'US');

  @override
  Map<String, Map<String, String>> get keys => {
    'en_US': en_US,
    'zh_CN': zh_CN,
  };
}

class StrRes {
  StrRes._();

  static String get charging => 'charging'.tr;
  static String get mine => 'mine'.tr;
  static String get logout => 'logout'.tr;
}


const Map<String, String> en_US = {
  "charging": "Charging",
  "mine": "Mine",
  "logout": "Logout",
}

const Map<String, String> zh_CN = {
  "charging": "充电",
  "mine": "我的",
  "logout": "退出登录",
}

void main() => runApp(EvdanceOcppApp());


class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return GetCupertinoApp(
        enableLog: true,
        builder: builder,
        locale: locale, // 默认语言
        translations: Messages(),
        localizationsDelegates: const [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        fallbackLocale: Messages.fallbackLocale,  // 回退语言
        supportedLocales: const [Locale('zh', 'CN'), Locale('en', 'US')],
        debugShowCheckedModeBanner: false,
        getPages: AppPages.routes,
        initialRoute: AppRoutes.login,
        theme: themeData,
      )
  }
}

// 切换语言
Get.updateLocale(Locale('es', 'ES'));

弹窗示例

CupertinoNavigationBar(
        middle: GestureDetector(
          onTap: () => Get.bottomSheet(
            ChargerSelectorSheet(
              logic.piles,
              selectedPile: logic.selectedPile.value,
              onTap: logic.pileSelector,
            ),
            isScrollControlled: true,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ThemedIcon(ImageRes.chevron_down, width: 18.w),
            ],
          ),
        ),
      ),






void _buildAlertView()  {
    // CupertinoAlertDialog自定义动态颜色
    Get.dialog(CupertinoAlertDialog(
      title: StrRes.logout.toText,
      content: StrRes.logout_hint.toText,
      actions: [
        CupertinoDialogAction(
          onPressed: Get.back,
          child: StrRes.cancel.toText,
        ),
        CupertinoDialogAction(
          isDestructiveAction: true,
          onPressed: () {
            Get.back();
            logic.logout();
          },
          child: StrRes.determine.toText,
        )
      ],
    ));

  }
}

控制器示例（重点）

控制器都需要注册，只要注册了就可以使用 Get.find 找到控制器，只是注册有不同的方式

注册方式	特点	适用场景
`Get.put`	立即创建并注册控制器	全局共享的控制器
`Get.lazyPut`	延迟创建控制器，首次使用时创建	适合懒加载的场景，减少不必要的资源消耗。
`Bindings`	与页面路由绑定，进入页面时自动注册	页面级别的控制器管理
`GetBuilder` 的 `init`	在 `GetBuilder` 首次构建时注册控制器	局部使用的控制器
`GetMaterialApp` 的 `initialBinding`	在应用启动时注册全局共享的控制器	整个应用生命周期中都需要使用的控制器

GetBuilder、Obx 和 GetX 三者区别

特性	GetBuilder	Obx	GetX
响应式	否，手动调用 `update()` 刷新	是，依赖 Rx 变量自动刷新	是，依赖 Rx 变量自动刷新
更新范围	整个 `builder` 区域	只更新被 Rx 变量包裹的部分	整个 `builder` 区域
使用简便	简单，适合简单状态管理	需要使用 Rx 变量，响应式更强大	需要使用 Rx 变量，且可以一次监听多个
监听多个变量	需要在 Controller 内调用多次 `update()`	监听多个变量需要多个 `Obx`	可在一个 `GetX` Widget 内监听多个 Rx 变量
推荐使用场景	简单、轻量状态管理	细粒度、局部响应式刷新	复杂状态管理，同时监听多个 Rx 变量
生命周期监听	无	无	支持生命周期回调（`initState` 、`dispose` 等）

GetX 的核心特点

它监听你 builder 里使用的所有 Rx 变量，一个或多个 Rx 变量变化就刷新整个 builder 里内容。
可以利用这个特性，把相关联的多个状态集中管理，UI 一起刷新，避免写多个 Obx。

Obx 的核心特点

响应式，细粒度局部刷新，监听单个 Rx 变量

GetBuilder 的核心特点

非响应式，依赖手动调用 update()。
只要调用 update()，整个 builder 区域都会刷新。
init 属性还可以对控制器（GetxController）进行注册
GetBuilder<T> 只会响应对应类型 T 的 update()
引用别的控制器不会自动触发刷新，除非手动 update() 或用 Rx/obx 响应式绑定。

总结

如果是单个变量（状态）影响多处 UI 可以使用GetBuilder作为父级，同时使用update()来统一刷新 UI，反之变量只影响单个 UI建议使用 Obx（这个变量需要包装成Rx类型，或者使用.obs修饰，.obs是扩展语法实际也是 Rx类型）以下对于两种都有示例

以上是对 Get 控制器（状态管理）的基本介绍，接下来看实际运用

1.利用 GetBuilder 的init属性注册全局状态管理

2.利用路由（页面）级别的控制器实现数据（逻辑），UI 层分离

以下使用RegisterPage为例

或者一个页面的 UI 显示受多个页面逻辑影响并且这些页面都有状态（.obs）,那么可以使用 Getx()来统一显示不同页面的状态，

控制器之间可以使用Get.find<T>()来查找使用已注册的控制器（子页面统一引入应用级别的控制器实现全局状态管理）

此外Get还提供许多功能强大的方法

// 从 currentScreen 获取当前参数
Get.arguments

// 获取上一个路由的名称
Get.previousRoute

// 获取要访问的原始路由，例如 rawRoute.isFirst()
Get.rawRoute

// 从 GetObserver 获取路由 API 的访问权限
Get.routing

// 检查 Snackbar 是否打开
Get.isSnackbarOpen

// 检查对话框是否打开
Get.isDialogOpen

// 检查底部面板是否打开
Get.isBottomSheetOpen

// 移除一个路由
Get.removeRoute()

// 重复此操作，直到返回 true
Get.until()

// 转到下一个路由，并移除所有之前的路由，直到返回 true
Get.offUntil()

// 转到下一个命名路由，并移除所有之前的路由，直到谓词返回 true
Get.offNamedUntil()


//检查应用运行在哪个平台上
GetPlatform.isAndroid
GetPlatform.isIOS
GetPlatform.isMacOS
GetPlatform.isWindows
GetPlatform.isLinux
GetPlatform.isFuchsia

//检查设备类型
GetPlatform.isMobile
GetPlatform.isDesktop
//所有平台在 Web 中均独立支持！
//您可以判断应用是否在浏览器中运行
//Windows、iOS、OSX、Android 等平台。
GetPlatform.isWeb

// 等同于：MediaQuery.of(context).size.height,
// 但不可变。
Get.height
Get.width

// 获取导航器的当前上下文。
Get.context

// 获取代码中前台任意位置的 Snackbar/Dialog/Bottomsheet 的上下文。
Get.contextOverlay

// 注意：以下方法是对 context 的扩展。由于
// 您可以在 UI 的任何位置访问 context，因此您可以在 UI 代码的任何位置使用它。
// 如果您需要可变的高度/宽度（例如可缩放的桌面或浏览器窗口），则需要使用 context。

context.width

context.height