学习Flutter的第十二天

6.12 GetX

// 安装
get: ^4.6.5

// 引入
import 'package:get/get.dart';

// 改写入口
MaterialApp => GetMaterialApp

GetX 与其说是一个状态管理库，倒不如是是一个简化 Flutter 开发的百宝箱。它提供了很多工具来简化我们的开发，本篇我们先对 GetX 有一个大概的认识，然后接下来的篇章再将 GetX 的具体应用。

6.12.1 dialog

Get.defaultDialog(
title: "标题",
middleText: "我是内容",
confirm: ElevatedButton(
    onPressed: () {
      print("确认");
    },
    child: const Text("确定")),
cancel: ElevatedButton(
    onPressed: () {
      print("取消");
    },
    child: const Text("取消")));

6.12.2 SnackBar

Flutter 自身携带的 SnackBar 有很多限制，而 GetX 的非常简单，当然也有更多的样式配置和位置配置参数。

Get.snackbar('SnackBar', '这是GetX的SnackBar');

6.12.3 BottomSheets

BottomSheet 是底部弹出的一个组件，常用于单选、验证码二次校验弹窗等，GetX的BottomSheet底部弹出是自定义通过路由push的方法实现底部弹窗的一个效果。

import 'package:get/get.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Title"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () {
              Get.bottomSheet(
                Container(
                  child: Wrap(
                    children: [
                      ListTile(
                        leading: Icon(Icons.wb_sunny_outlined),
                        title: Text("白天模式"),
                        onTap: () {
                                                    // 切换主题
                          Get.changeTheme(ThemeData.light());
                        },
                      ),
                      ListTile(
                        leading: Icon(Icons.wb_sunny),
                        title: Text("黑夜模式"),
                        onTap: () {
                          // 切换主题
                          Get.changeTheme(ThemeData.dark());
                        },
                      )
                    ],
                  ),
                )
              );
            }, child: Text("Bottom Sheet"))
          ],
        ),
      ),
    );
  }
}

6.12.4 路由

路由支持命名路由和匿名路由：

Get.to(() => Home());
Get.toNamed('/home');
// 返回上一个页面
Get.back();
// 使用下一个页面替换（没有返回按钮）
Get.off(NextScreen());
// 清空导航堆栈全部页面
Get.offAll(NextScreen());
// 获取命名路由参数
print(Get.arguments['id']);
print(Get.arguments['name']);

需求：页面跳转APage -> BPage -> CPage -> DPage，需要从DPage返回到BPage
原生写法：

Navigator.popUntil(context, 
  (route) => route.settings.name == '/BPage'
);

使用GetX更简单(不需要context)：

Get.until((route) => route.settings.name == '/BPage');

注意：

网上很多帖子使用的是Get.offUntil，其实是不太准确的。

Get.until和（Get.offUntil、Get.offNamedUntil）的区别：

• Get.until是从当前页面一层一层地返回，当到达BPage时停止。
• Get.offUntil是销毁页面并进入新的页面，与原生方法Navigation.pushAndRemoveUntil的用法相同，这里的BPage和之前的BPage已经不是同一个了。

作者：李有钱灬
链接：https://www.jianshu.com/p/10dbede58590
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

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

import '../pages/Tabs.dart';
import '../pages/search.dart';
import '../pages/first.dart';
import '../pages/banner.dart';
import '../pages/bannerBuilder.dart';
import '../pages/animationPage.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(primarySwatch: Colors.blue),
      // home: const Tabs(),
      initialRoute: "/",
      // onGenerateRoute: onGenerateRoute,
      // 默认路由跳转动画(全局)
      defaultTransition: Transition.rightToLeftWithFade,
      getPages: [
        GetPage(name: "/", page: () => const Tabs()),
        GetPage(
            name: "/s", page: ({arguments}) => Search(arguments: arguments)),
        GetPage(
            name: "/f",
            page: () => const FirstPage(),
            // 也可以针对某一个路由配置
            transition: Transition.fade),
        GetPage(name: "/b", page: () => const BannerPage()),
        GetPage(name: "/bb", page: () => const BannerBuilder()),
        GetPage(name: "/ap", page: () => const AnimationPage()),
      ],
    );
  }
}

中间件 middleware

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

class SearchMiddleWare extends GetMiddleware {
  @override
  RouteSettings? redirect(String? route) {
    // return super.redirect(route);
    // ... doSomeThing
    // 例如没有登录，跳转到登录
    return RouteSettings(name: "/");
  }
}

// 配置中间件
GetPage(name: "/b", page: () => const BannerPage(),middlewares: [SearchMiddleWare()])

6.12.5 页面返回刷新

方法一：

// 第一个界面

///刷新方法页面刷新
  void resData() async {
    datas.clear(); //清除原有列表
    getData(); //请求数据
  }
 ///需要跳转到地方
 Get.to(() => twoPage()).then((value) {
                  if (value != null && value) {
                    resData();
                  }
                });


// 第二个界面

//在你需要返回的地方
Get.back(result: true);

方法二：分层管理，view，controller分开

controller层

//定义刷新方法
class AAAAController extend GetxController{
    refreshData(){
   xxxxxx；
    }
}

view层
APage ----> BPage，a页面到了b页面，进行操作之后，需要返回a页面并刷新。

B页面View

//操作之后，需要返回A页面。
//比如提交之后，返回刷新一下
submitData(){
    //提交操作
    xxxxxx();

    //返回,并刷新。
    back();
}


back(){
     final AAAAController logic = Get.find<AAAAController>();
     logic.refreshData(); //找到控制器，并使用刷新操作的方法。
     Get.back();
}

6.12.6 加载流程

使用get中的代码分层，GetxController

1、dart界面中，先加载界面，bo还没有初始化
2、GetxController 中调用 onReady  
3、GetxController 中执行 update(["recharge"]);  
4、dart刷新界面，GetBuilder 中的代码