最新消息:关注【已取消】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

Flutter Navigator跳转到下一个页面并返回(页面之间跳转)

Flutter 太平洋学习网 浏览 评论

Flutter跳转到下一页面并返回这是移动应用必须掌握的技能,我们可以使用Flutter Navigator来实现两个页面之间的跳转,下面先来看实现步骤。

学习路线

创建两个Flutter页面,FirstScreen与SecondScreen

使用 Navigator.push()方法导航到下一界面

使用 Navigator.pop()方法返回到上一个界面

点击“Launch screen”按钮跳转到下一界面,点击“Go back!”按钮返回上一页,代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch screen'),
          onPressed: () {
            Navigator.push( //跳转到第二个界面
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);//从第二个界面返回
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Flutter跳转到下一个界面的效果如下:

navigation-basics.gif

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/flutter/803.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论