1.3 基于 GetBuilder 构建

GetBuilder Page 模块 - 手动控制触发定向精准

Getx Full 存在问题

1. 虽然规范，但文件过多
2. obs Obx 性能不好

obx 是一个 订阅器；
比如有很多的订阅器，当数据发生变化的时候，这些订阅器都会自动去触发更新；
这其实不是自己想要的，比如想要的是针对某一个组件进行更新不需要上面那种大范围的更新，大范围的更新这样性能就不太好了；

3. ddd

GetBuilder 的模块开发步骤

GetBuilder 是 手动控制触发, 这样比较好，这样就有一个定向精准控制

第 1 步: 创建 Splash 模块

右键菜单 “Getx: GetBuilder Page” 创建模块 “splash”

文件清单： └── splash ├── controller.dart ├── index.dart ├── view.dart └── widgets

名称	说明
index.dart	导包
controller.dart	控制器 业务逻辑
view.dart	视图页面
widgets	子组件(本模块私有)

第 2 步: 阅读理解代码

controller.dart

import 'package:get/get.dart';

class SplashController extends GetxController {
  SplashController();

  _initData() {
    update(["splash"]);
  }

  void onTap() {}

  // @override
  // void onInit() {
  //   super.onInit();
  // }

  @override
  void onReady() {
    super.onReady();
    _initData();
  }

  // @override
  // void onClose() {
  //   super.onClose();
  // }
}

view.dart

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

import '../../doc_flutter/1.3 Page-基于 GetBuilder 构建/index.dart';

class SplashPage extends GetView<SplashController> {
  const SplashPage({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return const Center(
      child: Text("SplashPage"),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<SplashController>(
      init: SplashController(),
      id: "splash",
      builder: (_) {
        return Scaffold(
          appBar: AppBar(title: const Text("splash")),
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}

第 3 步: 尝试手动触发更新

1. 路由注册 lib/common/routers/pages.dart

GetPage(
    name: "/splash",
    page: () => const SplashPage(),
),

2. ddd lib/pages/system/login/view.dart

// 跳转
ElevatedButton(
    onPressed: () {
        Get.toNamed("/splash");
    },
    child: const Text("跳转 splash"),
),

3. 加入点击更新 title 代码 lib/pages/system/splash/controller.dart

String title = "";

void onTap(int ticket) {
    title = "GetBuilder -> 点击了第 $ticket 个按钮";
    update(['splash_title']); // 定向精准控制
}

lib/pages/system/splash/view.dart

// 主视图
Widget _buildView() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        // 文字标题
        GetBuilder<SplashController>(
          id: "splash_title", // 定向精准控制
          builder: (_) {
            return Center(
              child: Text(controller.title),
            );
          },
        ),

        // 按钮
        ElevatedButton(
          onPressed: () {
            controller.onTap(DateTime.now().microsecondsSinceEpoch);
          },
          child: const Text("立刻点击"),
        ),
      ],
    );
}

4. ddd
5. ddd
6. ddd
7. ddd
8. ddd

最后: 查看依赖 管理日志

我们进入模块后再退出，看下日志

[GETX] Instance "GetMaterialController" has been created
[GETX] Instance "GetMaterialController" has been initialized
[GETX] GOING TO ROUTE /
[GETX] Instance "LoginController" has been created
[GETX] Instance "LoginController" has been initialized
[GETX] GOING TO ROUTE /splash
[GETX] Instance "SplashController" has been created
[GETX] Instance "SplashController" has been initialized
[GETX] CLOSE TO ROUTE /splash
[GETX] "SplashController" onDelete() called
[GETX] "SplashController" deleted from memory
[GETX] Instance "SplashController" already removed.

可以发现自动管理了内存加载释放，代码又进一步简洁了

提交代码到 git:

git add .
git commit -m "GetBuilder Page 模块"