flutter 路由配置

get用法

进入新页面
Get.to(NextScreen());
back回退操作

使用场景：关闭Dialogs、SnackBars或者退出当前页面

Get.back();

off类似于replace操作

它会替拿当新页面换掉当前页面，并且新页面左上角没有返回按钮，

Get.off(NextScreen());

offAll清空历史路由

该方法会清空我们之前打开过的页面，只留下新的页面

Get.offAll(NextScreen());

接收新返回信息
var data = await Get.to(Payment());

别名路由导航

// toNamed 导航到下一个页面

Get.toNamed("/NextScreen");
// 浏览并删除前一个页面

Get.offNamed("/NextScreen");
// 浏览并删除所有以前的页面

Get.offAllNamed("/NextScreen")

别名路由需要配置

这里的配置下方的动态路由配置类似，如果麻烦可以用下方的动态路由

复制代码

目录 router/index.dart
import 'package:flutter/material.dart';
import 'package:shuiagechen/pages/login/index.dart';
import 'package:shuiagechen/pages/toolbar.dart';
import 'package:shuiagechen/splash.dart';
// 路由
class GlobalRouter{
  /// 路由
  /// 从非toolbar页面（子页面）跳转到toolbar页面（主页）实现：
  /// pushName到对应的路由，因为Toolbar是单例模式，所以只会创建一个
  /// pushName之后，在ToolBar，initState中获取当前的路由，实现切换页面
  static final _routes={
    // 过渡页
    "/":(BuildContext context,{Object? args})=>const SplashPage(),
    /// 主页面
    '/home': (BuildContext context, { Object? args}) => const Toolbar(),
    // 登录页
    '/login':(BuildContext context,{Object? args})=> login(),
  };
  static GlobalRouter? _singleton;
   GlobalRouter._internal();
    factory GlobalRouter() {
    return _singleton??GlobalRouter._internal();
  }
   /// 监听route
  Route? getRoutes(RouteSettings settings) {
    String? routeName = settings.name;
    final Function builder = GlobalRouter._routes[routeName] as Function;
    return MaterialPageRoute(
        settings: settings,
        builder: (BuildContext context) => builder(context, args: settings.arguments)
    );
  }
}

mian.dart中引入
GetMaterialApp(
             key: navigatorKey,
            title: 'APP模板',
            // 不显示debug标签
            debugShowCheckedModeBanner: false,
            initialRoute: '/',
            onGenerateRoute: router.getRoutes,
          )
		  这样就可以在使用的页面使用别名路由跳转页面了
		  Get.offNamed("/login"); //跳转到登录页

路由传参数

arguments传参
问号传参（跟URL地址一样）
动态路由（/:xxx）

发送任何参数都可以接收，不论是什么类型！甚至是类的实例！

Get.toNamed("/NextScreen", arguments: '这是一个字符串参数');

接收参数
print(Get.arguments); // out: 这是一个字符串参数

问号参数

只能接收字符串
Get.offAllNamed("/NextScreen?device=phone&id=111&name=liang");
通过Get.parameters获取值
print(Get.parameters $'id'$ ); // out: 111

动态路由

咱们在配置表中配置动态路由，他是通过Get.parameters接收

复制代码

void main() {
  runApp(
    GetMaterialApp(
      initialRoute: '/',
      getPages: [
      GetPage(
        name: '/',
        page: () => MyHomePage(),
      ),
      GetPage(
        name: '/profile/', // 没值匹配就写 / 在后面
        page: () => MyProfile(),
      ),
      GetPage(
        name: '/profile/:user', // 如果有值 /:xxx 在后面
        page: () => UserProfile(),
      ),
      GetPage(
        name: '/third',
        page: () => Third(),
        transition: Transition.cupertino  
      ),
     ],
    )
  );
}

发送别名路由数据：

Get.toNamed("/profile/34954");

// 在第二个页面上，通过参数获取数据
print(Get.parameters['user']);
// out: 34954

混合发送参数：

复制代码

Get.toNamed("/profile/34954?flag=true");

// 在第二个页面上，通过参数获取数据
print(Get.parameters['user']);
print(Get.parameters['flag']);
// out: 34954 true

中间件

触发路由事件的时候，会回调GetMaterialApp里的一个回调方法routingCallback

GetMaterialApp(
routingCallback: (routing) {
if(routing.current == '/user') {
openAds();
}
}
)
如果没有使用GetMaterialApp，那么可以使用API来附加Middleware观察器。

void main() {
runApp(
MaterialApp(
onGenerateRoute: Router.generateRoute,
initialRoute: "/",
navigatorKey: Get.key,
navigatorObservers: [ // 基于这个来观察路由变化
GetObserver(MiddleWare.observer), // HERE !!!
],
),
);
}

三、免context导航

复制代码

final snackBar = SnackBar(
  content: Text('Hi!'),
  action: SnackBarAction(
    label: 'I am a old and ugly snackbar :(',
    onPressed: (){}
  ),
);
// 在小组件树中找到脚手架并使用它显示一个SnackBars。
Scaffold.of(context).showSnackBar(snackBar);
Get.snackbar('Hi', 'i am a modern snackbar');

// 定制你的需求，随处可使用
Get.snackbar(
  "Hey i'm a Get SnackBar!", // title
  "It's unbelievable! I'm using SnackBar without context, without boilerplate, without Scaffold, it is something truly amazing!", // message
  icon: Icon(Icons.alarm),
  shouldIconPulse: true,
  onTap:(){},
  barBlur: 20,
  isDismissible: true,
  duration: Duration(seconds: 3),
);


// 定制一个 Dialog
Get.dialog(YourDialogWidget());

Get的路由嵌套非常简单，不需要context而是通过id寻找导航栈

复制代码

Navigator(
  key: Get.nestedKey(1), // 创建一个key
  initialRoute: '/',
  onGenerateRoute: (settings) {
    if (settings.name == '/') {
      return GetPageRoute(
        page: () => Scaffold(
          appBar: AppBar(
            title: Text("Main"),
          ),
          body: Center(
            child: TextButton(
              color: Colors.blue,
              onPressed: () {
                Get.toNamed('/second', id:1); // 按照key以及路由来路径来导航，如果没找到会报错
              },
              child: Text("Go to second"),
            ),
          ),
        ),
      );
    } else if (settings.name == '/second') {
      return GetPageRoute(
        page: () => Center(
          child: Scaffold(
            appBar: AppBar(
              title: Text("Main"),
            ),
            body: Center(
              child:  Text("second")
            ),
          ),
        ),
      );
    }
  }
),

GetMaterialApp的常用配置

复制代码

void main() {
  runApp(
    GetMaterialApp(
      // 初始路径
      initialRoute: '/',
      
      // 404页面
      unknownRoute: GetPage(name: '/notfound', page: () => UnknownRoutePage()),

      // 中间件
      routingCallback: (routing) {
        if(routing.current == '/user') {
          openAds();
        }
      },
      
      // 路由配置表
      getPages: [
        GetPage(name: '/', page: () => MyHomePage()),
        GetPage(name: '/second', page: () => Second()),
      ],
    )
  );
}