Flutter配置路由组件抽离及页面传参
时间:2022-07-24
本文章向大家介绍Flutter配置路由组件抽离及页面传参,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在lib目录下新建个routes文件夹,里面新建个Routes.dart文件来统一管理我们的路由跳转及传参, 在这里我们就以Home.dart文件跳转到Search.dart文件并传参为例
Routes.dart
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Search.dart'; //需要引入跳转页面地址
// 配置路由
final routes = {
// 前面是自己的命名 后面是加载的方法
'/': (context) => Tabs(), //不用传参的写法
'/search': (context, {arguments}) =>
SearchPage(arguments: arguments), //需要传参的写法
};
// 固定写法,统一处理,无需更改
var onGenerateRoute = (RouteSettings settings) {
final String name = settings.name;
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;
}
}
};
还需要在main.dart入口文件进行配置
import 'package:flutter/material.dart'; //快捷方式:fim
import 'routes/Routes.dart'; //引入配置的路由文件
void main() {
runApp(MyApp());
}
//自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
initialRoute: '/', //初始化加载的路由
onGenerateRoute: onGenerateRoute
);
}
}
Home.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: () {
Navigator.pushNamed(context, '/search',
//在arguments里面带上我们需要传参值
arguments: {"id": 123, "name": "zz"});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary),
],
);
}
}
Search.dart
import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
// 接收上个页面的参数
Map arguments;
SearchPage({Key key, this.arguments}) : super(key: key);
@override
//参数传递给下面的类
_SearchPageState createState() => _SearchPageState(arguments: this.arguments);
}
class _SearchPageState extends State<SearchPage> {
Map arguments;
_SearchPageState({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Text('返回'),
onPressed: () {
Navigator.of(context).pop();
},
),
appBar: AppBar(
title: Text("搜索"),
),
//页面上就显示我们获取上个页面的参数
body: Text("${arguments['id']}${arguments['name']}"));
}
}
- React第三方组件5(状态管理之Redux的使用③TodoList中)
- R语言在收入不平等指标测度上的应用~
- React第三方组件5(状态管理之Redux的使用②TodoList上)
- sscanf
- sprintf的用法
- 01背包精讲
- uva Andy's First Dictionary
- UVA Hangman Judge
- shiny动态仪表盘应用——中国世界自然文化遗产可视化案例
- Decode the tape
- poj To the Max
- Python爬虫系列(七)豆瓣图书排行榜(数据存入到数据库)
- ZOJ 3631 Watashi's BG(01dp)
- How Many Tables (并查集)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Swift高阶函数map,filter,reduce
- 一文解决大批量基因相关性分析
- Swift String 与 NSString
- 30.opengl高级光照-HDR
- Angular bootstrap的一个例子
- MicrobiomeAnalyst | 零代码分析宏基因组数据
- Java8实战——通过行为参数化传递代码 顶
- Angular component的一个例子
- 初识mybatis中的缓存
- 【卷积神经网络结构专题】ResNet及其变体的结构梳理、有效性分析
- Steganographer:能帮助在图片中隐藏数据的Python隐写工具
- 内网横向移动:Kerberos认证与(哈希)票据传递攻击
- 诺禾致源linux下数据下载
- 技巧 | OpenCV中如何绘制与填充多边形
- Swift guard