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

心安事随

发布于 2024-11-28 09:05:49

26800

代码可运行

文章被收录于专栏：前端大合集前端大合集

运行总次数：0

代码可运行

1. 路由导航过渡动画

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

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

效果:

2. app国际化配置

第一步配置多语言文件.

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

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

locale 和 translations 属性

ui展示应用

使用tr 进行文本展示

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

切换语言环境

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

效果展示

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` 的使用步骤

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

dependencies:
  get: ^4.6.5
  get_storage: ^2.0.3

初始化 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(),
    );
  }
}

使用 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'),
            ),
          ],
        ),
      ),
    );
  }
}

常用方法：

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

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

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

自定义存储文件：默认情况下，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>()

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-11-28，如有侵权请联系 cloudcommunity@tencent.com 删除

动画