Flutter - 导航&路由

Flutter - 导航&路由 首页 / Flutter入门教程 / Flutter - 导航&路由

Navigation和Routing是所有移动应用程序的一些核心概念,它使用户可以在不同页面之间移动。

在任何移动应用程序中,Navigation导航到不同页面都定义了应用程序的工作流程,并且处理导航的方法称为Routing路由。 Flutter提供了一个基本的路由类MaterialPageRoute以及两个方法Navigator.push()和Navigator.pop(),它们显示了如何在两个路由之间导航,需要执行以下步骤。

步骤1:首先,您需要创建两条路由。

步骤2:然后,使用Navigator.push()方法从一个路由导航到另一个路由。

步骤3:最后,使用Navigator.pop()方法导航到第一个路由。

创建两条路由

在这里,无涯教程将创建两条导航路由。在这两种路由中,无涯教程仅创建了一个按钮。当无涯教程点击第一页的按钮时,它将导航到第二页。同样,当无涯教程点击第二页上的按钮时,它将返回到第一页。下面的代码片段在Flutter应用程序中创建了两条路由。

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
           //Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
           //Navigate back to first route when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

使用Navigator.push()方法导航到第二条路由

Navigator.push()方法用于导航/切换到新的页面。在这里,push()方法在堆栈上添加页面,然后使用导航器对其进行管理。同样,无涯教程使用MaterialPageRoute类,该类允许使用特定于平台的动画在路由之间进行转换。以下代码说明了Navigator.push()方法的用法。

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

使用Navigator.pop()方法返回第一条路由

现在,无涯教程需要使用Navigator.pop()方法返回到第一条路由。 pop()方法允许无涯教程从堆栈中删除当前路由,该路由由导航器管理。

要实现返回原始路由,无涯教程需要更新SecondRoute小部件中的onPressed()回调方法,如下代码片段所示:

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

现在,让无涯教程看一下完整的代码,以实现两条路由之间的导航。首先,创建Flutter项目,并将以下代码插入main.dart文件中。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter Navigation',
    theme: ThemeData(
     //这是您的应用程序的主题。
      primarySwatch: Colors.green,
    ),
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Here'),
          color: Colors.orangeAccent,
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blueGrey,
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back'),
        ),
      ),
    );
  }
}

当您在Android Studio中运行该项目时,您将在模拟器中看到以下屏幕。这是仅包含一个按钮的第一个屏幕。

Flutter Navigation and Routing

单击按钮Click Here,您将导航到下图所示的第二个屏幕。接下来,当您单击“Go back!”按钮时,您将返回第一页。

Flutter Navigation and Routing

命名路由导航

无涯教程已经学习了如何通过创建新路由来导航到新屏幕以及如何使用导航器进行管理,导航器维护基于堆栈的路由历史记录。如果需要在应用程序的许多部分中导航到同一屏幕,则此方法将无济于事,因为它会导致代码重复。可以通过定义命名的路由来解决。

无涯教程可以使用Navigator.pushNamed()函数处理命名路由。

以下步骤是必需的,这些步骤演示了如何使用命名路由。

步骤1:首先,无涯教程需要创建两个页面。

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Here'),
          color: Colors.orangeAccent,
          onPressed: () {
            //
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blueGrey,
          onPressed: () {
            //
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

步骤2:定义路由。

在这一步中,无涯教程必须定义路由。 MaterialApp构造函数负责定义初始路由和其他路由本身。在这里,初始路由告诉页面的开始,而routes属性定义了可用的命名路由和小部件。以下代码对其进行了更清晰的说明。

MaterialApp(
  title: 'Named Route Navigation',
  theme: ThemeData(
   //这是您的应用程序的主题。
    primarySwatch: Colors.green,
  ),
 //它以“/”命名路由启动应用程序。在这种情况下,应用程序启动
 //在 HomeScreen 小部件上。
  initialRoute: '/',
  routes: {
   //在 HomeScreen 小部件上。
    '/': (context) => HomeScreen(),
   //导航到“/second”路线时,构建 SecondScreen 小部件。
    '/second': (context) => SecondScreen(),
  },
));

步骤3:使用Navigator.pushNamed()函数导航到第二个屏幕。

在此步骤中,无涯教程需要调用Navigator.pushNamed()方法进行导航。为此,无涯教程需要像下面的代码片段一样,在HomeScreen的build方法中更新onPressed()回调。

onPressed: () {
 //使用命名路由导航到第二个屏幕。
  Navigator.pushNamed(context, '/second');
}

步骤4:使用Navigator.pop()函数返回到第一个屏幕。

这是最后一步,无涯教程将使用Navigator.pop()方法在第一个屏幕上返回。

链接:https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-navigation-and-routing.html

来源:LearnFk无涯教程网

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

让无涯教程在Flutter项目中看到上述解释的完整代码,并在模拟器中运行以获取输出。

import 'package:flutter/material.dart';

void main() {
  runApp( MaterialApp(
    title: 'Named Route Navigation',
    theme: ThemeData(
     //这是您的应用程序的主题。
      primarySwatch: Colors.green,
    ),
   //使用“/”命名路由启动应用程序。在这种情况下,应用程序启动
   //在 FirstScreen 小部件上。
    initialRoute: '/',
    routes: {
     //导航到“/”路由时,构建 FirstScreen 小部件。
      '/': (context) => HomeScreen(),
     //导航到“/second”路线时,构建 SecondScreen 小部件。
      '/second': (context) => SecondScreen(),
    },
  ));
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Here'),
          color: Colors.orangeAccent,
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.blueGrey,
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

输出

Flutter Navigation and Routing

单击按钮Click Here,您将导航到下图所示的第二个屏幕。接下来,当您单击“Go back!”按钮时,它将返回到主页。

Flutter Navigation and Routing

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

机器学习40讲 -〔王天一〕

趣谈Linux操作系统 -〔刘超〕

浏览器工作原理与实践 -〔李兵〕

Swift核心技术与实战 -〔张杰〕

雷蓓蓓的项目管理实战课 -〔雷蓓蓓〕

爱上跑步 -〔钱亮〕

Go 并发编程实战课 -〔晁岳攀(鸟窝)〕

全链路压测实战30讲 -〔高楼〕

遗留系统现代化实战 -〔姚琪琳〕

好记忆不如烂笔头。留下您的足迹吧 :)