flutter getx系列之路由管理

作者: 微风_10a5 | 来源:发表于2021-11-24 06:49 被阅读0次

flutter getx系列之路由管理
文科生也编程 - GetX的简单使用
Flutter GetX真香
GETX
GetX 路由管理
Flutter GetX状态管理之路由管理（一）
基于GetX 搭建通用flutter 项目《五》(基于GetX
GetX Obx实现原理探索
Day13 - Flutter - 路由导航
Flutter框架 - GetX

getx是一款强大的第三方库，使用了它，相当于同时使用了4~5个库，主要功能有：
1.路由管理
2.状态管理
3.依赖管理
4.实用工具
　　1>国际化
　　2>改变主题
　　3>其他高级API（snackbar,bottomSheet,dialog等）

image.png

而且它已经有了中文的说明，对我们简直不要太友好了！readme中对getx进行了全面介绍，相信小伙伴们对它不会失望
[中文版本readme]https://github.com/jonataslaw/getx/blob/master/README.zh-cn.md
回到正题，我们还实践一下，getx里面的路由管理

配置路由

第一步，在pubspec.yaml文件中，导入getx库，如下图

image.png

get: ^4.3.8

右上角，点击一下Pub get,这样库的依赖包就下载到本地工程了，

第二步，引入头文件，

import 'package:get/get.dart';

第三步，在入口函数main里面进行配置，如下图

image.png 第四步，创建一些page界面，方便后面的测试，最终运行起来的效果图如下：

route.gif

第五步，具体实现，页面结构如下

image.png

说明一下跳转流程：启动界面就是跳转到根路由RouteConfig.main，也就是对应的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,
      ),
    );
  }
}

关键代码如下：也就是说，它会立马跳转到ScaffoldPage,这里是使用了命名路由 Get.offAllNamed("/home");,当然也可以使用之前定义好的常量来跳转Get.offAllNamed(RouteConfig.home);

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

ScaffoldPage,里面对应的是app的主体结构代码，由HomePage,NewsPage,MyPage组成.如下图

image.png

第七步，常规路由跳转使用Get.toNamed("xxx");；如从列表页，跳转到详情页
不带参数跳转到详情页

Get.toNamed(RouteConfig.detail);

带一个参数跳转到详情页,如下：

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

带一个参数跳转到详情页,并且监听返回的参数，如下：

 Get.toNamed(RouteConfig.detail,
    arguments: {'index': index})
     ?.then((value) => print("回传的参数为$value"));

router_parameter.gif

详情页，返回到列表页，并且传参数的写法，如下：

Get.back(result: 10000);

当然getx，也是可以传自定义参数，比喻：可以传Map<String,dynamic> ，可以传List<int>，可以传List<Map<String,String>>,也可以传List<Model>等

从详情页跳转到第三个页面时，我们就可以看到是可以正常把自定义传下去，并且在第三个页面，是可以正常接收到参数的，图在上面的第四步；代码如下：

我们先建一个模型类Device,简单的3个属性，用作测试

class Device {

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

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

在详情页，跳转的代码：

            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("传过来的参数list=${item.deviceId}");
      print("传过来的参数list=${item.deviceSerialNumber}");
      print("传过来的参数list=${item.deviceVersion}");

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

最终效果如下：