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。

推荐阅读更多精彩内容