Flutter学习第4章 页面的来回切换

1、代码

import 'package:flutter/material.dart';

void main(){
    runApp(MaterialApp(
      title:'导航学习1',
      home: new FirstScreen()
    ));
}

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(title: Text('导航页面1'),),
      body: Center(
        child: RaisedButton(
          child:Text('查看商品详情页'),
          onPressed: (){
            //监听按钮按下
            Navigator.push(context, MaterialPageRoute(
              builder: (context)=> new SecondPage()
            ));
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget{
    @override
    Widget build(BuildContext context){
      return Scaffold(
        appBar: AppBar(title:Text('商品详情页')),
        body: Center(
          child: RaisedButton(
            child: Text('返回主页'),
            onPressed: (){
               Navigator.pop(context);
            },
          ),
        ),
      );
    }
}

2、RaisedButton按钮组件

• child：可以放入容器，图标，文字。

• onPressed：监听按钮点击事件，一般会调用Navigator组件。

3、Navigator.push 和 Navigator.pop

• Navigator.push：是跳转到下一个页面，它要接受两个参数一个是上下文context，另一个是要跳转的函数。

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

4、效果