Flutter 系列之GetX的学习(2) --> 路由导航
Flutter 系列之GetX的学习(2) --> 路由导航
1. 前言
在上篇文章我们介绍一下getx的概念, 以及如何使用Getx创建我们的Controller控制器,,并且在UI部分进行控制器的实例化,使用GetBuilder进行状态的展示和更新.
那么在本小节我们将介绍Getx的另外一个功能 -->路由导航
2. 基本导航操作
我们新建一个页面, 并使用stl快速搭建出来article下的index.dart的页面模板
在index.dart文件开始输入
s t l, 就可以快速填充模板, 类似html文件的!一样
import 'package:flutter/material.dart';
class Article extends StatelessWidget {
const Article({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('文章'),
leading: IconButton(onPressed: () {}, icon: const Icon(Icons.arrow_back_ios)),
),
body: const Center(
child: Text('文章页面'),
),
);
}
}紧接着我们需要在counter_screen 里面进行第二个按钮的事件绑定. 核心:Get.to(Article())
GestureDetector(onTap: () {Get.to(Article());}, child: _buildContainer("跳转文章页面")),此时我们允许,并且点击, 不出意外的话还是出意外了
通过阅读报错,我们发现如果想使用这种路由,必须改变我们MaterialApp为GetMaterialApp.然后就可以了进行跳转了
为了方便返回,我们在二级页面添加返回路由的处理
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
class Article extends StatelessWidget {
const Article({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('文章'),
leading: IconButton(
onPressed: () { Get.back();},
icon: const Icon(Icons.arrow_back_ios)),
),
body: const Center(
child: Text('文章页面'),
),
);
}
}这样通过简单的几步我们就实现了 前进和回退
3. 命名路由
Get.toNamed("/page2");不过需要提前定义好路由关系表映射关系.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
initialRoute: "/",
getPages: [
GetPage(name: "/", page: () => const Page1()),
GetPage(name: "/page1", page: ()=> const Page1()),
GetPage(name: "/page2", page: ()=> const Page2()),
GetPage(name: "/page3", page: ()=> const Page3()),
GetPage(name: "/page4", page: ()=> const Page4()),
];,
title: 'Animated Notch Bottom Bar',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}4. 未定义路由重定向
要处理到未定义路线的导航（404错误），可以在GetMaterialApp中定义unknownRoute页面。
@override
Widget build(BuildContext context) {
return GetMaterialApp(
initialRoute: "/",
// 路由映射表匹配不到就会走这个
unknownRoute: GetPage(name: "/notfound", page: ()=> NotFound()),
getPages: [
GetPage(name: "/", page: () => const Page1()),
GetPage(name: "/page1", page: ()=> const Page1()),
GetPage(name: "/page2", page: ()=> const Page2()),
GetPage(name: "/page3", page: ()=> const Page3()),
GetPage(name: "/page4", page: ()=> const Page4()),
];,
title: 'Animated Notch Bottom Bar',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}5. 动态路由
定于一个动态路由 在路由映射表里面
GetPage(name: '/profile/:userId', page: () => ProfilePage()),路由跳转
// 跳转到 profile 页面，并传递 userId 参数
Get.toNamed('/profile/123');获取路由参数
// 获取动态路由参数
var userId = Get.parameters['userId'];6. 路由传参
支持通过 arguments 传递复杂的对象或数据。在跳转时，可以传递参数: 不限于字符串，一个Map，一个List，甚至一个类的实例
Get.to(SecondPage(), arguments: {'id': 123});在目标页面可以通过 Get.arguments 获取这些参数：
var id = Get.arguments['id'];也可以通过动态网页链接进行传递,就像web开发一样.
Get.offAllNamed("/NextScreen?device=phone&id=354&name=Enzo");NextScreen页面 接收
print(Get.parameters['id']);
// out: 354
print(Get.parameters['name']);
// out: Enzo7. 路由过渡动画
GetX 提供了丰富的页面过渡效果，允许你为每个页面设置不同的过渡动画。例如，可以指定页面从下方滑入：
Get.to(SecondPage(), transition: Transition.downToUp);常用的过渡类型包括：
Transition.fade: 淡入淡出Transition.zoom: 缩放效果Transition.cupertino: 类似 iOS 的过渡效果
你还可以自定义页面过渡动画，满足不同的 UI 需求。
8. 路由中间件
GetX 的路由支持中间件功能，允许在路由跳转之前进行拦截、验证或其他操作。常用于权限控制、重定向等场景。例如，可以创建一个简单的身份验证中间件：
class AuthMiddleware extends GetMiddleware {
@override
RouteSettings? redirect(String? route) {
if (!isLoggedIn) {
return RouteSettings(name: '/login');
}
return null;
}
}然后在路由定义中使用中间件：
GetPage(
name: '/profile',
page: () => ProfilePage(),
middlewares: [AuthMiddleware()],
);腾讯云开发者
