GetX

2022-07-26 本文已影响0人 woniu

一、什么是 GetX

GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。
GetX有三个基本原则：
1、性能：GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。
2、效率：GetX语法简洁，保持了极高的性能，能极大地缩短开发时长。
3、结构：GetX可以将界面、路由、逻辑和依赖完全解耦，用起来更加清晰，代码更容易维护。

二、GetX响应式状态管理器

响应式是一种面向数据流和变化传播的编程范式。GetX处理响应式编程使它变得很简单，使用 Get 的响应式编程就像使用 setState 一样简单。

你不需要创建StreamControllers.
你不需要为每个变量创建一个StreamBuilder。
你不需要为每个状态创建一个类。
你不需要为一个初始值创建一个get。

三、Navigation路由跳转

GetX 进行路由跳转非常的简单，只需要调用Get.to()即可进行路由跳转，GetX为我们封装了Navigation，无需context可进行跳转，并且能很方便的使用跳转动画等。
GetX有两种跳转方式：

1、Navigation—通过to方法进行路由跳转Get.to()
第一步：程序入口设置，要用GetMaterialApp

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/NavigationForNamedExample/NavigationForNamedExample.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      home: NavigationForNamedExample(),//就是我自己的页面呀
    );
  }
}

第二步：调用to方法

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/NavigationExample/home.dart';
import 'package:get/get.dart';

class NavigationExample extends StatelessWidget {
  GlobalKey<NavigatorState> _navKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Navigation"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                Get.to(Home());
              },
              child: Text("跳转到首页"))
          ],
        ),
      ),
    );
  }
}

2、Get.toName()
我们一般会使用第二种方法，getPages中的内容专门写一个类，用来初始所有的路由。
第一步：应用程序入口设置

import 'package:flutter/material.dart';
import 'package:flutter_getx_example/NavigationForNamedExample/NavigationForNamedExample.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "GetX",
      initialRoute: "/",
      defaultTransition: Transition.zoom,
      getPages: [
        GetPage(name: "/", page: () => MyApp()),
        GetPage(name: "/home", page: () => Home()),
        GetPage(name: "/my", page: () => My(), transition: Transition.rightToLeft)
      ],
      home: NavigationForNamedExample(),
    );
  }
}

第二步：调用toNamed

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class NavigationForNamedExample extends StatelessWidget {
  GlobalKey<NavigatorState> _navKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX NavigationForNamed"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                Get.toNamed("/my");
              },
              child: Text("跳转到首页"))
          ],
        ),
      ),
    );
  }
}

优化路由：

1、路由名称管理类

abstract class Routes {
  static const splash = '/splash';
  static const home = '/home'; // 首页
  static const login = '/login'; // 登陆
  static const userReg = '/register'; //会员注册路由
  static const agentReg = '/agentRegister'; //代理注册路由
  static const forgetPwd = '/forgetPwd'; //忘记密码路由
  static const activity = '/activity';
  static const gameInit = '/gameInit'; //游戏加载路由
  static const gameCategory = '/gameCategory'; //电子、棋牌游戏展示路由
  static const article = '/article'; //文章路由
  static const gameWebView = '/gameWebView'; // 进入第三方游戏页面
  static const welfareCenter = '/welfare'; // 进入福利界面
  static const popularize = '/popularize'; // 进入推广界面
  static const maintain = '/maintain'; // 维护界面
}

2、Get初始化路由数组

List<GetPage> routers = [
  GetPage(
    name: Routes.splash,
    page: () => const SplashPage(),
  ),
  GetPage(
    name: Routes.home,
    page: () => const HomePage(),
    binding: HomeBinding(),
  ),
  GetPage(
    name: Routes.maintain,
    page: () => const MaintainPage(),
  ),
  //首页路由
  GetPage(
      name: Routes.login,
      page: () => const LoginPage(),
      binding: LoginBinding()),
  //登陆路由

  GetPage(
    name: Routes.userReg,
    page: () => const RegisterPage(),
    // binding: LoginBinding()
  ),
]

binding对构造器进行统一的初始化，使用的时候不需要我们再次初始化。
Flutter GetX系列教程---国际化配置、依赖注入、Binding

3、调用

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final _app = AppService.to;
    Intl.defaultLocale = 'zh';
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter App',
      theme: CustomTheme.darkTheme,
      darkTheme: CustomTheme.darkTheme,
      themeMode: ThemeMode.dark,
      initialRoute: Routes.splash,
      getPages: routers, //这里就是所有的路由数组
      defaultTransition: Transition.noTransition,
      transitionDuration: const Duration(milliseconds: 325),
      routingCallback: _app.routingCallBack,
      localizationsDelegates: const [
        FormBuilderLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      onInit: () {
        Get.put(MusicController());
      },
      navigatorObservers: [
        FlutterSmartDialog.observer,
        SentryNavigatorObserver(),
      ],
      builder: (context, widget) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(
            textScaleFactor: 1.0,
          ),
          child: FlutterSmartDialog(
            child: widget,
          ),
        );
      },
    );
  }
}

接收上个页面传参：Get.parameters

class NextController extends StatelessWidget{
  GlobalKey<NavigatorState> _navKey = GlobalKey();
  Map argMap = Get.parameters;
  var pra = "zhangsanlisi";
  @override
  Widget build(BuildContext context) {
     print(argMap['name']);
      return Scaffold(
        appBar: AppBar(
          title: Text("下个页面"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // Text(argMap["name"]),
              ElevatedButton(
                  onPressed: () async {
                    Get.back(result: pra);//数据回传
                  },
                  child: Text("跳转到首页"))
            ],
          ),
        ),
      );
  }
}

四、Snackbar

如果想在应用程序中触发某些特定的事件后，需要弹出一则快捷消息，那么使用Snackbar则是最佳的选择，接下来我们看一下GetX如何来联调Snackbar来使用。

image.png

Snackbar总共38个属性：

image.png

五、Dialog

Dialog 底层其实是对AlertDialog进行了封装，一般用于二次确认的弹出框，比如当点击某个按钮提交资料时，需要用户二次确认，以防止误操作。
按钮内容：

   ElevatedButton(onPressed: (){
                Get.defaultDialog(
                  title:"开车啦",
                  titleStyle:TextStyle(color: Colors.red,fontSize: 20),
                  middleText: "上车一块，老人免票",
                  middleTextStyle: TextStyle(color: Colors.red,fontSize: 14),
                  contentPadding: EdgeInsets.all(10),
                  radius: 20,
                  //两种方法：
                  /* 方法一：
                  textCancel: "取消",//系统
                  textConfirm: "确定",
                  onCancel: (){
                    print("点击了取消");
                  },
                  onConfirm: (){
                    Get.back();
                    print("点击了确定");
                  }
                  */
                   //自定义按钮
                  // confirm: TextButton(onPressed: (){print("点击了确定");}, child: Text("确定")),
                  // cancel:  TextButton(onPressed: (){print("点击了取消");}, child: Text("取消")),
                  //方法二：
                  actions: [
                    ElevatedButton(onPressed: (){
                      Get.back();
                      Get.toNamed('/nextController',parameters: {'name':'zhang'});                 
                      print("点击了取消");
                      }, child: Text("取消")),
                    SizedBox(width: 20,),
                    ElevatedButton(onPressed: (){Get.back();print("点击了确定");}, child: Text("确定"))
                  ]
                );
              }  , child: Text("点击Dialog")),

image.png

Dialog属性和说明：

image.png

内容链接

GetX

一、什么是 GetX

二、GetX响应式状态管理器

三、Navigation路由跳转

优化路由：

四、Snackbar

五、Dialog

猜你喜欢

热点阅读