第七节 Flutter 一般页面导航和返回(Navgation)

很简单的一个路由跳转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 上下文就可以
          },
        )),
      ),
    );
  }
}