文章目录
- 一、前言
- 什么是 GetX ?
- GetX 相关优势
- 二、GetX 集成
- 三、实践
- lib 目录划分模版
- 开发规范
一、前言
什么是 GetX ?
GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。
GetX 的三个基本原则：
- 性能： GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。如果你感兴趣，这里有一个性能测试。
- 效率： GetX 的语法非常简捷，并保持了极高的性能，能极大缩短你的开发时长。
- 结构： GetX 可以将界面、逻辑、依赖和路由完全解耦，用起来更清爽，逻辑更清晰，代码更容易维护。
GetX 中文官方文档
pub 地址
GetX 相关优势
- 依赖注入
- GetX 是通过依赖注入的方式，存储相应的 XxxGetxController；已经脱离了 InheritedWidget 那一套玩法，自己手动去管理这些实例，使用场景被大大拓展
- 简单的思路，却能产生深远的影响：优雅的跨页面功能便是基于这种设计而实现的、获取实例无需 BuildContext、GetBuilder自动化的处理及其减少了入参等等
- 跨页面交互
- 这绝对是GetX的一个优点！对于复杂的生产环境，跨页面交互的场景，实在太常见了，GetX的跨页面交互，实现的也较为优雅
- 路由管理
- GetX 内部实现了路由管理，而且用起来，非常简单！bloc没实现路由管理，我不得不找一个star量高的路由框架，就选择了fluro，但是不得不吐槽下，fluro用起来真的很折磨人，每次新建一个页面，最让我抗拒的就是去写fluro路由代码，横跨几个文件来回写，头皮发麻
- GetX实现了动态路由传参，也就是说直接在命名路由上拼参数，然后能拿到这些拼在路由上的参数，也就是说用flutter写H5，直接能通过Url传值，OMG！可以无脑舍弃复杂的fluro了
- 实现了全局 BuildContext
- 国际化，主题实现
二、GetX 集成
1. 在 pubspec.yaml 文件中添加 GetX 的依赖，如下：
dependencies:
flutter:
sdk: flutter
get:
2. 需要对 GetX 进行初始化，将默认的 MaterialApp 替换为 GetMaterialApp 即可，如下:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
三、实践
lib 目录划分模版
- common
此目录用来存放通用模块及其变量，例如colors、langs、values等，例如：
├── colors
│ └── colors.dart
├── langs
│ ├── en_US.dart
│ ├── translation_service.dart
│ └── zh_Hans.dart
└── values
├── cache.dart
├── storage.dart
└── values.dart
- components
此目录主要存放顶层公告组件，例如 appbar、scaffold、dialog等等，例如：
├── components.dart
├── custom_appbar.dart
└── custom_scaffold.dart
- pages
此目录主要存放页面文件，例如：
├── Index
├── home
├── login
├── notfound
├── proxy
└── splash
注：每个Item为一个文件夹.
- router
此目录为路由文件，此模版的路由方式约定为命名路由，为固定目录，目录结构如下：
├── app_pages.dart
└── app_routes.dart
- services
此目录为路由文件，此模版的路由方式约定为命名路由，为固定目录，目录结构如下：
├── app_pages.dart
└── app_routes.dart
- utils
此目录用来存放一些工具模块，例如 request 、local_storage等等，例如：
├── authentication.dart
├── local_storage.dart
├── request.dart
├── screen_device.dart
└── utils.dart
开发规范
当你需要新建一个页面时，你需要按照以下步骤进行：
假设现在要创建一个 Home 页面.
1. 在 pages 目录下新建 home 目录：
2. 在 home 目录下，新建以下四个文件：
- home_view.dart : 视图(用来实现页面布局)
- home_contrller.dart : 控制器(用来实现业务逻辑)
- home_binding : 控制器绑定(用来绑定controller到view)
- home_model : 数据模型(用来约定数据模型)
注意：每创建一个页面时，都必须如此做，命名采用 页面名_key 这样的形式。
当你创建好一个页面，目录应该长这样:
// home
.
├── home.binding.dart
├── home_controller.dart
├── home_model.dart
└── home_view.dart
3. 到 router 文件夹下面添加对应路由：
// app_routes.dart
part of 'app_pages.dart';
abstract class AppRoutes {
...
static const Home = '/home';
...
}
// app_pages.dart
class AppPages {
static final routes = [
...
GetPage(
name: AppRoutes.Home,
page: () => HomePage(),
binding: HomeBinding(),
),
...
];
}
完成以上步骤，你就可以愉快的开始开发了。
