GetX的一些高级API

前言

一、一些常用的API

二、局部状态组件

1.可选的全局设置和手动配置

前言

这篇文章主要讲解GetX的一些高级API和一些有用的小组件。

一、一些常用的API

GetX提供了一些高级的API。常用的一些API如下：

图1.一些高级API用法

// 给出当前页面的args。

Get.arguments

//给出以前的路由名称

Get.previousRoute

// 给出要访问的原始路由，例如，rawRoute.isFirst()

Get.rawRoute

// 允许从GetObserver访问Rounting API。

Get.routing

// 检查 snackbar 是否打开

Get.isSnackbarOpen

// 检查 dialog 是否打开

Get.isDialogOpen

// 检查 bottomsheet 是否打开

Get.isBottomSheetOpen

// 删除一个路由。

Get.removeRoute()

//反复返回，直到表达式返回真。

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

// 注意：以下方法是对上下文的扩展。

// 因为在你的UI的任何地方都可以访问上下文，你可以在UI代码的任何地方使用它。

// 如果你需要一个可改变的高度/宽度（如桌面或浏览器窗口可以缩放），你将需要使用上下文。

context.width

context.height

// 让您可以定义一半的页面、三分之一的页面等。

// 对响应式应用很有用。

// 参数： dividedBy (double) 可选 - 默认值：1

// 参数： 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，则为真。

context.showNavbar()

///如果最短边小于600p，则为真。

context.isPhone()

///如果最短边大于600p，则为真。

context.isSmallTablet()

///如果最短边大于720p，则为真。

context.isLargeTablet()

///如果当前设备是平板电脑，则为真

context.isTablet()

///根据页面大小返回一个值<T>。

///可以给值为：

///watch：如果最短边小于300

///mobile：如果最短边小于600

///tablet：如果最短边（shortestSide）小于1200

///desktop：如果宽度大于1200

context.responsiveValue<T>()

二、局部状态组件

1.可选的全局设置和手动配置

代码如下（示例）：

c 复制代码

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.局部状态组件

1.ValueBuilder

ValueBuilder 是 GetX 提供的一个轻量级的状态管理小部件，用于在 Flutter 中快速创建一个具有本地状态的组件。与 Obx 和 GetX 不同，ValueBuilder 更适合那些不需要被多个小部件观察或响应的状态变量，通常用于简单的状态控制。

1.特点

ValueBuilder的特点如下：

适用于需要本地状态的小部件
不需要 Controller，也不涉及全局状态
状态变化时，ValueBuilder 只会重建小部件内部的 builder 方法，而不会重建整个页面

2.基本用法

假设我们要实现一个按钮，用于点击切换显示文字的状态。我们可以使用 ValueBuilder 来管理这个本地状态。

示例效果图如下：

图2.ValueBuilder切换文字状态

我们看一下核心的代码：

Dart 复制代码

import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.purple,
          title: const Text("GetX |ValueBuilder用法")),
      body: Center(
        child: ValueBuilder<bool?>(
          initialValue: true, // 设置初始值
          builder: (value, update) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(value == true ? "Hello, World!" : "Goodbye, World!"),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => update(!(value ?? false)), // 切换状态
                child: const Text("Toggle Message"),
              ),
            ],
          ),
          onUpdate: (value) {
            debugPrint("Value updated: $value");
          },
          onDispose: () {
            debugPrint("ValueBuilder disposed");
          },
        ),
      ),
    );
  }
}

在上面的代码中：

运行上述代码后：

ValueBuilder 会初始化状态为 true。
点击按钮时，update 函数会切换状态，使得页面文本在 "Hello, World!" 和 "Goodbye, World!" 之间切换。
每次状态变化时，onUpdate 会打印新的状态值。
当页面被销毁时，onDispose 会在控制台打印信息，表示资源已被释放。

2.ObxValue

ObxValue 是 GetX 提供的一个轻量级响应式小部件，用于监听一个单独的可观察变量（Rx 类型），并在其值发生变化时自动刷新 UI。与 Obx 类似，ObxValue 的优势在于它更为简洁，适合那些只需要监听单个变量更新的小部件。

1.特点

ObxValue的特点如下：

轻量级：只监听一个单一的 Rx 变量
简单的UI更新：不需要 Controller，也不涉及全局状态
常用于局部状态:状态变化时，ValueBuilder 只会重建小部件内部的 builder 方法，而不会重建整个页面

2.基本用法

下面是一个简单示例，展示了如何使用 ObxValue 来更新计数器的值。

Dart 复制代码

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ObxValueExample extends StatelessWidget {
  // 定义一个 RxInt 类型的计数器变量
  final counter = 0.obs;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("ObxValue Example")),
      body: Center(
        child: ObxValue<RxInt>(
          (value) => Text(
            'Counter: ${value.value}',
            style: const TextStyle(fontSize: 24),
          ),
          counter, // 监听 counter 变量
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value++; // 更新 counter 值，自动刷新 UI
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

ObxValue 通过简化的响应式机制，让我们可以更轻松地管理和更新单个状态变量。与 Obx 相比，它对只需监控单个变量的场景尤为适用，使得代码更直观。