P17. Flutter 导航父子页面的跳转和返回

导航的使用在任何程序里都至关重要,这也是一个程序的灵魂。本文我们就开始学习导航的知识。

在学习之前介绍几个要用到的属性。

RaisedButton按钮组件

它有两个最基本的属性:

  • child:可以放入容器,图标,文字。让你构建多彩的按钮。
  • onPressed:点击事件的相应,一般会调用Navigator组件。

我们在作页面导航时,大量的使用了RaisedButton组件,这个组件的使用在实际工作中用的也比较多。

Navigator.push 和 Navigator.pop

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

实例

我们现在就来作一个简单的案例,我们打开一个页面,页面上只有一个简单的按钮,按钮写着“查看详情页面”,然后点击后进入下一个页面,页面有一个按钮,可以直接返回。

代码如下,一定要动手敲一敲哦。

import 'package:flutter/material.dart';

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

class FirstScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: AppBar(title:Text('这是导航页面')),
      body:Center(
        child:RaisedButton(
          child:Text('查看详情页面'),
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(
              builder:(context) => SecondScreen())
            );
          },
        )
      )
    );
  }
}

class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar:AppBar(title:Text('码云笔记技术笔记详情页')),
      body:Center(child:RaisedButton(
        child:RaisedButton(
          child:Text('返回'),
          onPressed: (){
            Navigator.pop(context);
          },
        )
      ))
    );

  }
}

效果如下:

Flutter 导航父子页面之间的跳转返回

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P17. Flutter 导航父子页面的跳转和返回

发表评论

提供最优质的资源集合

立即查看 了解详情