GetX的使用习惯新尝试 2022-10-15 周六

老的习惯

• GetX目前几乎成了Flutter开发标准，对应的插件都数不胜数。

• 大半年以来，一直使用“小呆呆666”写的插件，采用他提倡的分类方法。“view，logic，state”

• 对应的插件地址，同时也有详尽的使用教程。使用以来感觉也很不错。推荐使用。
  GetX

新的想法

• logic是新起的后缀名字，原本的应该是GetxController，所以概念上Controller更接近

• Flutter布局风格跟前端更接近，和Android相差很大，跟iOS相差就更大。IDE方面，有AndroidStudio和VSCode，后端的IntelliJ也可以。由于本人偏向使用VSCode，但是GetX插件没有提供VSCode版本。现在的做法是在AndroidStudio中用GetX插件创建文件，然后在VSCode中写代码，感觉稍微有点麻烦

• 在VSCode中浏览插件，看到有个插件：“Flutter GetX Generator - 猫哥”，感觉还可以，所以准备尝试一下。

• 以前对于GetView一直用不上，这里看到了一种使用方案，尝试一下。GetView自动把GetxController注入，可以省了binding过程，还是有价值的。

插件安装

企业微信截图_fc9ac76d-4411-49c9-90f8-535854bae7a9.png

Flutter GetX Generator - 猫哥

使用实践

• 选中父文件夹，右键菜单：Getx: GetBuilder Page

• 填入页面的名字，采用大驼峰的命名方式，比如：SplashScreen

• 自动生成文件夹，以及必要的文件

企业微信截图_5e5c0242-efec-4ca1-98e3-586be3bb2c04.png

Controller

• 这个是继承自GetxController的自定义，用来写业务逻辑。生命周期函数采用代码注释的方式加入，比较好。

• 初始化数据给出了具体的位置，这点也是可取的。

import 'package:get/get.dart';

class SplashscreenController extends GetxController {
  SplashscreenController();

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

  void onTap() {}

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

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

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

View

• 继承自GetView，并且和Controller自动绑定

• 自动用上了GetBuilder，这个比较好，并且也给了id

• 自动套上了Scaffold框架，并且统一命名了主视图方法名_buildView

mport 'package:get/get.dart';

import 'index.dart';

class SplashscreenPage extends GetView {
  const SplashscreenPage({Key? key}) : super(key: key);

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

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

index

• 这个文件在老版本插件是没有的，是最近新增的

• 这个文件中啥也没有，就是为了方便文件相互包含，减少package数量

• 这个习惯估计来自前端开发

library splashscreen;

export './controller.dart';
export './view.dart';

widgets文件夹

• 这个文件是空的

• 顾名思义，这里是放组件的

• 组件也可以继承自GetView，Controller可以和View用同一个，这个倒是蛮不错的。

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

import '../index.dart';

class HelloWidget extends GetView {
  const HelloWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Obx(() => Text(controller.title)),
    );
  }
}

注意的地方

• 命名如果是大驼峰的，但是给出的结果却是小写连在一起，这个很不好。
  比如SplashscreenPage 不如SplashScreenPage更合适。

• 应该用小写加下划线的命名方式，比如splash_screen，那么生成的类名是SplashScreenPage，符合预期

小写加下划线命名；这里需要强调一下

整体感受

• 可以作为另一种风格尝试一下

• GetBuild中的id作用是部分刷新，作用不大，可以不采用

参考文章

flutter_ducafecat_news_getx
flutter-getx-template