Flutter使用push pop方法及路由进行导航详解

目录
  • 正文
    • 准备工作
    • 第一种导航方式
    • 第二种导航方式

正文

Web/Mobile 应用程序中,导航是一个很重要的特性,因为它允许你从一个页面跳转到另一个页面。

flutter 应用程序中,我们可以使用 push(), pop() 方法实现导航,或者编写我们自己的路由。

准备工作

我们假设 FirstScreenSecondScreen 是两个不同的类,分别在各自的 FirstScreen.dartSecondScreen.dart 文件内。

FirstScreen.dart 文件如下:

import 'package:flutter/material.dart';
import 'package:navigation/SecondScreen.dart';
class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
      title: Text("First Screen"),
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          "Hello to First Screen",
          style: TextStyle(
            fontSize: 20,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Center(
          child: RaisedButton(
            onPressed: () {},
            child: Text(
              "First Screen",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold
              ),
            ),
          ),
        ),
      ],
    ),
   );
  }
}

SecondScreen.dart 文件如下:

import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Second Screen"),
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          "Welcome on Second Screen",
          style: TextStyle(
            fontSize: 20,
          ),
        ),
        SizedBox(
          height: 10,
        ),
        Center(
          child: RaisedButton(
            onPressed: () {},
            child: Text(
              "Second Screen",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold
              ),
            ),
          ),
        ),
      ],
    ),
  );
 }
}

main.dart 的内容如下:

import 'package:flutter/material.dart';
import 'package:navigation/FirstScreen.dart';
void main() {
  runApp(MaterialApp(
      home: FirstScreen()));
}

第一种导航方式

我们可以使用 Navigator.push() 方法和 Navigator.pop() 方法进行页面/屏幕导航。

为了触发 RaisedButton 事件后从 FirstScreen 导航到 SecondScreen。我们需要在 FirstScreenbuild() 方法里面的 RaisedButtononPressed(){} 添加如下的事件:

onPressed: () {
  Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
},

Navigator.push() 方法将给定的路由推送到路由栈中,这个路由是由 Navigator 类来维护。

现在,我们可以使用 MaterialPageRoute路由 或者我们可以创建自己的路由。

将一个新的路由添加到栈中,我们可以通过一个 builder 函数创建一个 MaterialPageRoute 的实例。builder 函数可以创建我们想在页面中展示的挂件。

(context) => SecondScreen() 指向 SecondSreen 上下文。

为了通过 RaisedButton 点击事件,从 SecondScreen 返回到 FirstScreen 页面:我们需要在 SecondScreen 页面中添加如下的内容:

onPressed: () {
  Navigator.pop(context);
}

这里的 pop() 方法是将导航栈中最新的路由弹出。

第二种导航方式

通过 MaterialApp 构造函数额外提供的属性:initialRouteroutes

import 'package:flutter/material.dart'
import 'package:navigation/FirstScreen.dart'
import 'package:navigation/SecondScreen.dart'
void main() {
  runApp(MaterialApp(
    initialRoute: '/firstScreen',
    routes: {
      '/firstScreen': (context) => FirstScreen(),
      '/secondScreen': (context) => SecondScreen(),
    },
    home: FirstScreen(),
  ));
}

initialRoute 属性定义应用应该从哪个路由开始。routes 属性定义有哪些路由是可以获取的,且路由导航到哪些挂件。

这里,当路由导航到 /firstScreen 时,FirstScreen 挂件将构建。

现在,我们将 FirstScreenonPressed(){} 的方法更改如下:

onPressed: () {
  Navigator.pushNamed(context, '/secondScreen');
}

这里使用命名路由 Navigator.pushNamed() 导航到第一个页面。

SecondScreenonPressed(){} 事件中,还是保留使用 Navigator.pop() 方法:

onPressed: () {
 Navigator.pop(context);
}

以上就是Flutter使用push pop方法及路由进行导航详解的详细内容,更多关于Flutter push pop方法路由导航的资料请关注我们其它相关文章!

时间: 2022-09-27

Flutter入门学习Dart语言变量及基本使用概念

目录 正文 变量 变量的声明赋值 变量的划分 默认值 变量的类型推断修饰符 Late变量 类型判断is和类型转换as 一些重要概念 空安全和可空类型? 表达式和语句 注释 DartPad 正文 Dart是Google发布的开源编程语言,是一种面向对象的语言.其主要应用是Flutter框架开发(Android.IOS),此外,也可以用在服务器.脚本.Web开发中.随着Flutter3.0开始支持全平台开发,Dart也可以实现桌面应用. 关于Dart的介绍不再细说.下面开始Dart的使用介绍 首先记

Flutter GetPageRoute实现嵌套导航学习

目录 1. 嵌套导航-GetPageRoute 2. 自定义拓展 3. 使用bottomNavigationBar 4.小结 1. 嵌套导航-GetPageRoute 本文主要介绍在Getx下快速实现一个嵌套导航 嵌套导航顾名思义,我们导航页面中嵌套一个独立的路由,效果如下 点击跳转 代码如下,也是比较简单 return Scaffold( appBar: AppBar(title: const Text('嵌套导航'),), body: Navigator( key: Get.nestedKe

ios开发Flutter构建todo list应用

目录 正文 基础 Flutter 应用脚手架 创建 TodoItem 展示 Dialog 去添加列表项 列表项添加状态 正文 今天,我们将使用 Flutter 构建一个动态的 todo list 的应用. 开发完成的效果如下: 我们直接进入正题. 基础 Flutter 应用脚手架 # create new project flutter create flutter_todo_app # navigate to project cd flutter_todo_app # run flutter

Flutter EventBus事件总线的应用详解

目录 前言 EventBus的简介 EventBus的实际应用 总结 前言 flutter项目中,有许多可以实现跨组件通讯的方案,其中包括InheritedWidget,Notification,EventBus等.本文主要探讨的是EventBus事件总线实现跨组件通讯的方法. EventBus的简介 EventBus的核心是基于Streams.它允许侦听器订阅事件并允许发布者触发事件,使得不同组件的数据不需要一层层传递,可以直接通过EventBus实现跨组件通讯. EventBus最主要是通过

Flutter使用Overlay与ColorFiltered新手引导实现示例

目录 思路 Flutter BlendMode ColorFiltered 实现 获取镂空位置 ColorFiltered child 完整代码 最终效果 小结 思路 开发过程中常见这样的需求,页面中有几个按钮,用户首次进入时需要对这几个按钮高亮展示并加上文字提示.常见的一种方案是找UI切图,那如何完全使用代码来实现呢? 就以Flutter原始Demo页面为例,如果我们需要对中间展示区域以及右下角按钮进行一个引导提示. 我们需要做到的效果是除了红色框内的Widget,其余部分要盖上一层半透明黑色

Flutter 异步编程之单线程下异步模型图文示例详解

目录 一. 本专栏图示概念规范 1. 任务概念规范 2. 任务的状态 3. 时刻与时间线 4.同步与异步 二.理解单线程中的异步任务 1. 任务的分配 2.异步任务特点 3. 异步任务完成与回调 三. Dart 语言中的异步 1.编程语言中与异步模型的对应关系 2.Dart 编程中的异步任务 3.当前任务分析 四.异步模型的延伸 1. 单线程异步模型的局限性 2. 多线程与异步的关系 3. Dart 中如何解决单线程异步模型的局限性 一. 本专栏图示概念规范 本专栏是对 异步编程 的系统探索,会

iOS中的应用启动原理以及嵌套模型开发示例详解

程序启动原理和UIApplication   一.UIApplication 1.简单介绍 (1)UIApplication对象是应用程序的象征,一个UIApplication对象就代表一个应用程序. (2)每一个应用都有自己的UIApplication对象,而且是单例的,如果试图在程序中新建一个UIApplication对象,那么将报错提示. (3)通过[UIApplicationsharedApplication]可以获得这个单例对象 (4) 一个iOS程序启动后创建的第一个对象就是UIAp

关于Linux命令行下的数学运算示例详解

前言 有几个有趣的命令可以在 Linux 系统下做数学运算: expr . factor . jot 和 bc 命令. 可以在 Linux 命令行下做数学运算吗?当然可以!事实上,有不少命令可以轻松完成这些操作,其中一些甚至让你大吃一惊.让我们来学习这些有用的数学运算命令或命令语法吧. expr 首先,对于在命令行使用命令进行数学运算,可能最容易想到.最常用的命令就是 expr ( 表达式 expression .它可以完成四则运算,也可以用于比较大小.下面是几个例子: 变量递增 $ count

Java并发编程包中atomic的实现原理示例详解

线程安全: 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协调,这个类都能表现出正确的行为,那么就称这个类时线程安全的. 线程安全主要体现在以下三个方面: 原子性:提供了互斥访问,同一时刻只能有一个线程对它进行操作 可见性:一个线程对主内存的修改可以及时的被其他线程观察到 有序性:一个线程观察其他线程中的指令执行顺序,由于指令重排序的存在,该观察结果一般杂乱无序 引子 在多线程的场景中,我们需要保证数据安全,就会考虑同步的

.Net Core下HTTP请求IHttpClientFactory示例详解

使用方式 IHttpClientFactory有四种模式: 基本用法 命名客户端 类型化客户端 生成的客户端 基本用法 在 Startup.ConfigureServices 方法中,通过在 IServiceCollection 上调用 AddHttpClient 扩展方法可以注册 IHttpClientFactory services.AddHttpClient(); 注册之后可以像依赖注入DI似得在类中通过构造函数注入形式使用,伪代码: class A { private readonly

Python网络爬虫中的同步与异步示例详解

一.同步与异步 #同步编程(同一时间只能做一件事,做完了才能做下一件事情) <-a_url-><-b_url-><-c_url-> #异步编程 (可以近似的理解成同一时间有多个事情在做,但有先后) <-a_url-> <-b_url-> <-c_url-> <-d_url-> <-e_url-> <-f_url-> <-g_url-> <-h_url-> <--i_ur

Android异步下载图片并且缓存图片到本地DEMO详解

在Android开发中我们经常有这样的需求,从服务器上下载xml或者JSON类型的数据,其中包括一些图片资源,本demo模拟了这个需求,从网络上加载XML资源,其中包括图片,我们要做的解析XML里面的数据,并且把图片缓存到本地一个cache目录里面,并且用一个自定义的Adapter去填充到LIstView,demo运行效果见下图: 通过这个demo,要学会有一下几点 1.怎么解析一个XML 2.demo中用到的缓存图片到本地一个临时目录的思想是怎样的? 3.AsyncTask类的使用,因为要去异

C#异步调用示例详解

本文实例为大家分享了C#异步调用的具体代码,供大家参考,具体内容如下 using System; using System.Collections.Generic; using System.Text; using System.Runtime.InteropServices; using System.Threading.Tasks; namespace AsyncAppTest { ////异步调用示例详解 /// 第1步:定义委托:此委托的返回值.参数类型必须与要调用的异步方法一致: //

java编程中自动拆箱与自动装箱详解

什么是自动装箱拆箱 基本数据类型的自动装箱(autoboxing).拆箱(unboxing)是自J2SE 5.0开始提供的功能. 一般我们要创建一个类的对象实例的时候,我们会这样: Class a = new Class(parameter); 当我们创建一个Integer对象时,却可以这样: Integer i = 100; (注意:不是 int i = 100; ) 实际上,执行上面那句代码的时候,系统为我们执行了:Integer i = Integer.valueOf(100); (感谢@

Java编程实现高斯模糊和图像的空间卷积详解

高斯模糊 高斯模糊(英语:Gaussian Blur),也叫高斯平滑,是在Adobe Photoshop.GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果,通常用它来减少图像杂讯以及降低细节层次.这种模糊技术生成的图像,其视觉效果就像是经过一个半透明屏幕在观察图像,这与镜头焦外成像效果散景以及普通照明阴影中的效果都明显不同.高斯平滑也用于计算机视觉算法中的预先处理阶段,以增强图像在不同比例大小下的图像效果. 从数学的角度来看,图像的高斯模糊过程就是图像与正态分布做卷积.由于正态分

Java编程实现对象克隆(复制)代码详解

克隆,想必大家都有耳闻,世界上第一只克隆羊多莉就是利用细胞核移植技术将哺乳动物的成年体细胞培育出新个体,甚为神奇.其实在Java中也存在克隆的概念,即实现对象的复制. 本文将尝试介绍一些关于Java中的克隆和一些深入的问题,希望可以帮助大家更好地了解克隆. 假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short,float,double.long)同样适