脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → Flutter push pop方法路由导航

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

 更新时间：2022年09月29日 08:50:30   作者：Jimmy  
这篇文章主要为大家介绍了Flutter使用push pop方法及路由进行导航详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

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

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

准备工作

我们假设 FirstScreen 和 SecondScreen 是两个不同的类，分别在各自的 FirstScreen.dart 和 SecondScreen.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。我们需要在 FirstScreen 的 build() 方法里面的 RaisedButton 中 onPressed(){} 添加如下的事件：

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 构造函数额外提供的属性：initialRoute 和 routes。

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 挂件将构建。

现在，我们将 FirstScreen 的 onPressed(){} 的方法更改如下：

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

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

在 SecondScreen 的 onPressed(){} 事件中，还是保留使用 Navigator.pop() 方法：

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

以上就是Flutter使用push pop方法及路由进行导航详解的详细内容，更多关于Flutter push pop方法路由导航的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Android中getActivity()为null的解决办法

    Android中getActivity()为null的解决办法

    在Android开发的时候可能遇过出现getActivity()出现null的时候导致程序报出空指针异常，那么遇到这种情况改如何解决，下面跟着小编一起去看看。
    2016-08-08
  • iOS实现3D卡片式轮播效果

    iOS实现3D卡片式轮播效果

    这篇文章主要为大家详细介绍了iOS实现3D卡片式轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • iOS App通信之local socket示例

    iOS App通信之local socket示例

    这篇文章主要介绍了iOS App之间的通信 －local socket示例的相关资料,需要的朋友可以参考下
    2016-09-09
  • iOS11 WKWebView 无法加载内容的解决方法

    iOS11 WKWebView 无法加载内容的解决方法

    这篇文章主要介绍了iOS11 WKWebView 无法加载内容,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • iOS下拉选择菜单简单封装

    iOS下拉选择菜单简单封装

    这篇文章主要为大家详细介绍了iOS下拉选择菜单封装代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • iOS常见宏理解及使用方法

    iOS常见宏理解及使用方法

    这篇文章主要给大家介绍了关于iOS常见宏理解及使用方法的相关资料，文中通过示例代码介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-08-08
  • WKWebView、WebView和JS的交互方式详解

    WKWebView、WebView和JS的交互方式详解

    这篇文章主要给大家介绍了关于WKWebView、WebView和JS的交互方式，文中通过示例代码介绍的非常详细，对各位iOS开发者们具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • IOS点击按钮隐藏状态栏详解及实例代码

    IOS点击按钮隐藏状态栏详解及实例代码

    这篇文章主要介绍了IOS点击按钮隐藏状态栏详解及实例代码的相关资料,需要的朋友可以参考下
    2017-02-02
  • iOS项目的开发命名规范教程

    iOS项目的开发命名规范教程

    为了团队各成员之间代码的互通、可读、易维护性，特制订此开发规范。下面这篇文章主要给大家介绍了关于iOS项目的开发命名规范的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
    2017-11-11
  • 浅谈SwiftUI 里面$0是什么意思如何用

    浅谈SwiftUI 里面$0是什么意思如何用

    这篇文章主要介绍了浅谈SwiftUI 里面$0是什么意思如何用,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论