getx是一款強大的第三方庫，使用了它，相當(dāng)于同時使用了4~5個庫，主要功能有：
1.路由管理
2.狀態(tài)管理
3.依賴管理
4.實用工具
　　1>國際化
　　2>改變主題
　　3>其他高級API（snackbar,bottomSheet,dialog等）

image.png

而且它已經(jīng)有了中文的說明，對我們簡直不要太友好了！readme中對getx進(jìn)行了全面介紹，相信小伙伴們對它不會失望
[中文版本readme]https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md
回到正題，我們還實踐一下，getx里面的路由管理

配置路由

第一步，在pubspec.yaml文件中，導(dǎo)入getx庫，如下圖

image.png

get: ^4.3.8

右上角，點擊一下Pub get,這樣庫的依賴包就下載到本地工程了，

第二步，引入頭文件，

import 'package:get/get.dart';

第三步，在入口函數(shù)main里面進(jìn)行配置，如下圖

image.png

route.gif

第五步，具體實現(xiàn)，頁面結(jié)構(gòu)如下

image.png

說明一下跳轉(zhuǎn)流程：啟動界面就是跳轉(zhuǎn)到根路由RouteConfig.main，也就是對應(yīng)的StartAppPage,如上圖顯示

第六步，StartAppPage代碼如下：

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

class StartAppPage extends StatefulWidget {
  const StartAppPage({Key? key}) : super(key: key);

  @override
  _StartAppPageState createState() => _StartAppPageState();
}

class _StartAppPageState extends State<StartAppPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Future.delayed(Duration(milliseconds: 0), () {
      Get.offAllNamed("/home");
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(),
      ),
      body: Container(
        color: Colors.white,
      ),
    );
  }
}

關(guān)鍵代碼如下：也就是說，它會立馬跳轉(zhuǎn)到ScaffoldPage,這里是使用了命名路由 Get.offAllNamed("/home");,當(dāng)然也可以使用之前定義好的常量來跳轉(zhuǎn)Get.offAllNamed(RouteConfig.home);

    Future.delayed(Duration(milliseconds: 0), () {
      Get.offAllNamed("/home");
    });

ScaffoldPage,里面對應(yīng)的是app的主體結(jié)構(gòu)代碼，由HomePage,NewsPage,MyPage組成.如下圖

image.png

第七步，常規(guī)路由 跳轉(zhuǎn)使用Get.toNamed("xxx");；如從列表頁，跳轉(zhuǎn)到詳情頁
不帶參數(shù)跳轉(zhuǎn)到詳情頁

Get.toNamed(RouteConfig.detail);

帶一個參數(shù)跳轉(zhuǎn)到詳情頁,如下：

Get.toNamed(RouteConfig.detail, arguments: index);

帶一個參數(shù)跳轉(zhuǎn)到詳情頁,并且監(jiān)聽返回的參數(shù)，如下：

 Get.toNamed(RouteConfig.detail,
    arguments: {'index': index})
     ?.then((value) => print("回傳的參數(shù)為$value"));

router_parameter.gif

詳情頁，返回到列表頁，并且傳參數(shù)的寫法，如下：

Get.back(result: 10000);

當(dāng)然getx，也是可以傳自定義參數(shù)，比喻：可以傳Map<String,dynamic> ，可以傳List<int>，可以傳List<Map<String,String>>,也可以傳List<Model>等

從詳情頁跳轉(zhuǎn)到第三個頁面時，我們就可以看到是可以正常把自定義傳下去 ，并且在第三個頁面，是可以正常接收到參數(shù)的，圖在上面的第四步； 代碼如下：

我們先建一個模型類Device,簡單的3個屬性，用作測試

class Device {

  String? deviceId;
  String? deviceVersion;
  int? deviceSerialNumber;

  Device({this.deviceId,this.deviceVersion,this.deviceSerialNumber});
}

在詳情頁，跳轉(zhuǎn)的代碼：

            Device device1 = Device(
                deviceId: "11",
                deviceSerialNumber: 556677,
                deviceVersion: "v1");
            Device device2 = Device(
                deviceId: "22",
                deviceSerialNumber: 778899,
                deviceVersion: "v2");
            Device device3 = Device(
                deviceId: "33",
                deviceSerialNumber: 110022,
                deviceVersion: "v3");
            List<Device> deviceList = [device1, device2, device3];
            Get.toNamed(RouteConfig.third, arguments: deviceList);

在第三個界面的接收代碼：

    List<Device> list = Get.arguments;
    list.forEach((Device item) {
      print("傳過來的參數(shù)list=${item.deviceId}");
      print("傳過來的參數(shù)list=${item.deviceSerialNumber}");
      print("傳過來的參數(shù)list=${item.deviceVersion}");

      print("-------------------");
    });

最終效果如下：

router_parameter_model.gif

結(jié)尾

至此getx的路由管理部分，基本完成，當(dāng)然getx的官方說明里面還有更多api，更多的細(xì)節(jié)，小伙伴們可以去參閱，這里提到的都是最常用的一些api。今天的干貨分享到此，如果小伴們,覺得有點用的話，或者已經(jīng)看到這里面來的請點個贊吧，下一篇我們來討論一下，getx的換主題功能。期待一下吧。好運~