Flutter 笔记 | GetX

news2024/11/24 14:29:04

官网：https://pub.dev/packages/get
中文文档：https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md

关于 GetX

现在Flutter的状态管理方案很多，redux、bloc、state、provider、Getx。

provider是官方提供的状态管理解决方案，主要功能就是状态管理。Getx是第三方的状态管理插件，不仅具有状态管理的功能，还具有路由管理、主题管理、国际化多语言管理、Obx局部更新、网络请求、数据验证等功能，相比其他状态管理插件Getx 简单、功能强大并且高性能。

简单来讲，GetX相比原始和其他方案的最大优点就是使用简单方便，功能丰富，且提供从头到脚的全家桶式的功能API。

  • GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。

  • GetX 有3个基本原则：

    • 性能： GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。
    • 效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。
    • 结构： GetX 可以将界面、逻辑、依赖和路由完全解耦，用起来更清爽，逻辑更清晰，代码更容易维护。

  • GetX 并不臃肿，却很轻量。如果你只使用状态管理，只有状态管理模块会被编译，其他没用到的东西都不会被编译到你的代码中。它拥有众多的功能，但这些功能都在独立的容器中，只有在使用后才会启动。

  • Getx有一个庞大的生态系统，能够在Android、iOS、Web、Mac、Linux、Windows和你的服务器上用同样的代码运行。
    通过Get Server 可以在你的后端完全重用你在前端写的代码。

GetX 主要有三大主要功能：

  • 状态管理
  • 路由管理
  • 依赖管理

下面分别介绍。

安装

将 Get 添加到你的 pubspec.yaml 文件中。

dependencies:
  get: ^4.6.5

在需要用到的文件中导入，它将被使用。

import 'package:get/get.dart';

设置应用入口

当我们导入依赖后，第一步需要在main.dart入口文件中把原来的MaterialApp换成 GetMaterialApp 作为顶层，如下所示

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

void main() {
	runApp(GetXApp ());
}

class GetXApp extends StatelessWidget {
  const GetXApp({super.key});
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          appBarTheme: const AppBarTheme(centerTitle: true,)
      ),
      home: const GetXHomePage(),
    );
  }
}

GetX 响应状态管理

例如使用 GetX 改造 Flutter 默认的计数器示例应用，只需要三步：

第一步：在定义变量时，在变量末尾加上 .obs 后缀

var _counter = 0.obs;

第二步：在使用变量的地方，使用Obx来包裹

Obx(() => Text("${_counter}"))

第三步：点击按钮的时候，直接修改变量值，UI即可自动刷新

 onPressed: () => _counter++

这就是全部，就这么简单。甚至连 setState 都不需要调用。

声明一个响应式变量三种方式：

第一种 使用 Rx{Type}

final name = RxString('');
final isLogged = RxBool(false);
final count = RxInt(0);
final balance = RxDouble(0.0);
final items = RxList<String>([]);
final myMap = RxMap<String, int>({});

第二种是使用 Rx，规定泛型 Rx。

final name = Rx<String>('');
final isLogged = Rx<Bool>(false);
final count = Rx<Int>(0);
final balance = Rx<Double>(0.0);
final number = Rx<Num>(0)
final items = Rx<List<String>>([]);
final myMap = Rx<Map<String, int>>({});
final user = Rx<User>(); // 自定义类 - 可以是任何类

第三种 更实用、更简单、更可取的方法，只需添加 .obs 作为value的属性。(推荐)

final name = ''.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs; 
final user = User().obs;  // 自定义类 - 可以是任何类

再举个例子，比如我们定义一个List:

 RxList _list = ["张三", "李四"].obs;

然后使用它：

Obx(() {
  return Column (
    children: _list.map((v) { return ListTile(title: Text(v));}).toList(),
  );
}),

之后修改它：

 onPressed: () => _list.add("王五");

注意：Obx和对应的状态变量是一一对应的，假如有多个变量，不能只在最外层包裹一个Obx，每个使用Rx变量的地方都需要一个Obx来包裹。

监听自定义类数据的变化

1. 创建 Person 类，使用响应式方式修饰成员变量

import 'package:get/get.dart';

class Person { 
	RxString name = "Jimi".obs; // rx 变量
	RxInt age = 18.obs;
}

2. 获取类属性值以及改变值

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import './person.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key}); 
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var person = Person(); // 定义 Person 对象
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Getx Obx"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Obx(() => Text(   // 读取时使用Obx包裹
                  "我的名字是 ${person.name}",
                  style: const TextStyle(color: Colors.red, fontSize: 30),
                ))
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          person.name.value = person.name.value.toUpperCase(); // 修改值
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

另一种方式，还可以定义整个类为响应式，例如：

import 'package:get/get.dart';

class Animal {
  String username;
  int age;
  Animal(this.username,this.age);
}

在创建上面的 Animal 对象时，可以直接后面加.obs后缀：

var a = Animal("xiao mao", 2).obs;

使用的时候还是用Obx包装

Obx(() => Text(a.username))

修改的时候，需要修改变量指针的指向：

onPressed: () => a.value = Animal("小狗", 3)

GetX 路由管理

如果只需要配置Home页，跟MaterialApp是一样的：

GetMaterialApp( // Before: MaterialApp(
  home: MyHome(),
)

如果需要配置路由表：

GetMaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Flutter Demo',
  theme: ThemeData(
      primarySwatch: Colors.blue,
      appBarTheme: const AppBarTheme(centerTitle: true)
   ), 
  initialRoute: "/", 
  defaultTransition: Transition.rightToLeft, // 配置全局路由页面切换动画效果
  getPages: AppPage.routes, // 配置路由表
);

// routes.dart
// 路由表, 可放在单独文件中
import 'package:get/get.dart';

class AppPage {
  static final routes = [
    GetPage(name: "/", page: () => const Tabs()),
    GetPage(name: "/shop", page: () => const ShopPage(), middlewares: [ShopMiddleWare()]),
    GetPage(name: "/login", page: () => const LoginPage()),
    GetPage(name: "/registerFirst", page: () => const RegisterFirstPage(), transition: Transition.fade),// 单独指定某个路由页面切换效果
    GetPage(name: "/registerSecond", page: () => const RegisterSecondPage()),
    GetPage(name: "/registerThird", page: () => const RegisterThirdPage()),
  ];
}

GetX 常用路由跳转方法：

方法功能
Get.to()跳转新页面
Get.toNamed()命名路由跳转
Get.back()路由返回
Get.off()进入下一个页面，但没有返回上一个页面的选项（用于闪屏页，登录页面等）
Get.offAll()进入下一个页面并取消之前的所有路由
Get.offAndToNamed()跳转并使用下一个路由替换当前路由页面（可用于关闭中间页面，如搜索页面）
Get.removeRoute()删除一个路由
Get.until()反复返回，直到表达式返回真
Get.offUntil()转到下一条路由，并删除所有之前的路由，直到表达式返回true
Get.offNamedUntil()转到下一个命名的路由，并删除所有之前的路由，直到表达式返回true
Get.arguments获取当前路由页面的参数
Get.previousRoute获取之前的路由名称
Get.rawRoute给出要访问的原始路由

路由传值：

Get.toNamed("/shop", arguments: {"id":3456});

接收页面：

print(Get.arguments);

路由中间页面：

上面路由表配置中GetPage的 middlewares 参数可以配置路由跳转的中间页面，可以在该页面进行一些如权限判断拦截等业务，例如：

// shopMiddleware.dart
import 'package:flutter/cupertino.dart';
import 'package:get/get.dart';

class ShopMiddleWare extends GetMiddleware {
  @override
  RouteSettings? redirect(String? route) {
    print("跳转ShopPage路由页面的中间页面-------");
    // return null;  // 返回空表示不做任何操作，走原来的路由跳转逻辑，即跳转到ShopPage
    // 此处可判断没有权限后跳转到登录页面
    return const RouteSettings(name: "/login", arguments: {});
  }
}

优先级

设置中间件的优先级定义Get中间件的执行顺序。

final middlewares = [
  GetMiddleware(priority: 2),
  GetMiddleware(priority: 5),
  GetMiddleware(priority: 4),
  GetMiddleware(priority: -8),
];

这些中间件会按这个顺序执行 -8 => 2 => 4 => 5

下面是 GetMiddleware 的其他几个方法：

  • onPageCalled： 在调用页面时，创建任何东西之前，这个函数会先被调用。您可以使用它来更改页面的某些内容或给它一个新页面。
GetPage onPageCalled(GetPage page) {
  final authService = Get.find<AuthService>();
  return page.copyWith(title: 'Welcome ${authService.UserName}');
}
  • **OnBindingsStart：**这个函数将在绑定初始化之前被调用。在这里，您可以更改此页面的绑定。
List<Bindings> onBindingsStart(List<Bindings> bindings) {
  final authService = Get.find<AuthService>();
  if (authService.isAdmin) {
    bindings.add(AdminBinding());
  }
  return bindings;
}
  • OnPageBuildStart： 这个函数将在绑定初始化之后被调用。在这里，您可以在创建绑定之后和创建页面widget之前执行一些操作。
GetPageBuilder onPageBuildStart(GetPageBuilder page) {
  print('bindings are ready');
  return page;
}

  • OnPageBuilt： 这个函数将在GetPage.page调用后被调用，并给出函数的结果，并获取将要显示的widget。

  • OnPageDispose： 这个函数将在处理完页面的所有相关对象(Controllers, views, …)之后被调用。

GetX 依赖管理

GetX 依赖管理，相比 Provider 或者 InheritedWidget 更加简单方便。例如还是以计数器示例应用为例，使用依赖管理进行改造，实现如下需求：

  • 每次点击都能改变状态
  • 可以在不同页面之间共享状态
  • 将业务逻辑与界面分离

第一步：定义一个 Controller 类

class Controller extends GetxController{
  var count = 0.obs;
  increment() => count++;
  decrement() => count--;
}

第二步：在页面中创建并使用 Controller

class Home extends StatelessWidget {

  @override
  Widget build(context) {  
  
    final Controller c = Get.put(Controller()); // 使用Get.put()实例化Controller，对所有子路由可用

    return Scaffold( 
      appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))), // 读取控制器中计数器的值
      body: Center(
      	child: ElevatedButton(
              child: Text("Go to Other"), 
              onPressed: () => Get.to(Other()) // 跳转Other页面
        )
      ),
      floatingActionButton: FloatingActionButton(
      	child: Icon(Icons.add), 
      	onPressed: c.increment // 调用控制器的方法修改计数器的值
      ));
  }
}

第三步：在其他路由页面中获取 Controller来共享计数器的值

class Other extends StatelessWidget {
  
  final Controller c = Get.find(); // 通过 Get.find() 找到控制器对象

  @override
  Widget build(context){
     return Scaffold(body: Center(child: Text("${c.count}"))); // 访问控制器的计数变量
  }
}

可以看到，使用GetX依赖管理以后，你可能不再需要使用StatefulWidget。这非常简单，GetX可以在不损失性能的情况下，加快开发速率，按时交付一切。

总结一下，GetX创建和获取控制器分别使用下面两行代码搞定：

Controller controller = Get.put(Controller());  

Controller controller = Get.find();

我们要做的就是将原来分散在页面中的数据变量和修改数据变量的逻辑提取到这个 Controller 控制器的内部去即可。

是的，它看起来像魔术，GetX会找到你的控制器，并将其提供给你。你可以实例化100万个控制器，GetX总会给你正确的控制器。然后你就可以恢复你在后面获得的控制器数据。

Text(controller.textFromApi);

想象一下，你已经浏览了无数条路由，现在你需要拿到一个被遗留在控制器中的数据，GetX会自动为你的控制器找到你想要的数据，而你甚至不需要任何额外的依赖关系。

关于依赖管理的更多细节请看此处。

GetX Binding

如果所有页面都要使用状态管理，在每个页面中都使用Get.put(MyController()) 的方式来进行控制器实例的创建，未免太麻烦，因此 GetX 提供了更加简单的 Binding 功能，可以全局统一配置，无需单独每个页面一一创建。

先了解一下 GetX 提供的很多创建 Controller实例的方法，可根据不同的业务来进行选择：

  • Get.put()： 不使用控制器实例也会被创建
  • Get.lazyPut()： 懒加载方式创建实例，只有在使用时才创建
  • Get.putAsync()： Get.put() 的异步版版本
  • Get.create()： 每次使用都会创建一个新的实例

下面看一下如何使用 Binding 功能

第一步：创建一个 Binding 类

import 'package:get/get.dart';

class AllControllerBinding implements Bindings {
	@override
	void dependencies() { 
		// 所有的 Controller 都在这里配置
		Get.lazyPut<BindingMyController>(() => BindingMyController()); // 懒加载方式
		Get.lazyPut<BindingHomeController>(() => BindingHomeController());
	}
}

第二步：在GetMaterialApp 中进行初始化绑定

return GetMaterialApp (
	initialBinding: AllControllerBinding(),
	home: GetXBindingExample(),
);

第三步：在页面中通过Get.find<MyController>()获取和使用状态管理器

Obx(() => Text(
	"计数器的值为 ${Get.find<BindingMyController>().count}",
	style: TextStyle(color: Colors.red, fontSize: 30),
)), 
ElevatedButton(
	onPressed: () {
		Get.find<BindingMyController>().increment();
	},
	child: Text("点击加1")
),

路由 + Binding + GetView

GetX 另一种使用 Binding 的方式是可以和路由相绑定，这种方式可以省去Get.find的步骤。

第一步：在配置 GetMaterialApp 的路由表的GetPage中设置 binding 属性

GetPage(
    name: "/shop",
    page: () => const ShopPage(),
    binding: ShopControllerBinding(), // 设置该页面的 Binding 
    middlewares: [ShopMiddleWare()]
),

其中ShopControllerBinding的内容：

import 'package:get/get.dart';

import '../controllers/shop.dart';

class ShopControllerBinding implements Bindings{
  @override
  void dependencies() {  
    Get.lazyPut<ShopController>(() => ShopController());
  }
}

ShopController的内容：

import 'package:get/get.dart';

class ShopController extends GetxController {
  RxInt counter = 10.obs;
  
  void inc() {
    counter.value++;
    update();
  }
}

第二步：在使用ShopController的页面继承GetView

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

class ShopPage extends GetView<ShopController> {
  const ShopPage({super.key});
  @override
  Widget build(BuildContext context) {   
    return Scaffold(
      appBar: AppBar(title: const Text('Title'),),
      body: Center(
        child: Column(
          children: [
            Obx(() => Text("${controller.counter}")),
            const SizedBox(height: 40,),
            ElevatedButton (
              onPressed: () { controller.inc();}, 
	          child: const Text("shop counter+1"))
          ],
        ),
      ),
    );
  }
}

这样就无需写Get.find了，直接使用即可。

但是需要注意的是，这种方式当路由页面被弹出后，对应的Controller实例就会被销毁，而其他方式是不会销毁的(全局共享)。

Controller 的生命周期

GetX 中的 Controller 是有生命周期的，它提供了三个生命周期方法：

  • onInit()： 在widget页面组件从内存创建时立即执行，可以用来执行初始化业务，例如页面初始数据请求。
  • onReady()： 在 onInit() 之后调用1帧，它是插入导航事件的理想时机，如snackbar、dialogs, 或者一个新的路由 或异步请求等。
  • onClose()： 页面销毁时调用，可以用来清理资源，或做持久化数据保存。
import 'package:get/get.dart';

class SearchController extends GetxController {
  RxList hotList=[].obs;

  void onInit() {
    print("请求接口数据");
    getHotList(); 
    super.onInit();
  }
  
  @override
  void onReady() {
    print("onReady");
    super.onReady();
  }	
  
  @override
  void onClose() {
    print("onClose");
    super.onClose();
  }

  void getHotList() {  
    hotList.add("我是一个模拟的数据");
    update();
  }
}

GetX 国际化和主题配置

国际化

第一步：定义一个语言包

import 'package:get/get.dart';

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'zh_CN': {
          'hello': '你好 世界',
        },
        'de_DE': {
          'hello': 'Hallo Welt',
        }
      };
}

第二步：在GetMaterialApp中进行配置

  • translations： 国际化配置文件
  • locale： 设置默认语言，不设置的话为系统当前语言
  • fallbackLocale：添加一个回调语言选项，以备上面指定的语言翻译不存在
return GetMaterialApp(
    translations: Messages(), // 你的翻译语言包
    locale: Locale('zh', 'CN'), // 使用指定的语言翻译
    fallbackLocale: Locale('en', 'US'), // 指定的语言翻译不存在时的默认语言回调
);

第三步：使用翻译，只要将.tr追加到指定的键上，就会使用Get.locale和Get.fallbackLocale的当前值进行翻译。

Text('title'.tr);

改变语言

调用Get.updateLocale(locale)来更新语言环境。然后翻译会自动使用新的locale。

var locale = Locale('en', 'US');
Get.updateLocale(locale);

获取系统语言

要读取系统语言，可以使用window.locale。

import 'dart:ui' as ui;

return GetMaterialApp(
    locale: ui.window.locale,
);

改变主题

请不要使用比GetMaterialApp更高级别的widget来更新主题，这可能会造成键重复。很多人习惯于创建一个 "ThemeProvider "的widget来改变应用主题，这在GetX™中是绝对没有必要的。

你可以创建你的自定义主题，并简单地将其添加到Get.changeTheme中，而无需任何模板。

Get.changeTheme(ThemeData.light());

如果你想在 "onTap "中创建类似于改变主题的按钮，你可以结合两个GetX API Get.changeTheme + Get.isDarkMode来实现。 你可以把下面的代码放在onPressed里。

Get.changeTheme(Get.isDarkMode? ThemeData.light(): ThemeData.dark());

当darkmode被激活时，它将切换到light主题，当light主题被激活时，它将切换到dark主题。

其他实用功能

GetX 的很多调用都无需传入 context ，使用非常方便。

方法功能
Get.defaultDialog()显示弹窗
Get.snackbar()显示 snackbar
Get.bottomSheet()显示 BottomSheet
Get.isSnackbarOpen检查 snackbar 是否打开
Get.isDialogOpen检查 dialog 是否打开
Get.isBottomSheetOpen检查 bottomsheet 是否打开
Get.changeTheme()切换主题颜色
Get.isDarkMode判断主题样式
Get.isAndroid
Get.isIOS
Get.isMacOS
Get.isWindows
Get.isLinux
Get.isFuchsia		检查应用程序在哪个平台上运行
Get.isMobile
Get.isDesktop
Get.isWeb		检查设备类型，注意所有平台都是独立支持web浏览器的
Get.height
Get.width		相当于MediaQuery.of(context).size.height
Get.context提供当前上下文
Get.contextOverlay在你的代码中的任何地方，在前台提供 snackbar/dialog/bottomsheet 的上下文

以下方法是对上下文context的扩展。因为在你的UI的任何地方都可以访问上下文，你可以在UI代码的任何地方使用它。

方法功能
context.width
context.width		如果你需要一个可改变的高度/宽度（如桌面或浏览器窗口可以缩放），你将需要使用上下文
context.mediaQuerySize()类似于 MediaQuery.of(context).size
context.mediaQueryPadding()类似于 MediaQuery.of(context).padding
context.mediaQueryViewPadding()类似于 MediaQuery.of(context).viewPadding
context.mediaQueryViewInsets()类似于 MediaQuery.of(context).viewInsets
context.orientation()类似于 MediaQuery.of(context).orientation
context.devicePixelRatio类似于MediaQuery.of(context).devicePixelRatio
context.textScaleFactor类似于MediaQuery.of(context).textScaleFactor
context.mediaQueryShortestSide查询设备最短边。
context.isLandscape()检查设备是否处于横向模式
context.isPortrait()检查设备是否处于纵向模式
context.heightTransformer()
context.widthTransformer() 		让您可以定义一半的页面、三分之一的页面等。对响应式应用很有用。参数： dividedBy (double) 可选 - 默认值：1。参数： reducedBy (double) 可选 - 默认值：0。
context.showNavbar()如果宽度大于800，则为真
context.isPhone()如果最短边小于600p，则为真
context.isSmallTablet()如果最短边大于600p，则为真
context.isLargeTablet()如果最短边大于720p，则为真
context.isTablet()如果当前设备是平板电脑，则为真
context.responsiveValue<T>()根据页面大小返回一个值<T>可以给值为：
watch：如果最短边小于300
mobile：如果最短边小于600
tablet：如果最短边（shortestSide）小于1200
desktop：如果宽度大于1200

GetUtils

GetX 还提供了一个方便的工具类 GetUtils，里面提供了一些常用的方法，例如判断值是否为空、是否是数字、是否是视频、图片、音频、PPT、Word、APK、邮箱、手机号码、日期、MD5、SHA1等等。具体可以直接IDE查看 GetUtils类。

在这里插入图片描述

GetConnect

GetConnect可以便捷的通过http或websockets进行前后台通信。

默认配置

你能轻松的通过extend GetConnect就能使用GET/POST/PUT/DELETE/SOCKET方法与你的Rest API或websockets通信。

class UserProvider extends GetConnect {
  // Get request
  Future<Response> getUser(int id) => get('http://youapi/users/$id');
  // Post request
  Future<Response> postUser(Map data) => post('http://youapi/users', body: data);
  // Post request with File
  Future<Response<CasesModel>> postCases(List<int> image) {
    final form = FormData({
      'file': MultipartFile(image, filename: 'avatar.png'),
      'otherFile': MultipartFile(image, filename: 'cover.png'),
    });
    return post('http://youapi/users/upload', form);
  }

  GetSocket userMessages() {
    return socket('https://yourapi/users/socket');
  }
}

自定义配置

GetConnect具有多种自定义配置。你可以配置base Url，配置响应，配置请求，添加权限验证，甚至是尝试认证的次数，除此之外，还可以定义一个标准的解码器，该解码器将把您的所有请求转换为您的模型，而不需要任何额外的配置。

class HomeProvider extends GetConnect {
  @override
  void onInit() {
    // All request will pass to jsonEncode so CasesModel.fromJson()
    httpClient.defaultDecoder = CasesModel.fromJson;
    httpClient.baseUrl = 'https://api.covid19api.com';
    // baseUrl = 'https://api.covid19api.com'; // It define baseUrl to
    // Http and websockets if used with no [httpClient] instance

    // It's will attach 'apikey' property on header from all requests
    httpClient.addRequestModifier((request) {
      request.headers['apikey'] = '12345678';
      return request;
    });

    // Even if the server sends data from the country "Brazil",
    // it will never be displayed to users, because you remove
    // that data from the response, even before the response is delivered
    httpClient.addResponseModifier<CasesModel>((request, response) {
      CasesModel model = response.body;
      if (model.countries.contains('Brazil')) {
        model.countries.remove('Brazilll');
      }
    });

    httpClient.addAuthenticator((request) async {
      final response = await get("http://yourapi/token");
      final token = response.body['token'];
      // Set the header
      request.headers['Authorization'] = "$token";
      return request;
    });

    //Autenticator will be called 3 times if HttpStatus is
    //HttpStatus.unauthorized
    httpClient.maxAuthRetries = 3;
  }

  @override
  Future<Response<CasesModel>> getCases(String path) => get(path);
}

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

GetMaterialApp为你配置了一切，但如果你想手动配置Get。

MaterialApp(
  navigatorKey: Get.key,
  navigatorObservers: [GetObserver()],
);

你也可以在GetObserver中使用自己的中间件，这不会影响任何事情。

MaterialApp(
  navigatorKey: Get.key,
  navigatorObservers: [
    GetObserver(MiddleWare.observer) // Here
  ],
);

你可以为 "Get "创建全局设置。只需在推送任何路由之前将Get.config添加到你的代码中。或者直接在你的GetMaterialApp中做。

GetMaterialApp(
  enableLog: true,
  defaultTransition: Transition.fade,
  opaqueRoute: Get.isOpaqueRouteDefault,
  popGesture: Get.isPopGestureEnable,
  transitionDuration: Get.defaultDurationTransition,
  defaultGlobalState: Get.defaultGlobalState,
);

Get.config(
  enableLog = true,
  defaultPopGesture = true,
  defaultTransition = Transitions.cupertino
)

你可以选择重定向所有来自Get的日志信息。如果你想使用你自己喜欢的日志包，并想查看那里的日志。

GetMaterialApp(
  enableLog: true,
  logWriterCallback: localLogWriter,
);

void localLogWriter(String text, {bool isError = false}) {
  // 在这里把信息传递给你最喜欢的日志包。
  // 请注意，即使enableLog: false，日志信息也会在这个回调中被推送。
  // 如果你想的话，可以通过GetConfig.isLogEnable来检查这个标志。
}

局部状态组件

这些Widgets允许您管理一个单一的值，并保持状态的短暂性和本地性。我们有Reactive和Simple两种风格。

例如，你可以用它们来切换TextField中的obscureText，也许可以创建一个自定义的可扩展面板（Expandable Panel），或者在"Scaffold "的主体中改变内容的同时修改BottomNavigationBar中的当前索引。

ValueBuilder

StatefulWidget的简化，它与setState回调一起工作，并接受更新的值。

ValueBuilder<bool>(
  initialValue: false,
  builder: (value, updateFn) => Switch(
    value: value,
    onChanged: updateFn, // 你可以用( newValue )=> updateFn( newValue )。
  ),
  // 如果你需要调用 builder 方法之外的东西。
  onUpdate: (value) => print("Value updated: $value"),
  onDispose: () => print("Widget unmounted"),
),

ObxValue

类似于ValueBuilder，但这是Reactive版本，你需要传递一个Rx实例（还记得神奇的.obs吗？自动更新…是不是很厉害？）

ObxValue((data) => Switch(
        value: data.value,
        onChanged: data, // Rx 有一个 _callable_函数! 你可以使用 (flag) => data.value = flag,
    ),
    false.obs,
),

有用的提示

.obs(也称为_Rx_ Types)有各种各样的内部方法和操作符。

var message = 'Hello world'.obs;
print( 'Message "$message" has Type ${message.runtimeType}');

即使message prints实际的字符串值，类型也是RxString所以，你不能做message.substring( 0, 4 )。你必须在_observable_里面访问真正的value。最常用的方法是".value", 但是你也可以用…

final name = 'GetX'.obs;
//只有在值与当前值不同的情况下，才会 "更新 "流。
name.value = 'Hey';

// 所有Rx属性都是 "可调用 "的，并返回新的值。
//但这种方法不接受 "null"，UI将不会重建。
name('Hello');

// 就像一个getter，打印'Hello'。
name() ;

///数字。

final count = 0.obs;

// 您可以使用num基元的所有不可变操作!
count + 1;

// 注意！只有当 "count "不是final时，这才有效，除了var
count += 1;

// 你也可以与数值进行比较。
count > 2;

/// booleans:

final flag = false.obs;

// 在真/假之间切换数值
flag.toggle();


/// 所有类型。

// 将 "value "设为空。
flag.nil();

// 所有的toString()、toJson()操作都会向下传递到`value`。
print( count ); // 在内部调用 "toString() "来GetRxInt

final abc = [0,1,2].obs;
// 将值转换为json数组，打印RxList。
// 所有Rx类型都支持Json!
print('json: ${jsonEncode(abc)}, type: ${abc.runtimeType}');

// RxMap, RxList 和 RxSet 是特殊的 Rx 类型，扩展了它们的原生类型。
// 但你可以像使用普通列表一样使用列表，尽管它是响应式的。
abc.add(12); // 将12添加到列表中，并更新流。
abc[3]; // 和Lists一样，读取索引3。


// Rx和值是平等的，但hashCode总是从值中提取。
final number = 12.obs;
print( number == 12 ); // prints > true

///自定义Rx模型。

// toJson(), toString()都是递延给子代的，所以你可以在它们上实现覆盖，并直接打印()可观察的内容。

class User {
    String name, last;
    int age;
    User({this.name, this.last, this.age});

    @override
    String toString() => '$name $last, $age years old';
}

final user = User(name: 'John', last: 'Doe', age: 33).obs;

// `user`是 "响应式 "的，但里面的属性却不是!
// 所以，如果我们改变其中的一些变量：
user.value.name = 'Roi';
// 小部件不会重建！ 
// 对于自定义类，我们需要手动 "通知 "改变。
user.refresh();

// 或者我们可以使用`update()`方法!
user.update((value){
  value.name='Roi';
});

print( user );

GetWidget

大多数人都不知道这个Widget，或者完全搞不清它的用法。这个用例非常少见且特殊：它 "缓存 "了一个Controller，因为cache，所以不能成为一个const Stateless。

那么，什么时候你需要 "缓存 "一个Controller？

如果你使用了GetX的另一个 "不常见 "的特性 Get.create()

  • Get.create(()=>Controller()) 会在每次调用时生成一个新的Controller

Get.find<Controller>() 你可以用它来保存Todo项目的列表，如果小组件被 “重建”，它将保持相同的控制器实例。

GetxService

这个类就像一个 “GetxController”，它共享相同的生命周期（“onInit()”、“onReady()”、“onClose()”）。

但里面没有 “逻辑”。它只是通知GetX的依赖注入系统，这个子类不能从内存中删除。

所以这对保持你的 "服务 "总是可以被Get.find()获取到并保持运行是超级有用的。比如
ApiService，StorageService，CacheService。

Future<void> main() async {
  await initServices(); /// 等待服务初始化.
  runApp(SomeApp());
}

/// 在你运行Flutter应用之前，让你的服务初始化是一个明智之举。
因为你可以控制执行流程（也许你需要加载一些主题配置，apiKey，由用户自定义的语言等，所以在运行ApiService之前加载SettingService。
///所以GetMaterialApp()不需要重建，可以直接取值。
void initServices() async {
  print('starting services ...');
  ///这里是你放get_storage、hive、shared_pref初始化的地方。
  ///或者moor连接，或者其他什么异步的东西。
  await Get.putAsync(() => DbService().init());
  await Get.putAsync(SettingsService()).init();
  print('All services started...');
}

class DbService extends GetxService {
  Future<DbService> init() async {
    print('$runtimeType delays 2 sec');
    await 2.delay();
    print('$runtimeType ready!');
    return this;
  }
}

class SettingsService extends GetxService {
  void init() async {
    print('$runtimeType delays 1 sec');
    await 1.delay();
    print('$runtimeType ready!');
  }
}

实际删除一个GetxService的唯一方法是使用Get.reset()，它就像"热重启 "你的应用程序。

所以如果你需要在你的应用程序的生命周期内对一个类实例进行绝对的持久化，请使用GetxService。

GetX CLI和插件

GetX 提供了一个cli工具 Get CLI，通过该工具，无论是在服务器上还是在客户端，整个开发过程都可以完全自动化。

例如，Get CLI一个比较实用的功能是可以根据返回json的接口URL自动生成对应的Dart Model类

get generate [ModelName] on [Dir] from "https://api.github.com/users/CpdnCristiano"

此外，为了进一步提高您的生产效率，我们还为您准备了一些插件

  • getx_template：一键生成每个页面必需的文件夹、文件、模板代码等等
    • Android Studio/Intellij插件
  • GetX Snippets：输入少量字母，自动提示选择后，可生成常用的模板代码
    • Android Studio/Intellij扩展
    • VSCode扩展

GetX 原理机制

关于 GetX 的原理机制可以参考这篇文章：Flutter GetX深度剖析 该文作者已经写的非常详细了。这里不再赘述。

不过我们可以简单总结一下：

  • .obs的写法其实是利用了Dart的扩展语法，内部实现是一个具有callback以及运算符重载的数据类型
  • 当读取.obs数据类型的value变量值的时候（get value），会添加一个观察者进行监听
  • 当修改.obs数据类型的value变量值的时候（set value），则会触发监听回调，内部会获取value变量进一步执行 setState()自动刷新操作

简单来讲它就是 Dart的扩展语法 + 观察者模式 的应用，但是实现这样一个简洁的框架还是不简单的，从其代码中的层层包装和代理转发可见其复杂性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/614864.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

小程序分包详解

小程序分包详解

一&#xff1a;什么是小程序分包 分包指的是把一个完整的小程序项目&#xff0c;按照需求划分为不同的子包&#xff0c;在构建时打包成不同的分包&#xff0c;用户在使用时按需进行加载。 二&#xff1a;为什么使用分包 小程序第一版 推出 小程序代码包不能超过1MB 大小&…
阅读更多...
java SSM 教代会审批管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

java SSM 教代会审批管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 教代会管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码 和数据库&#xff0c;系统主要采用…
阅读更多...
计算机网络开荒2-应用层

计算机网络开荒2-应用层

文章目录 一、网络应用体系结构2.1 客户机/服务器结构(Client-Server,C/S)2.2 点对点结构(Peer-to-peer,P2P)2.3 混合结构(Hybrid) 二、网路应用的进程通信2.1 套接字Socket2.2 应用层协议的内容 三、网络应用的需求与传输层服务四、Web4.1 HTTP4.1.1 HTTP连接类型4.1.1.1 非持…
阅读更多...
mysql慢sql优化实战:in order by优化处理

mysql慢sql优化实战:in order by优化处理

背景 线上查询慢的问题日益突出,专门写一个帖子记录一下处理过程,会定期更新优化处理方案 套餐余量统计查询菜单,数据库查询时间一分钟五十秒,优化之后耗时109毫秒,性能提升很大.所有时间统计均以数据库层面进行统计.用户使用层面因为有数据传输、带宽、业务逻辑处理等因素…
阅读更多...
只要7分钟，教你从0-1搭建BI系统，这份大佬整理的指南免费送！

只要7分钟，教你从0-1搭建BI系统，这份大佬整理的指南免费送！

在BI行业干了快十年了&#xff0c;做过制造业供应链的BI项目&#xff0c;也跟过零售电商、房地产、银行的BI建设&#xff0c;经常有朋友咨询关于BI建设的内容&#xff0c;今天总结了一套BI项目建设指南&#xff0c;直接分享给大家&#xff0c;觉得不错记得点赞收藏。 通常情况…
阅读更多...
实战【金融评分卡】

实战【金融评分卡】

金融评分卡 网站&#xff1a;百融、同盾 1.导入 信贷评分卡是一种用于评估个人或企业申请贷款的工具&#xff0c;就像-个评分表-样。我们可以把它看作是银行或金融机构用来判断某人是否有资格获得贷款的一-种方式。 想象一下,你是一个银行家,有很多人向你申请贷款,比如个人贷…
阅读更多...
cas单点登录-服务端部署

cas单点登录-服务端部署

一.需求描述 公司开发系统越来越多&#xff0c;每个系统都有自己的登录认证流程&#xff0c;给用户很繁琐的体验&#xff0c;统一认证单点登录迫在眉睫 二.流程图 三.本地运行cas服务端 1.拉取cas服务端代码&#xff0c;切换到对应分支&#xff08;我使用的是6.4.x&#xff…
阅读更多...
proxmox7.4 安装后配置

proxmox7.4 安装后配置

关于proxmox7安装和配置的博文&#xff0c;倒是不少。可惜鱼龙混杂&#xff0c;踩了不少坑&#xff0c;如今实践成功后&#xff0c;做一分享。 proxmox7.4安装(与安装linux系统类似) 1.去官网https://proxmox.com/en/downloads 下载安装镜像&#xff0c;注意&#xff1a; 下…
阅读更多...
iTOP-3588开发板Android12源码定制开发uboot开发

iTOP-3588开发板Android12源码定制开发uboot开发

uboot 开发-Uboot 源码是 v2017.09 版本。目前在该平台上已经支持 RK 所有主流在售芯片。支持 的功能主要有:  支持 RK Android 固件启动;  支持 Android AOSP 固件启动;  支持 Linux Distro 固件启动;  支持 Rockchip miniloader 和 SPL/TPL 两种 Pre-loader 引导…
阅读更多...
对比才知差距！海尔“精华洗”用实验告诉用户

对比才知差距！海尔“精华洗”用实验告诉用户

《怪诞关系学》一书中讲到&#xff0c;人生来会与他人做比较&#xff0c;对比是天性&#xff0c;竞争是必然。用高深点的话讲&#xff0c;人是通过对比身边的事物和同类来定位自身的&#xff0c;只有对比才知道差距有多大。“仰观宇宙之大&#xff0c;俯察品类之盛”&#xff0…
阅读更多...
Python如何批量合并70个doc和docx文件

Python如何批量合并70个doc和docx文件

目录 一、问题的提出 二、算法分析 三、代码展示 四、注意事项 有一位朋友发来70多个数名命名的doc和docx文件&#xff0c;问我有没有vba代码&#xff0c;可以把这些文件按照数字大小的顺序合并。我试着用了chatgpt&#xff0c;搞了一串vba代码行不通&#xff0c;于时我就找…
阅读更多...
【PyQt5】（01）PyQt的详细介绍

【PyQt5】（01）PyQt的详细介绍

文章目录 前言一、PyQt的前世今生1.1 PyQt6、PyQt5和PyQt41.2 商业版和开源版1.3 支持的操作系统 二、 PyQt的优点三、PyQt的应用场景总结 前言 PyQt是使用Python语言编写的QT库的界面工具包。QT是一个跨平台的C应用程序开发框架&#xff0c;可以用于创建高性能、高可靠性、图形…
阅读更多...
高频面试八股文用法篇(六) 说说反射及其作用

高频面试八股文用法篇(六) 说说反射及其作用

目录 什么是反射&#xff1f; 反射的作用 反射的优缺点 反射的用途 什么是反射&#xff1f; 动态语言。 当程序运行时&#xff0c;允许改变程序结构或变量类型&#xff0c;这种语言称为动态语言。Java 并不是动态语言&#xff0c;但是它却又一个非常突出的动态相关的机制&am…
阅读更多...
Permission denied, please try again.

Permission denied, please try again.

如果你是容器或者二进制安装启动的gitlab&#xff0c;在克隆代码一直有这样的问题 正克隆到 h5... git192.168.0s password: Permission denied, please try again. 服务ipgit 192.168.40.15 gitlab192.168.40.17 1、 docker run -d --name gitlab -p 80:80 -p 224:22 -p 4…
阅读更多...
基于springboot的在线学习平台

基于springboot的在线学习平台

源码获取&#xff0c;V&#xff1a;qq2056908377 采用技术 项目整体采用传统的B/S架构和MVC设计模式&#xff0c;开发语言选用JavaHTMLJavascript&#xff0c;技术上采用SpringBoot、Mybatis等开发框架&#xff0c;数据库采用MySQL 5.7。 功能介绍 平台分为用户端和管理两个系…
阅读更多...
1.8 基于Java配置方式使用Spring MVC

1.8 基于Java配置方式使用Spring MVC

一、基于Java配置方式使用Spring MVC 实现步骤 1、创建Maven项目 Maven项目 - SpringMvcDemo02 2、添加相关依赖 在pom.xml文件里添加相关依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/…
阅读更多...
chatgpt赋能python：如何用Python创建一个成功的项目

chatgpt赋能python：如何用Python创建一个成功的项目

如何用Python创建一个成功的项目 无论是初学者还是有经验的开发者&#xff0c;Python语言的丰富生态系统和易于使用的语法使得它在项目开发领域中成为了一种非常流行的选择。但是&#xff0c;要构建一个好的Python项目需要很多工作&#xff0c;需要一些经验和技巧。在这篇文章…
阅读更多...
LeetCode_二叉树_BFS_中等_117.填充每个节点的下一个右侧节点指针 II

LeetCode_二叉树_BFS_中等_117.填充每个节点的下一个右侧节点指针 II

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给定一个二叉树&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; }填充它的每个 next 指针&#xff0c;让这个指针指向其下一个右侧节点。如果找不到下一个右侧节点&#xff0c;则将 …
阅读更多...
数据共享传输：台式机和笔记本同步文件！

数据共享传输：台式机和笔记本同步文件！

为什么要在台式机和笔记本同步文件&#xff1f; “我想在台式机和笔记本同步文件。因为我工作时使用笔记本&#xff0c;在家里使用安装了Windows 10系统的台式机&#xff0c;我想要在笔记本和台式机之间同步应用程序、游戏、文档等。有没有一种可以在台式机和笔记本同步文件的…
阅读更多...
11 【组件通信】

11 【组件通信】

1.props 适用于的场景:父子组件通信 注意事项: 如果父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据 如果父组件给子组件传递数据(非函数):本质就是父组件给子组件传递数据 书写方式:3种 [‘todos’],{type:Array},{type:Array,default:[]} 特殊情况&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023