Flutter - GetX 状态管理库

简介

GetX 是 Flutter 中一个轻量、高性能、可扩展的状态管理库，它提供了路由、依赖注入、状态管理、可观察状态和多种其他功能，让您更快速、更轻松地编写 Flutter 应用程序。

特点

• 轻量：GetX 不需要额外的设置或代码，并且只需要很少的代码即可获得强大的功能。
• 高性能：GetX 可以轻松处理数十万列表项、数千文字和数百个您可以想象的 StatefulWidget。
• 可扩展：GetX 对插件或 Flutter 框架本身的扩展开放，并容易自定义和替换。

基本用法

1. 安装 GetX 插件 在 pubspec.yaml 文件中添加 GetX 插件依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4 # 依赖最新版本

2. 引入 GetX 包 在需要使用 GetX 的文件中引入 GetX 包：

import 'package:get/get.dart';

3. 创建控制器 在需要用到状态管理的页面中，创建控制器类：

class MyController extends GetxController {
  var count = 0.obs; //监视count变量，只要变量变化，UI框架也会自动刷新
  
  increment() => count++;
}

4. 在页面中使用控制器

class MyHomePage extends StatelessWidget {
  final MyController myController = Get.put(MyController()); //注入控制器

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() => Text(
              '点击了 ${myController.count.value} 次',
              style: TextStyle(fontSize: 20),
              )
            ),
            ElevatedButton(
              child: Text("点击"),
              onPressed: myController.increment,
            )
          ],
        ),
      ),
    );
  }
}

路由

GetX 也提供了路由功能，方便处理页面跳转，下面是路由相关用法：

1. 定义路由 在 lib/core/routes/app_pages.dart 文件中定义路由：

part of './app_pages.dart';

abstract class Routes {
  static const HOME = _Paths.HOME;
  static const DETAIL = _Paths.DETAIL;
}

abstract class _Paths {
  static const HOME = '/home';
  static const DETAIL = '/detail/:id';
}

2. 创建页面 在 lib/views 文件夹下创建页面文件：

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'package:getx_demo/controllers/detail_controller.dart';

class DetailPage extends GetView<DetailController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Detail"),
      ),
      body: Center(
        child: Obx(() => Text(
          '这是详情页面，参数为 ${controller.id.value}',
          style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

3. 定义路由映射 在 lib/core/routes/app_pages.dart 文件中定义路由映射：

part 'app_routes.dart';

class AppPages {
  static const INITIAL = Routes.HOME;

  static final routes = [
    GetPage(
      name: Routes.HOME,
      page: () => HomePage(),
      binding: HomeBinding(),
    ),
    GetPage(
      name: Routes.DETAIL,
      page: () => DetailPage(),
      binding: DetailBinding(),
    ),
  ];
}

4. 导航 在需要导航的页面中使用 Get.toNamed() 方法：

ElevatedButton(
  child: Text("跳转"),
  onPressed: () {
    Get.toNamed(Routes.DETAIL, arguments: {
      "id": myController.count.value
    });
  }
),

依赖注入

GetX 带有内置依赖注入器，可以用于实例化您的模型和控制器类。以下是依赖注入的基本用法：

1. 定义控制器或服务类

class MyService {
  // ...
}

class MyController extends GetxController {
  final MyService myService = Get.find<MyService>();
  // ...
}

2. 声明依赖项 在 main.dart 文件中声明依赖项：

void main() {
  // 声明依赖项
  Get.put(MyService());
  // ...
  runApp(MyApp());
}

这样，控制器就可以使用 Get.find() 或 Get.put() 来访问此服务。

总结

GetX 是一个非常强大的 Flutter 状态管理库，它能够让我们更加便捷的管理状态和路由，并且依赖注入也变得异常简单。它在高性能、可扩展性方面有着突出的表现，非常值得开发者们去尝试使用。