浙江二建建设集团有限公司网站,长沙求职网招聘网,网站制作 flash 修改,云服务器安装win系统做网站前言
学习教程#xff1a;Getx教程_FlutterGetx系列实战教程
简介 getX是第三方的状态管理插件#xff0c;不仅具有状态管理的功能#xff0c;还具有路由管理、主题管理、国际化多语言管理、网络请求、数据验证等功能。相比其他状态管理组件#xff0c;getX简单、功能强大…前言
学习教程Getx教程_FlutterGetx系列实战教程
简介 getX是第三方的状态管理插件不仅具有状态管理的功能还具有路由管理、主题管理、国际化多语言管理、网络请求、数据验证等功能。相比其他状态管理组件getX简单、功能强大。
官方文档 https://pub-web.flutter-io.cn/packages/get
安装
flutter pub add get将MaterialApp修改为GetMaterialApp
GetMaterialApp(title: getx,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: const MyHomePage(title: getx),);Dialog、snackbar、bottomSheet
Dialog
ElevatedButton(onPressed: () {Get.defaultDialog(title: 默认弹窗,middleText: 弹出内容你确定要卸载吗,confirm:TextButton(onPressed: () {Get.back();}, child: const Text(确定)),cancel:TextButton(onPressed: () {Get.back();}, child: const Text(取消)));},child: const Text(getx 默认dialog))snackbar
ElevatedButton(onPressed: () {Get.snackbar(提示, 删除成功);},child: const Text(snack-bar))bottomSheet
ElevatedButton(onPressed: () {Get.bottomSheet(Container(color: Colors.white,height: 130,child: Column(children: [ListTile(leading: const Icon(Icons.wb_sunny_outlined),title: const Text(白天模式),onTap: () {Get.changeTheme(ThemeData.light());Get.back();},),const Divider(),ListTile(leading: const Icon(Icons.wb_sunny),title: const Text(夜间模式),onTap: () {Get.changeTheme(ThemeData.dark());Get.back();},),],),));},child: const Text(snack-bar))路由管理
GetX 为我们封装了Navigation无需context可进行跳转。使用GetX进行路由跳转更加的简单。只需要使用Get.to() 可进行路由跳转GetX对路由跳转简化了跳转动画设置、动画时长定义、动画曲线设置
我们可以通过Get.to()实现普通的路由跳转通过Get.toNamed实现命名路由跳转通过Get.back()实现返回上一级路由通过Get.ofAll()返回跟路由可以通过Get.off()将当前页面从页面栈中移除并将新的页面添加到页面栈中可以通过Get.arguments获取到路由传参
配置路由及路由动画
GetMaterialApp(title: getx,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),// home 和 initialRoute同时存在的话initialRoute会优先生效home: const MyHomePage(title: getx), // 主页initialRoute: /, // 默认显示的路由页面defaultTransition: Transition.leftToRight, // 设置所有页面默认的路由跳转动画getPages: [//路由地址GetPage(name: /, page: () const MyHomePage(title: getx)),GetPage(name: /my,page: () const MyInfo(),transition: Transition.leftToRight // 设置路由过度动画)],)Get.toNamed(my, arguments: {message: Hello Flutter});Widget build(BuildContext context) {String mes Get.arguments?[message] ?? 11;return Scaffold(appBar: AppBar(title: const Text(我的),),body: Center(child: Text(个人信息:$mes),),);}路由抽离
import package:test/page/my.dart;
import package:get/get.dart;class AppPage {static final ListGetPagedynamic routes [GetPage(name: /my,page: () const MyInfo(),transition: Transition.leftToRight // 设置路由过度动画)];
}GetMaterialApp(title: getx,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),// home 和 initialRoute同时存在的话initialRoute会优先生效home: const MyHomePage(title: getx), // 主页// 默认显示的路由页面defaultTransition: Transition.leftToRight, // 设置所有页面默认的路由跳转动画getPages: AppPage.routes,)路由中间件路由守卫
import package:flutter/cupertino.dart;
import package:test/page/my.dart;
import package:get/get.dart;class AppPage {static final ListGetPagedynamic routes [GetPage(name: /my,page: () const MyInfo(),transition: Transition.leftToRight, // 设置路由过度动画middlewares: [MyMiddleWare()])];
}// 中间件
class MyMiddleWare extends GetMiddleware {// 重写重定向overrideredirect(route) {String power Get.arguments?[power];if (power no) {Get.snackbar(提示, 请先进行登录);return const RouteSettings(name: login);}// 放行跳转到目标路由return null;}
}状态管理
主要用与多个页面共享状态使用某一个页面的状态改变其他页面也随着改变。
单页面状态管理
class _MyHomePageState extends StateMyHomePage {// 定义一个响应式的整数RxInt count 0.obs;// 或者RxInt a RxInt(0);overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),// const Color(0x00cab6ec)body: Column(children: [ElevatedButton(onPressed: () {count.value 1;},child: const Text(加1)),// 监听值的变化Obx(() Text(当前值${count.value}))],),);}
}如果使用过vue3那么接受起来就非常容易了。
优点如果使用setState 会重新运行build进行更新如果内容过多的话会产生较大的开销。使用Getx只会更新你监听的组件实现一个局部更新。
多页面状态管理
定义一个Controller
import package:get/get.dart;class CountController extends GetxController {// 定义响应式变量RxInt count 0.obs;
// 增加void add() {count.value;// 调用GetxController内置方法进行更新update();}// 减少void del() {count.value--;// 调用GetxController内置方法进行更新update();}
}主页面使用
class _MyHomePageState extends StateMyHomePage {// 创建控制器示例CountController countController Get.put(CountController(), tag: countController);overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(backgroundColor: Theme.of(context).colorScheme.inversePrimary,title: Text(widget.title),),// const Color(0x00cab6ec)body: Column(children: [ElevatedButton(onPressed: () {Get.toNamed(/my);},child: const Text(我的)),ElevatedButton(onPressed: () {// 加1countController.add();},child: const Text(加1)),// 监听值的变化Obx(() Text(当前值${countController.count.value}))],),);}
}其他页面使用
class MyInfoState extends StateMyInfo {// 获取示例late final CountController countController;overridevoid initState() {super.initState();countController Get.find(tag: countController);}overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(我的),),body: Center(child: ElevatedButton(child: const Text(减1),onPressed: () {countController.del();},),),);}
}GetX Binding
在我们所有使用Getx状态管理器时都需要手动创建一个示例这样是是否麻烦的。而使用Binding可以在项目初始化时把需要使用的状态管理器统一进行初始化。
创建示例的几个方法
Get.put不使用控制器实例也会被创建Get.lazyPut懒加载方式创建实例只有在使用时才会被创建Get.putAsyncGet.put的异步版本Get.create每次使用都会创建一个新的实例
创建绑定类
import package:get/get.dart;import count_controller.dart;class AllControllerBinding implements Bindings {overridevoid dependencies() {// 初始化Get.lazyPutCountController(() CountController());// 多个则多执行几次Get.lazyPut}
}在main.dart中初始化
GetMaterialApp(title: getx,// 初始化绑定状态管理类initialBinding: AllControllerBinding(),theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),// home 和 initialRoute同时存在的话initialRoute会优先生效home: const MyHomePage(title: getx), // 主页// 默认显示的路由页面defaultTransition: Transition.leftToRight, // 设置所有页面默认的路由跳转动画getPages: AppPage.routes,)使用 初始化完成后就不需要再进行创建。使用时只需要通过Get.find来获取实例即可
CountController countController Get.findCountController();GetView
GetView是GetX框架中的一个重要组件它主要用于简化页面组件的创建和管理。通过继承GetView可以方便地创建一个具有状态管理和路由导航功能的页面。
GetView的作用主要有以下几点 简化页面的创建继承GetView后只需重写Widget build(BuildContext context)方法即可创建页面无需再手动创建StatefulWidget或StatelessWidget。 管理页面状态GetView内部封装了GetX框架提供的状态管理功能可以轻松实现状态的监听、更新和销毁避免了手动管理状态的繁琐操作。 路由导航GetView提供了简单的路由导航功能可以通过Get.to()、Get.off()等方法进行页面跳转并且可以携带参数传递。 依赖注入GetView内置了依赖注入功能可以通过Get.put()、Get.lazyPut()等方法来注册和获取全局的依赖对象方便在页面中使用。
总的来说GetView的作用是简化页面组件的创建和管理提供了便捷的状态管理和路由导航功能使得开发者可以更专注于业务逻辑的实现。
实例
// 需要指定要使用的状态管理类
class MyInfoPage extends GetViewCountController {const MyInfoPage({super.key});overrideWidget build(BuildContext context) {// 如果第一次使用还需要put没有结合Binding时Get.put(CountController());return Scaffold(appBar: AppBar(title: const Text(我的),),body: Center(child: ElevatedButton(child: const Text(减1),onPressed: () {// 因为几次了GetView并且指定了泛型因此可以获取到对应controllercontroller.del();},),),);}
}几种使用情况
只是单纯展示共享状态或者需要对共享状态操作既有共享状态又有私有状态这是可以结合响应式状态变量来使用。这样就不需要创建StatefulWidget以及其对应的State
多语言配置
略可以自行观看视频。
工具类——GetUtils
GetUtils是Getx提供的工具类库包含值是否为空、是否是数字、视频、音频、ppt、邮箱、手机号等。
