getx

chanchaw大约 2 分钟flutter

概述

GetX 作为 flutter 中最流行的状态管理插件，不止有状态管理还有依赖注入、路由管理等等，官网地址open in new window

安装与部署

在 cmd 中执行命令 flutter pub add get 进行安装

状态管理

概述

本案例是使用 GetX 实现最简单的累加器，先介绍使用步骤

创建一个控制器 count_controller.dart ，实现累加器的逻辑部分，类似 react 和 vue 的 hook，抽取纯逻辑部分
控制器中要使用 obs 扩展功能，在用户 UI 中通过 Obx 订阅，当控制器中函数对响应式变量做变更后，订阅者会收到消息，进而更新 UI
用户 UI 组件中需要通过声明 controller 来调用控制器中的函数，以及获取响应式变量（显示在前端 UI 上）

下面是实现案例

在 lib 下创建文件 count_controller.dart
创建目录 lib/pages/getx_demo，并在其下创建两个文件 count_controller.dart 和 count_page.dart
下面是 count_controller.dart 的完整代码

import 'package:get/get.dart';

class CountController extends GetxController {
  var count = 0.obs;
  void increase(){
    count++;
  }
}

下面是 count_page.dart 的完整代码

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:repair_pda/pages/getx_demo/count_controller.dart';

// 使用 GetX 实现累加器的页面
class CountPage extends StatelessWidget {
  const CountPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 下面的 put 内部使用单例模式，如果已经在其他页面创建过 CountController 的实例
    // 则此处直接获取之前创建好的实例，相反则会创建一个
    final CountController controller = Get.put(CountController());
    return Scaffold(
      appBar: AppBar(
        title: Text('GetX example'),
      ),
      body: Center(
        child: Obx(
            () => Text('Counter ${controller.count}',style: TextStyle(fontSize: 24),)
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: (){
            controller.increase();
          },
        child: const Icon(Icons.add),
      ),
    );
  }
}

特性

单例模式通过代码 final CountController controller = Get.put(CountController()); 在多个页面获取 CountController 控制器不会有冲突。在 GetX 内部使用了单例模式，如果项目内此前没有创建过该控制器，则该代码会创建一个实例，相反，如果之前已经创建过，或者在其他页面创建过则此处直接返回该控制器不会重复创建。
多例场景如果同一个控制器需要在每个页面创建独占的实例有两种方法，第一种是创建一个当前页面的实例 Get.create<CountController>(() => CountController()); 也可以通过指定 tag 创建多个实例 Get.put(CountController(), tag: 'unique_tag');
内存泄露页面独享的实例要在页面的 dispose 生命周期函数中卸载 Get.delete<CountController>();，类似的，如果是项目全局使用的则在 main.dart 的 dispose 中卸载

getx

# 概述

# 安装与部署

# 状态管理

# 概述

# 特性

概述

安装与部署

状态管理

概述

特性