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);
          }),),);
  }
}

代码请参阅： https://github.com/RustFisher/flutter_basic