Flutter Navigator跳转到下一个页面并返回（页面之间跳转）

男娘i 2021-09-15 06:36 478阅读 0赞

创建两个Flutter页面，FirstScreen与SecondScreen

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

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

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!'),
            ),
          ),
        );
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，478人围观）

还没有评论，来说两句吧...

相关阅读

相关【Android】Navigation实现页面跳转

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゞ浴缸里的玫瑰/ 2023年07月08日 05:58/ 0 赞/ 23 阅读

相关 flutter入坑，navigator页面跳转并传递参数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x3MDAx

灰太狼/ 2023年03月13日 06:48/ 0 赞/ 15 阅读

相关 flutter入坑，使用Navigator跳转页面

import 'package:flutter/material.dart'; void main() { runApp(MyApp())

谁践踏了优雅/ 2023年03月13日 06:18/ 0 赞/ 65 阅读

相关 flutter 跳转页面传参与返回参数

普通页面跳转 import './Detail.dart'; //1. 跳转到Detail页面组件 Navigator.of(context).pus

傷城~/ 2023年02月18日 09:33/ 0 赞/ 4 阅读

相关 Flutter 使用Navigator进行局部跳转页面

![20200527065154216.png][] > 老孟导读：Navigator组件使用的频率不是很高，但在一些场景下非常适用，比如局部表单多页填写、底部导航一直存在，

待我称王封你为后i/ 2023年02月13日 03:35/ 0 赞/ 11 阅读

相关 php表单跳转页面跳转页面跳转页面跳转,html中一个form下两个跳转页面

问题说明：在html开发中，经常碰到同一个form表单下，不同按钮跳转不同界面，如下 ![3b2afef13409193c29d0759b8abcfff3.png][]，

太过爱你忘了你带给我的痛/ 2022年11月17日 10:16/ 0 赞/ 314 阅读

相关 react-navigation 页面跳转

http://www.devio.org/2018/05/15/navigator-to-react-navigation/ 贾鹏辉博客下载

深碍√TFBOYSˉ_/ 2022年05月23日 03:16/ 0 赞/ 241 阅读

相关小程序页面跳转、带参数跳转以及navigator跳转

一、单纯的页面跳转跳转到的页面分 tabBar 页面和非tabBar 页面。url路径可以写相对和绝对路径。 1、跳转到非导航页面，用 wx.navigateTo

朱雀/ 2022年05月11日 06:38/ 0 赞/ 533 阅读

相关 Flutter Navigator跳转到下一个页面并返回（页面之间跳转）

创建两个Flutter页面，FirstScreen与SecondScreen 使用 Navigator.push()方法导航到下一界面使用 Navigator.p

男娘i/ 2021年09月15日 06:36/ 0 赞/ 479 阅读

相关页面跳转navigator

页面链接。属性说明 <table> <thead> <tr> <th>属性名</th> <th>类型</th> <th>默认值</th>

雨点打透心脏的1/2处/ 2021年07月25日 00:09/ 0 赞/ 565 阅读