Flutter 系列之GetX的学习(3) --> 其他实用功能

1. 路由导航过渡动画

在app里面我们从一级页面到另外一级页面,或是从一级页面进入到该页面的的二级页面是一种很常见的场景,中间的跳转动画,就是我们所要说的路由导航过渡动画. 其实这个效果你可以想象成 PDF幻灯片不同的切换效果.

1. 我们首先需要在main.dart文件里面将MaterialApp 修改为 GetMaterialApp
2. 其次添加属性defaultTransition 表示默认的路由过渡动画

效果:

2. app国际化配置

1. 第一步配置多语言文件.

新建untils文件夹,下面新建一个translations.dart文件.并填入以下 定义一个翻译类，实现 Translations 接口

2. 在main.dart文件配置默认的语言环境,以及指定语言资源文件.

locale 和 translations 属性

3. ui展示应用

使用tr 进行文本展示

Text('changeLocalBtnText'.tr,style: TextStyle(color: Colors.white),                    

4. 切换语言环境

GestureDetector(
              onTap: () {
                Get.updateLocale(const Locale('en', 'US'));
              },

5. 效果展示

3. 一系列的实用方法(类似于Lodash)

有很多实用方法, 大家点进去源码进行查阅即可,都有注释的

            GestureDetector(
              onTap: () {
                print(GetUtils.isEmail("xxxxxxxxxxxxxx@qq.com"));
              },
              child: Container(
                  width: 150,
                  height: 80,
                  padding: const EdgeInsets.all(16),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  child: const Text(
                    '校验是否是邮箱',
                    style: TextStyle(color: Colors.white),
                  )),
            ),         

4. storage 本地持久化存储

GetStorage 是 GetX 提供的一种轻量级的持久化存储解决方案，它允许在应用中存储和读取简单的数据，比如字符串、布尔值、数字等，并且不需要像 SQLite 那样复杂的数据库操作。GetStorage 使用非常简单，类似于 SharedPreferences，但更轻便。

4.1 GetStorage 的使用步骤

1. 添加依赖 ： 首先，确保在 pubspec.yaml 文件中添加了 get_storage 和 get 包。

   dependencies:
     get: ^4.6.5
     get_storage: ^2.0.3

2. 初始化 GetStorage ： 在使用 GetStorage 之前，你需要初始化它。可以在 main() 函数中完成。

   import 'package:flutter/material.dart';
   import 'package:get/get.dart';
   import 'package:get_storage/get_storage.dart';
   
   void main() async {
     // 确保初始化完成后再运行应用
     await GetStorage.init();
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return GetMaterialApp(
         home: HomePage(),
       );
     }
   }

3. 使用 GetStorage 保存和读取数据 ： 初始化完成后，可以使用 GetStorage 保存和读取数据。

   • 创建 GetStorage 实例 ：通常 GetStorage 是全局可用的，所以可以直接创建一个实例。
   • 写入数据 ：使用 .write() 方法。
   • 读取数据 ：使用 .read() 方法。

   示例代码如下：

   import 'package:flutter/material.dart';
   import 'package:get_storage/get_storage.dart';
   
   class HomePage extends StatelessWidget {
     // 创建一个 GetStorage 实例
     final box = GetStorage();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('GetStorage Example'),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               ElevatedButton(
                 onPressed: () {
                   // 保存数据到 GetStorage
                   box.write('username', 'John Doe');
                   box.write('loggedIn', true);
                   Get.snackbar('Data Saved', 'Username and login status saved.');
                 },
                 child: Text('Save Data'),
               ),
               ElevatedButton(
                 onPressed: () {
                   // 读取数据
                   String? username = box.read('username');
                   bool? loggedIn = box.read('loggedIn');
                   Get.snackbar('Data Loaded', 'Username: $username, LoggedIn: $loggedIn');
                 },
                 child: Text('Load Data'),
               ),
               ElevatedButton(
                 onPressed: () {
                   // 删除数据
                   box.remove('username');
                   Get.snackbar('Data Removed', 'Username removed.');
                 },
                 child: Text('Remove Data'),
               ),
             ],
           ),
         ),
       );
     }
   }

4. 常用方法：

   • 写入数据 ：box.write(String key, dynamic value) ------ 将数据写入存储。
   • 读取数据 ：box.read(String key) ------ 从存储中读取数据。
   • 删除数据 ：box.remove(String key) ------ 删除指定的键值对。
   • 清空所有数据 ：box.erase() ------ 清除所有存储的数据。

5. 监听存储的变化 ： GetStorage 允许你监听某个键值的变化，当存储中的数据发生变化时，会自动触发回调。

   box.listenKey('username', (value) {
     print('Username has been changed to: $value');
   });

6. 自定义存储文件 ： 默认情况下，GetStorage 使用的是一个全局的默认存储文件。如果你希望创建不同的存储空间，可以指定存储文件名：

   final customBox = GetStorage('customBox');
   customBox.write('data', 'Custom Data');

4.2 使用场景

• 保存用户的设置：比如主题颜色、语言选择等。
• 保存简单的应用数据：比如用户的登录状态、用户名、偏好设置等。
• 跨页面共享数据：GetStorage 可以持久化保存数据，页面之间可以轻松地共享这些数据。

4.3 总结

GetStorage 是 GetX 提供的一种非常简单且高效的存储解决方案，适合存储不复杂的小数据。在需要简单存储功能的场景下，它是一个很好的选择。如果需要更多的持久化数据存储或复杂的数据库操作，可以考虑使用 SQLite 或 Hive 等工具。

5. 主题切换

很简单

    onTap: () {
                if (Get.isDarkMode) {
                  Get.changeTheme(ThemeData.light());
                } else {
                  Get.changeTheme(ThemeData.dark());
                }
              },

6. 检查操作系统

class GetPlatform {
  static bool get isWeb => GeneralPlatform.isWeb;

  static bool get isMacOS => GeneralPlatform.isMacOS;

  static bool get isWindows => GeneralPlatform.isWindows;

  static bool get isLinux => GeneralPlatform.isLinux;

  static bool get isAndroid => GeneralPlatform.isAndroid;

  static bool get isIOS => GeneralPlatform.isIOS;

  static bool get isFuchsia => GeneralPlatform.isFuchsia;

  static bool get isMobile => GetPlatform.isIOS || GetPlatform.isAndroid;

  static bool get isDesktop =>
      GetPlatform.isMacOS || GetPlatform.isWindows || GetPlatform.isLinux;
}

使用

  // 当前的操作系统
    print(GetPlatform.isAndroid);
    print(GetPlatform.isIOS);
    print(GetPlatform.isLinux);

7. 更多

// 获取当前屏幕的参数
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/对话框/底部表单的上下文，可以在代码中的任何地方使用
Get.contextOverlay

// 注意：以下方法是上下文的扩展。因为你在 UI 的任何地方都有上下文的访问权限，所以可以在 UI 代码的任何地方使用它

// 如果你需要可变的高度/宽度（如桌面或可以缩放的浏览器窗口），你需要使用上下文
context.width
context.height

// 让你能够定义屏幕的一半、三分之一等。
// 对于响应式应用非常有用。
// param dividedBy (double) 可选 - 默认值：1
// param reducedBy (double) 可选 - 默认值：0
context.heightTransformer()
context.widthTransformer()

/// 类似于 MediaQuery.of(context).size
context.mediaQuerySize()

/// 类似于 MediaQuery.of(context).padding
context.mediaQueryPadding()

/// 类似于 MediaQuery.of(context).viewPadding
context.mediaQueryViewPadding()

/// 类似于 MediaQuery.of(context).viewInsets;
context.mediaQueryViewInsets()

/// 类似于 MediaQuery.of(context).orientation;
context.orientation()

/// 检查设备是否处于横屏模式
context.isLandscape()

/// 检查设备是否处于竖屏模式
context.isPortrait()

/// 类似于 MediaQuery.of(context).devicePixelRatio;
context.devicePixelRatio()

/// 类似于 MediaQuery.of(context).textScaleFactor;
context.textScaleFactor()

/// 获取屏幕的最短边
context.mediaQueryShortestSide()

/// 如果宽度大于 800，返回 true
context.showNavbar()

/// 如果最短边小于 600 像素，返回 true
context.isPhone()

/// 如果最短边大于 600 像素，返回 true
context.isSmallTablet()

/// 如果最短边大于 720 像素，返回 true
context.isLargeTablet()

/// 如果当前设备是平板，返回 true
context.isTablet()

/// 根据屏幕大小返回一个值<T>
/// 可以为：
/// watch: 如果最短边小于 300
/// mobile: 如果最短边小于 600
/// tablet: 如果最短边小于 1200
/// desktop: 如果宽度大于 1200
context.responsiveValue<T>()