Flutter - 页面间跳转操作
切换到一个新的界面并且能跳回来
大多数App都包含多个界面。比如数据列表页和详细页。
Android中的页面可以是Activity；iOS中使用ViewController。在Flutter中，页面也是widget。
使用Navigator来切换页面。
步骤：
- 1.创建2个页面
- 2.用
Navigator.push跳去第二个页面 - 3.用
Navigator.pop回到第一个页面
push和pop很容易让人联想到栈。Android中有ActivityStack，用来存放Activity。当前的Activity就在栈顶。
1.创建2个页面
创建2个简单的界面，界面中只有一个按钮。
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text('First page'),),
body: Center(child: RaisedButton(
child: Text('Go to 2nd page'),
onPressed: () {
print('This is first page');
// 执行想要的操作..........
}),),);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('${this} hashCode=${this.hashCode}');
return Scaffold(appBar: AppBar(title: Text('Second page'),),
body: Center(child: RaisedButton(
child: Text("Go back"),
onPressed: () {
print('This is 2nd page');
// 执行操作........
}),),);
}
}2.用Navigator.push跳转去第二个界面
push方法会向栈中添加一个由Navigator管理的Route。
push方法接受一个Route（暂称为路由），这里新建一个Route，使用用MaterialPageRoute。
在第一个页面中按钮添加回调的操作
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondScreen()));
}3.用Navigator.pop回到第一个界面
Navigator.pop会移除navigator管理的当前的路由（效果是移除当前界面）。
// 第二个页面中
onPressed: () {
Navigator.pop(context);
}
完整代码
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'navigate demo',
home: new FirstScreen(),));
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text('First page'),),
body: Center(child: RaisedButton(
child: Text('Go to 2nd page'),
onPressed: () {
print('This is first page');
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondScreen()));
}),),);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('${this} hashCode=${this.hashCode}');
return Scaffold(appBar: AppBar(title: Text('Second page'),),
body: Center(child: RaisedButton(
child: Text("Go back"),
onPressed: () {
print('This is 2nd page');
Navigator.pop(context);
}),),);
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-09-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录