Flutter 基本路由,命名路由,基本路由传值及命名路由传值的记录
1.基本路由
基本路由用法 首先准备一个基础布局:
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("基本路由的使用"),
),
body: Text("text")),
);
}
}
接下来在 body Text()替换为一个按钮,并重新编写一个跳转的布局
//按钮
RaisedButton(
child: Text("基本路由"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) {
//返回 intentPage为跳转页面
return intentPage();
},
));
},
),
import 'package:flutter/material.dart';
//新添加页面
class intentPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("Intent页"),
),
body: Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("基本路由")
],
)
),
),
);
}
}
点击按钮会发现 跳转到了新页面
2.基本路由传值 (可传递数据)
传递数据 首先将IntentPage.dart添加构造函数 如下 用来保存传过来的数据
String text;
intentPage({this.text = "默认值"});
将按钮中的Navigator修改为
Navigator.of(context).push(MaterialPageRoute(
builder: (context) {
return intentPage(text: "基本路由传值");
},
)
import 'package:flutter/material.dart';
class intentPage extends StatelessWidget {
String text;
intentPage({this.text="默认值"});
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("Intent页"),
),
body: Center(
//使用方式
child: Text(text),
)
),
);
}
}
3.命名路由
首先在主页面的 MaterialApp 中添加语句 指定其一个名字
routes: {
"/intentPage":(context)=>intentPage(),
},
将Button中的 onPressed 修改为
RaisedButton(
child: Text("命名路由"),
onPressed: () {
Navigator.pushNamed(context, "/intentPage");
},
),
点击按钮时会发现 效果如同1里面的基本路由 效果是一样的
4.命名路由传值* (可传递数据)
稍复杂
首先先建立一个新文件名称为 routes.dart (名称可随意)
添加如下代码
final routes = {
//如以下方法报错 检查是否没有导入包
"/":(context)=>BottomNavigatorTest(),
"/intentPage":(context,{arguments})=>intentPage(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中添加代码 如下
//导入刚刚建立的 routes.dart包
import 'package:study_demo/Routes/routes.dart';
initialRoute: “/”, 为声明打开时展示的页面为哪个 我这里是"/":(context)=>BottomNavigatorTest() BottomNavigatorTest可以是自己编写的其他页面
return MaterialApp(
onGenerateRoute: onGenerateRoute, //引用routes.dart中的onGenerateRoute变量
initialRoute: "/",//声明启动页 routes.dart中的命名引用
));
好了现在全都准备好了
跳转到的页面intentPage.dart中写成 介个样子 :如下
然后介绍一下Chip组件 可显示成一个圆角背景组件
import 'package:flutter/material.dart';
class intentPage extends StatelessWidget {
//添加的语句 用来保存传递过来的数据 类型为Map
Map arguments;
intentPage({this.arguments});
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("Intent页"),
),
body: Center(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//如下使用方式来使用 Chip只是为了效果 取出arguments["text"]的数据
Chip(label: Text(arguments!=null?arguments["text"]:"默认值",style: TextStyle(color: Colors.white),),elevation: 4,padding: EdgeInsets.all(10),backgroundColor: Colors.red,),
]
)),
),
);
}
}
接下来修改 按钮事件
arguments: {“text”: “命名路由传值”}); 保存为 key,value值
RaisedButton(
child: Text("命名路由传值"),
onPressed: () {
//如下
Navigator.pushNamed(context, "/intentPage", arguments: {
"text": "命名路由传值",
});
},
),
结束
好的,以下就讲完了 我也会持续更新Flutter教程,发现更好玩的Component
文章结尾,别忘了给我一个大大的赞,本文章为原创文章,转载请标明出处
原创链接:https://blog.csdn.net/qq_42972848/article/details/107890959 【看看】