Flutter 中的普通路由、普通路由传值、 命名路由、命名路由传值
2024-10-11 10:30:39
一、Flutter 中的路由
Flutter 中的路由通俗的讲就是页面跳转。在 Flutter 中通过 Navigator 组件管理路由导航。并提供了管理堆栈的方法。如：Navigator.push 和 Navigator.popFlutter 中给我们提供了两种配置路由跳转的方式：1、基本路由 2、命名路由
二、Flutter 中的基本路由使用
比如我们现在想从 HomePage 组件跳转到 SearchPage 组件。
1、需要在 HomPage 中引入 SearchPage.dart
import '../SearchPage.dart';
2、在 HomePage 中通过下面方法跳转
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context){
return SearchPage();
})
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
四、Flutter 中的命名路由
1、配置路由
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs(),
initialRoute: '/',
routes: {
'/':(contxt) => Tabs(),
'/search':(contxt) => SearchPage(),
'/form': (context) => FormPage(),
},
);
}
}
2、路由跳转
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.pushNamed(context, '/search');
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
五、Flutter 中的命名路由跳转传值
官方文档：https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments
1、配置路由：
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final Map<String,Function> routes = {
'/': (contxt) => Tabs(),
'/search': (contxt) => SearchPage(),
'/form': (context, {arguments}) => FormPage(arguments: arguments),
}; @override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
onGenerateRoute: (RouteSettings settings) { // 统一处理
final String? name = settings.name;
final Function? pageContentBuilder = this.routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(
context,
arguments: settings.arguments)
);
return route; } else {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context));
return route;
}
}
});
}
}
2、跳转传值
RaisedButton(
child: Text("跳转到表单演示页面"),
onPressed: (){
Navigator.pushNamed(context, '/form',arguments: {
"id":20
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
3、接收参数
import 'package:flutter/material.dart';
class FormPage extends StatelessWidget {
final Map arguments; FormPage({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("搜索"),
),
body:Text("我是一个表单页面 ${arguments != null ? arguments['id'] : '0'}")
);
}
}
六、Flutter 中的命名路单独抽离到一个文件
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Form.dart';
import '../pages/Search.dart';
import '../pages/Product.dart';
import '../pages/ProductInfo.dart'; //配置路由,定义 Map 类型的 routes,Key 为 String 类型，Value 为 Function 类型
final Map<String,Function> routes={
'/':(context)=>Tabs(),
'/form':(context)=>FormPage(),
'/product':(context)=>ProductPage(),
'/productinfo':(context,{arguments})=>ProductInfoPage(arguments:arguments),
'/search':(context,{arguments})=>SearchPage(arguments:arguments),
};
//固定写法
var onGenerateRoute=(RouteSettings settings) {
//String? 表示 name 为可空类型
final String? name = settings.name;
//Function? 表示 pageContentBuilder 为可空类型
final Function? pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute( builder: (context) => pageContentBuilder(context));
return route;
}
}
};
import 'package:flutter/material.dart';
import 'routes/Routes.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs(),
initialRoute: '/',
onGenerateRoute: onGenerateRoute
);
}
}
最新文章
- ts 协议解析
- CodeForces 519B A and B and Compilation Errors
- ubuntu 图形界面查看隐藏文件
- Python中将打印输出导向日志文件
- 3D-HEVC/HTM测试序列下载地址（官方完整版）
- 在CI中实现持续Web安全扫描
- 洛谷 P1378 油滴扩展 改错
- 【python基础】os.path模块常用方法详解
- mysql日志查看
- 【转载】centos 安装及配置 mysql5.5.3 - rpm安装server和client
- mongo批量更新、导入导出脚本
- DOS批处理基础
- 20172308 实验一《Java开发环境的熟悉》实验报告
- Java并发知识点总结
- JAVA 读取计算机中相关信息
- Java容器深入浅出之数组
- quartz 调度启动失败，with (updlock,rowlock)
- BZOJ1297：[SCOI2009]迷路——题解
- Java-API：java.util.list
- [51nod1270] 数组的最大代价(简单dp)