携手创作,共同成长!这是我参与「日新方案 · 8 月更文应战」的第2天,点击检查活动详情

网上也有许多相关文章,这里记载下自己Getx的学习记载,运用。

本文首要介绍Getx以及GetX路由办理

image.png

Getx现在是比较火的一个结构,GetX 是 Flutter 上的一个轻量且强壮的解决方案:高性能的状况办理、智能的依靠注入和快捷的路由办理。一起也有一些比较有用的工具。

对于具体的情形能够参阅中文的Readme

1. GetView & GetxController

这里简略的说下GetViewGetxController
GetView 便是相比咱们StatelessWidget多了一个controller

image.png

这样咱们在页面获取GetxController的时分就不用手动获取

final controller = Get.put(NetworkController());

GetxController 一般会把咱们的数据和方法放在这个类中,其间当咱们的页面中包裹了GetBuilder的widget的时分就会更新页面,一般2种方法,一种自动调用update,或者运用obx()包裹的组件进行响应式

image.png
经过 Obx(() => )包裹的类运用了listData,他的value改动则会更新页面
image.png

2. 路由办理

咱们在项目中初始化的时分运用运用GetMaterialApp替换原生的MaterialApp

image.pngGetMaterialApp作为Widget树的进口,里面有许多功用,这里咱们简略的说下关于途径方面的

Widget build(BuildContext context) {
  return refreshScaffold(child:  GetMaterialApp(
    title: 'Flutter Template Project',
    initialRoute: AppRoutes.scaffold, /// app 进口
    enableLog: const bool.fromEnvironment('dart.vm.product'),
    unknownRoute: unknownRoute,
    getPages: appRoutes,
    builder: EasyLoading.init(),
    theme: ThemeConfig.themeData,
  ));
}
  • initialRoute:为咱们初始化的途径,咱们翻开app后途径
  • unknownRoute :未知途径,跳转的页面
  • getPages:咱们一切的页面初始化放入的数组

下面看下路由的初始化:

  • routeName

image.png
咱们经过抽象类首要定义途径称号,一般是经过/来进行途径定义,这样也能清楚页面地点的位置

  • GetPage
    对于GetPage初始化一般有2种方法
  1. 第一种比较简略便是经过GetPage进行包裹
GetPage(name: AppRoutes.web, page: () =>const WebViewPage()),

name为咱们的途径的称号,后边就能够经过Get.toNamed()进行跳转了。
page:便是咱们初始化的的页面在进行跳转的时分进行初始化

  1. 第二种是绑定事务逻辑binding
GetPage(
    name: AppRoutes.home,
    page: () =>  const HomePage(),
    binding: BindingsBuilder(() => Get.lazyPut(() => HomeController()))),

经过懒加载把咱们的GetxController绑定到page页面上,这样咱们就不用手动的获取。

image.png

一般咱们的数组许多的话不好区分,咱们能够根据功用进行区分

image.png

这里咱们经过dart语法...进行解包,Cascades (..?..) 允许你对同一个目标进行一系列操作。这一般节省了创立临时变量的步骤,并允许您编写更多流通的代码。

image.png
子页面便是相似的效果

父页面

image.png

子页面

image.png

3. 小结

关于Getx的途径办理现在便是这样做的,经过定义route的文件夹,里面创立一个存放途径称号的类,一个GetPage的的数组,经过GetMaterialApp进行初始化,指定进口等进行路由的创立。