(译)使用命名过的路由进行导航

栏目: ASP.NET · 发布时间: 6年前

内容简介：在导航到导航到一个新页面和返回的方法中，我们学习了如何通过创建新路由并将其但是，如果我们需要在应用程序的许多部分导航到同一路由，这可能会导致代码重复。在这些情况下，定义“命名过的路由”，并使用“命名过的路由“进行导航，是非常方便的。

原文链接

在导航到导航到一个新页面和返回的方法中，我们学习了如何通过创建新路由并将其 push 导航器来导航到新路由。

但是，如果我们需要在应用程序的许多部分导航到同一路由，这可能会导致代码重复。在这些情况下，定义“命名过的路由”，并使用“命名过的路由“进行导航，是非常方便的。

要使用“命名过的路由”，我们可以使用Navigator.pushNamed函数。此示例将复制原始功能，演示如何使用“命名过的路由”。

步骤

创建两个路由
定义路由表(routes)
使用Navigator.pushNamed导航到第二个路由
使用Navigator.pop返回第一个路由

1.创建两个路由

首先，我们需要使用两个路由。第一个路由将包含一个导航到第二个路由的按钮。第二个路由将包含一个导航回第一个路由的按钮。

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: () {
            // Navigate to second screen when tapped!
          },
        ),
      ),
    );
  }
}

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

2.定义路由

接下来，我们需要通过为 MaterialAp p构造函数提供其他属性来定义我们的路由： initialRoute 和 routes 它们自己。

initialRoute 属性定义了应用程序应该从哪个路由开始。 routes 属性定义可用的命名过的路由以及导航到这些路由时应构建的widget。

MaterialApp(
  // Start the app with the "/" named route. In our case, the app will start
  // on the FirstScreen Widget
  initialRoute: '/',
  routes: {
    // When we navigate to the "/" route, build the FirstScreen Widget
    '/': (context) => FirstScreen(),
    // When we navigate to the "/second" route, build the SecondScreen Widget
    '/second': (context) => SecondScreen(),
  },
);

注意：使用 initialRoute 时，请确保未定义 home 属性。

3.导航到第二个路由

通过我们的widget和路由，我们可以开始导航！在这种情况下，我们将使用Navigator.pushNamed函数。这告诉Flutter构建路由表中定义的Widget并启动路由。

在我们的FirstScreen widget 的build方法中，我们将修改 onPressed 回调：

// Within the `FirstScreen` Widget
onPressed: () {
  // Navigate to the second screen using a named route
  Navigator.pushNamed(context, '/second');
}

4.返回第一个路由

为了导航回第一页，我们可以使用Navigator.pop函数。

// Within the SecondScreen Widget
onPressed: () {
  // Navigate back to the first screen by popping the current route
  // off the stack
  Navigator.pop(context);
}

完整例子

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named Routes Demo',
    // Start the app with the "/" named route. In our case, the app will start
    // on the FirstScreen Widget
    initialRoute: '/',
    routes: {
      // When we navigate to the "/" route, build the FirstScreen Widget
      '/': (context) => FirstScreen(),
      // When we navigate to the "/second" route, build the SecondScreen Widget
      '/second': (context) => SecondScreen(),
    },
  ));
}

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: () {
            // Navigate to the second screen using a named route
            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(
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

(译)使用命名过的路由进行导航

Previous

(转)导航到一个新页面和返回

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

离散数学及其应用（原书第6版·本科教学版）

[美] Kenneth H. Rosen / 袁崇义、屈婉玲、张桂芸 / 机械工业出版社 / 2011-11 / 49.00元

《离散数学及其应用》一书是介绍离散数学理论和方法的经典教材，已经成为采用率最高的离散数学教材，仅在美国就被600多所高校用作教材，并获得了极大的成功。第6版在前5版的基础上做了大量的改进，使其成为更有效的教学工具。本书基于该书第6版进行改编，保留了国内离散数学课程涉及的基本内容，更加适合作为国内高校计算机及相关专业本科生的离散数学课程教材。本书的具体改编情况如下： · 补充了关于范式......一起来看看《离散数学及其应用（原书第6版·本科教学版）》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器

多种字符组合密码