Flutter学习笔记十三——页面跳转与返回

简单的页面跳转与返回

需求：从第一个页面上点击按钮跳转到第二个页面，然后再从第二个页面上点击按钮返回第一个页面。
如图所示：

navigator

示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '导航演示1',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('页面一'),
        backgroundColor: Colors.blueAccent,
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            '跳转到页面二',
            style: TextStyle(color: Colors.white),
          ),
          color: Colors.blueAccent,
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => SecondScreen()));
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('页面二'),
        backgroundColor: Colors.purple,
        centerTitle: true,
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            '返回到页面一',
            style: TextStyle(color: Colors.white),
          ),
          color: Colors.purpleAccent,
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

RaisedButton按钮组件

基本属性：

• child:可以放入容器、图标、文字，构建样式丰富的按钮。
• color:按钮的背景颜色
• onPressed:点击事件的相应，类似于View.OnClickListener()方法。

Navigator.push 和 Navigator.pop

• Navigator.push：跳转到下一个页面，它要接受两个参数，一个是上下文context，另一个是要跳转的函数Route。
• Navigator.pop：返回到上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push。