Flutter中的路由通俗的讲就是页面跳转,在Flutter中通过Navigator组件管理路由导航,并提供了管理堆栈的方法.
- Navigator.push() 页面跳转
- Navigator.pop() 返回上一页
Flutter中给我们提供了两种配置路由跳转的方式
1.基本路由
2.命名路由
基本路由的使用
1.需要在主页面中引入需要跳转的页面
import './NewsPage.dart';
2.在点击事件中写跳转
Navigator组件为我们提供了push()方法作为页面跳转使用.
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return NewsPage();
}
)
);
在这里还是踩了一个小坑的,通过编写主页面,然后引入NewsPage.dart页面后,发现点击跳转并不能实现跳转功能,并且控制台出现了报错
image.png
最后发现在主页面中,把主函数的Scaffold提取出来,就可以实现跳转了.错误原因是因为使用的context不包含Navigator实例作为父widget。也就是在所有的当前用到过的widget中，都没有以Navigator作为父widget的widge。
首先，MaterialApp作为根widget，判断是会能响应跳转页面事件的，其次查看官方文档，看到其中是有navigation相关的，判断MaterialApp是包含Navigator子widget的，能响应跳转事件,那说明在找widget的时候没有在MaterialApp中去找。
因此,我们把主页面的结构拆分开后的写法:
import 'package:flutter/material.dart';
import './NewsPage.dart';
void main() => runApp(MyIndex());
class MyIndex extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'beline App',
home: homePage()
);
}
}
class homePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text('beline App')),
body: Container(
child: ListView(
children: <Widget>[
RaisedButton(
child: Text('去新闻页'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return NewsPage();
}
)
);
},
),
],
),
)
);
}
}
NewsPage.dart
import 'package:flutter/material.dart';
class NewsPage extends StatelessWidget{
const NewsPage({Key key}): super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('newspages')
),
body: Center(
child: Text('这里是新闻页内容区域'),
),
);
}
这样就可以正确跳转页面,实现基本路由功能了
路由跳转转传参
这里我们按照自己的思路来定义一个String类型的变量,给于一个初始值,不设置要求强制传参.(注意这是一个坑)
import 'package:flutter/material.dart';
class NewsPage extends StatelessWidget{
String beline='新闻页';
NewsPage({this.beline});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('newspages')
),
body: Center(
child: Text(this.beline),
),
);
}
}
我原本以为在调用时不传递任何参数的情况下,页面中间显示的内容为"新闻页".然而:GG了
image.png
报错内容:
════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building NewsPage(dirty):
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 269 pos 10: 'data != null'
需要修改成这样就可以了:
import 'package:flutter/material.dart';
class NewsPage extends StatelessWidget{
String beline;
NewsPage({this.beline='新闻页'});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('newspages')
),
body: Center(
child: Text(this.beline),
),
);
}
}
我们这个时候把主页面需要传递的参数也加上,那么就实现了页面传参:
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return NewsPage(beline: '这里是传入的页面名字');
}
)
);
},
