Flutter开发 - 使用GetX框架实现类似MVVM架构

回顾原生开发在Android原生开发中通常是使用Databinding实现MVVM架构只需要在gradle中开启databinding的选项然后使用ObservableField或LiveData即可。buildFeatures { dataBinding true }layout xmlns:androidhttp://schemas.android.com/apk/res/android xmlns:apphttp://schemas.android.com/apk/res-auto data variable namem typecom.example.vm.LoginViewModel / /data EditText android:text{m.username}/ /layout在ViewModel中可以定义ObservableField这样界面就可以直接观察了。简单看一下ObservableField的源码其实还有另外的几个类也是类似的功能比如ObservableInt和ObservableBoolean。package androidx.databinding; import androidx.annotation.Nullable; import java.io.Serializable; /** * An object wrapper to make it observable. * p * Observable field classes may be used instead of creating an Observable object. It can also * create a calculated field, depending on other fields: * precodepublic class MyDataObject { * private Context context; * public final ObservableFieldlt;Stringgt; first new ObservableFieldlt;Stringgt;(); * public final ObservableFieldlt;Stringgt; last new ObservableFieldlt;Stringgt;(); * public final ObservableFieldlt;Stringgt; display * new ObservableFieldlt;Stringgt;(first, last) { * #64;Override * public String get() { * return context.getResources().getString(R.string.name, first.get, last.get()); * } * }; * public final ObservableInt age new ObservableInt(); * }/code/pre * Fields of this type should be declared final because bindings only detect changes in the * fields value, not of the field itself. * * param T The type parameter for the actual object. * see ObservableParcelable */ public class ObservableFieldT extends BaseObservableField implements Serializable { static final long serialVersionUID 1L; private T mValue; /** * Wraps the given object and creates an observable object * * param value The value to be wrapped as an observable. */ public ObservableField(T value) { mValue value; } /** * Creates an empty observable object */ public ObservableField() { } /** * Creates an ObservableField that depends on {code dependencies}. Typically, * ObservableFields are passed as dependencies. When any dependency * notifies changes, this ObservableField also notifies a change. * * param dependencies The Observables that this ObservableField depends on. */ public ObservableField(Observable... dependencies) { super(dependencies); } /** * return the stored value. */ Nullable public T get() { return mValue; } /** * Set the stored value. * * param value The new value */ public void set(T value) { if (value ! mValue) { mValue value; notifyChange(); } } }databinding里面的ObservableField类可以帮助我们很好的实现数据的双向绑定通过调用它 的get()方法就可以拿到值了在xml中也可以很方便地使用其值。 这样一种优雅的写法在Flutter中怎么玩呢还是那句话巧妇难为无米之炊首先你得有Flutter的开发环境要不然你也就只能看看了。如果不了解Flutter环境怎么搭建的可以看juejin.cn/post/718557… 这篇文章。那么我们开向幼儿园的车马上就要发车了。不好意思说错了是开往大前端大佬的车。框架搭建我们先大概了解下Flutter项目的项目结构由于这是一个演示Demo我这里就不分包了你们可以写的更优雅。集成get框架就一个命令flutter就是这么简单。flutter pub add get内行人一眼就看出我们肯定是先看main.dart文件。import package:flutter/material.dart; import package:flutter_mvvm_demo/home_binding.dart; import package:flutter_mvvm_demo/main_binding.dart; import package:flutter_mvvm_demo/home_view.dart; import package:flutter_mvvm_demo/main_view.dart; import package:get/get.dart; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); override Widget build(BuildContext context) { return GetMaterialApp( initialRoute: /home, getPages: [ GetPage( name: /home, page: () const HomeView(), binding: HomeBinding(), ), GetPage( name: /main, page: () const MainView(), binding: MainBinding(), ), ], ); } }这个MyApp就是我们程序的入口相当于Application类其实最主要是因为在main()方法中调了一个runApp()方法然后传入了我们的第一个视图。在Flutter中不是管View叫视图。Flutter中的视图有两种一种是有状态的StatefulWidget还有一种是无状态的StatelessWidget。我们这里返回了一个GetMaterialApp里面指定了两个属性。initialRoute代表第一个页面的路由getPages中指定所有的页面。GetPage里面的page指定了这个页面的视图Widget然后使用binding指定依赖注入简单说就是不用在使用的时候new对象直接注入到属性中。import package:flutter_mvvm_demo/home_controller.dart; import package:get/get.dart; class HomeBinding extends Bindings { override void dependencies() { Get.put(HomeController()); } }import package:flutter_mvvm_demo/main_controller.dart; import package:get/get.dart; class MainBinding extends Bindings { override void dependencies() { Get.put(MainController()); } }调用Get.put()方法我们就注入了controller之后我们可以直接在视图层拿到这个controller。import package:flutter/material.dart; import package:flutter_mvvm_demo/home_controller.dart; import package:get/get.dart; class HomeView extends GetViewHomeController { const HomeView({super.key}); override Widget build(BuildContext context) { return Center( child: ElevatedButton(onPressed: () { Get.toNamed(/main); }, child: const Text(跳转主界面)) , ); } }import package:flutter/material.dart; import package:flutter_mvvm_demo/main_controller.dart; import package:get/get.dart; class MainView extends GetViewMainController { const MainView({super.key}); override Widget build(BuildContext context) { return Obx(() Row(children: [ Text(${controller.count}), ElevatedButton(onPressed: () { controller.plus(); }, child: const Text()) ])); } }视图层我们直接继承GetView比较方便这样可以直接拿到之前注入的controller。使用Obx括起来的内容当被观察的属性值被修改时直接更新Obx里面的界面。我们再来看一看怎么定义可以被观察的属性类似于原生开发中ObservableField这样的。import package:get/get.dart; class MainController extends GetxController { var count 0.obs; plus() count; }你没有看错直接在属性值的地方加一个.obs就可以了。这样count的值一旦被修改就会通知刷新Obs括起来的界面。作者dora链接https://juejin.cn/post/7200775196113895483最后如果想要成为架构师或想突破20~30K薪资范畴那就不要局限在编码业务要会选型、扩展提升编程思维。此外良好的职业规划也很重要学习的习惯很重要但是最重要的还是要能持之以恒任何不能坚持落实的计划都是空谈。如果你没有方向这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》帮大家将杂乱、零散、碎片化的知识进行体系化的整理让大家系统而高效地掌握Android开发的各个知识点。相对于我们平时看的碎片化内容这份笔记的知识点更系统化更容易理解和记忆是严格按照知识体系编排的。全套视频资料一、面试合集二、源码解析合集三、开源框架合集欢迎大家一键三连支持若需要文中资料直接点击文末CSDN官方认证微信卡片免费领取↓↓↓