【Flutter -- GetX】准备篇

【Flutter -- GetX】准备篇

文章目录

​​一、前言​​

​​什么是 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.dartpart of 'app_pages.dart';abstract class AppRoutes { ... static const Home = '/home'; ...}

// app_pages.dartclass AppPages { static final routes = [ ... GetPage( name: AppRoutes.Home, page: () => HomePage(), binding: HomeBinding(), ), ... ];}

完成以上步骤，你就可以愉快的开始开发了。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。