很简单的一个路由跳转Demo, 每天多一点
Navigator.push 和 Navigator.pop
Navigator.push:是跳转到下一个页面,它要接受两个参数一个是上下文context,另一个是要跳转的函数。
Navigator.pop:是返回到上一个页面,使用时传递一个context(上下文)参数,使用时要注意的是,你必须是有上级页面的,也就是说上级页面使用了Navigator.push。
代码如下:
import 'package:flutter/material.dart';
import 'SecoundPage.dart';
class MemberPage extends StatelessWidget {
const MemberPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
var stack = new Stack(
alignment: const FractionalOffset(0.5, 0.1),
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2277425626,2685399&fm=26&gp=0.jpg'),
radius: 100.0,
),
Container(
child: Text('Jonson'),
color: Colors.redAccent,
),
Positioned(
top: 10.0,
left: 10.0,
child: Text(
'JonsonLeft',
style: TextStyle(color: Colors.orangeAccent),
),
),
Positioned(
bottom: 10.0,
right: 10.0,
child:
Text('JonsonRight', style: TextStyle(color: Colors.orangeAccent)),
),
RaisedButton(
child: Text('跳转'),
onPressed: (){
Navigator.push(context, MaterialPageRoute( //设置需要跳转的页面
builder: (context) => SecoundPage() //页面绑定 记得导入这个类
));
},
)
],
);
return MaterialApp(
title: 'row',
home: Scaffold(
appBar: AppBar(
title: Text('ROW'),
),
body: Center(
child: stack,
)),
);
}
}
第二页返回的代码:
import 'package:flutter/material.dart';
class SecoundPage extends StatefulWidget {
SecoundPage({Key key}) : super(key: key);
_SecoundPageState createState() => _SecoundPageState();
}
class _SecoundPageState extends State<SecoundPage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '第二页',
home: Scaffold(
appBar: AppBar(title: Text('第二页'),),
body: Center(
child: RaisedButton(
child: Text('返回'),
onPressed: (){
Navigator.pop(context); //直接pos 上下文就可以
},
)),
),
);
}
}