本文介绍: 基本简单参数传递,比如一个 userId,页面路由定义如下:ThreePage就是我定义的目标页面,它需要一个参数 userId。“/” 配置的就是加载的默认的启动的首页面,然后我这里面相当于是配置了两个基本的页面。点击一个按钮跳转目标页面,我这里传的参数 userId的值为 123。如下图所示,我当前使用的flutter版本为3.16.0。使用 Navigator 正常操作如下“复杂传参数 请看后续。
1 项目中添加最新的依赖
go_router: ^13.1.0
如下图所示,我当前使用的flutter版本为3.16.0
然后修改应用的入口函数如下:
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp.router(
routerConfig: _router,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
);
// return MaterialApp(
// title: 'Flutter Demo',
// theme: ThemeData(
// colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
// useMaterial3: true,
// ),
// home: MyHomePage(),
// );
}
}
其实就是将原来的入口 MaterialApp 使用 MaterialApp.router 替换了,参数 routerConfig 就是配置的所有的路由页面,比如我这里的配置如下:
final GoRouter _router = GoRouter(
routes: <RouteBase>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) {
return MyHomePage();
},
routes: <RouteBase>[
GoRoute(
path: 'two',
builder: (BuildContext context, GoRouterState state) {
return TwoPage();
},
),
],
),
],
);
“/” 配置的就是加载的默认的启动的首页面,然后我这里面相当于是配置了两个基本的页面。
2 实现基本的页面交互
在页面MyHomePage放一个按钮,点击按钮打开 TwoPage 第二个页面,打开页面的核心代码如下:
使用 Navigator 正常操作如下“
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return TwoPage();
}));
使用 go_router 操作如下:
context.go("/two");
然后在页面 TwoPage 中点击按钮返回上一个页面:
使用 Navigator 正常操作如下:
Navigator.of(context).pop();
用 go_router 操作如下:
context.pop();
3 页面跳转传参数
基本简单参数传递,比如一个 userId,页面路由定义如下:ThreePage就是我定义的目标页面,它需要一个参数 userId。
GoRoute(
path: 'three/:userId',
builder: (BuildContext context, GoRouterState state) {
// 使用 state.params 获取路由参数的值
final userId = (state.pathParameters['userId']!);
return ThreePage(userId:userId);
},
),
点击一个按钮跳转目标页面,我这里传的参数 userId的值为 123
context.go("/three/123");
复杂传参数 请看后续
原文地址:https://blog.csdn.net/zl18603543572/article/details/135923392
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_66309.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。