Flutter GetX系列教程---Navigation

安装

将 GetX 添加到你的 pubspec.yaml 文件中

dependencies:
   get: ^4.6.5

在需要用到的文件中导入，它将被使用。

import 'package:get/get.dart';

Navigation路由跳转

使用GetX 进行路由跳转非常的简单，只需要调用Get.to()即可进行路由跳转，而系统的路由跳转需要写八行代码，这是不能忍受的事情，而且涉及到跳转动画设置 、动画时长定义、动画曲线 等设置那就更加的复杂，而GetX为我们封装了Navigation，无需context可进行跳转，并且能很方便的使用跳转动画等。

Navigation—通过to方法进行路由跳转

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

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

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: "Navigation",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Getx Navigation"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(onPressed: () async {
                // Get.to(
                //   NavGetEx(),
                //   fullscreenDialog: true, // 是否全屏弹窗
                //   transition: Transition.rightToLeft, // 跳转动画
                //   duration: Duration(milliseconds: 2000), // 动画时长
                //   curve: Curves.easeInOut, // 动画效果
                // );
                //传递参数给下一个页面
                // Get.to(() => NavGetEx(),
                //   arguments: "传递参数",
                // );
                var data = await Get.to(()=>NavGetEx(),arguments: "传递参数给子");
                print("接收到的参数："+data);
              }, child: Text("跳转"))
            ],
          ),
        ),
      ),
    );
  }
}
// 第二个页面
class NavGetEx extends StatelessWidget {
  const NavGetEx({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("NavGetEx页面"),
        ),
        body: ListView(
          children: [
            Text("NavGetEx页面！！！！！"),

            ElevatedButton(onPressed: (){
              Get.back(result: "返回的参数");
            }, child: Text("返回参数给上一个页面")),

            // 接收传递过来的参数
            Text(
              Get?.arguments??"",
              style: TextStyle(
                color: Colors.red
              ),
            )
          ],
        ),
      ),
    );
  }
}

属性和说明

字段	属性	描述
page	dynamic	页面
fullscreenDialog	bool	是否全屏弹窗
transition	Transition	跳转动画
duration	Duration	动画时长
curve	Curves	动画效果
arguments		传递到下一个页面的参数

Navigation—通过toNamed进行路由跳转

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}


class My extends StatelessWidget {
  const My({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("my页面"),
        ),
        body: Column(
          children: [
            Text("my页面"),
            Text(Get?.arguments??"",
              style: const TextStyle(
                fontSize: 18.0,
                color: Colors.red
              ),
            )
          ],
        ),
      ),
    );
  }
}



class NavigationForNamedExample extends StatelessWidget {
  const NavigationForNamedExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("NavigationForNamedExample页面"),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: ()=>{
              Get.toNamed("/my",arguments: "传递参数")
            }, child: Text("跳转"))
          ],
        ),
      ),
    );
  }
}