Flutter中的路由和导航器

简介： Flutter是 Google 创建的开源移动应用 SDK。 Flutter使用Dart语言创建遵循面向对象概念的移动应用程序。 Flutter在移动应用程序开发人员中有着非常好的影响力，因为它具有跨平台开发、热重载、热重启、引人注目的 UI 等引人注目的特性。在flutter中，从文本到填充，一切都是小部件。 Flutter中的一切，都是一个小部件。

路线：应用程序是新趋势。如今，Play商店中可用的应用程序数量非常多。应用程序在称为页面或屏幕的全屏容器中显示其内容。在flutter中，页面或屏幕被称为Routes 。在 android 中，这些页面/屏幕被称为 Activity，而在 iOS 中，它被称为 ViewController。但是，在flutter中，路由被称为 Widget。在Flutter中，一个 Page/Screen 被称为 Route。

创建路由：可以使用面向对象的概念在Dart中以“类”的形式编写路由。每个路由都可以写成一个单独的类，有自己的内容和 UI。

现在让我们创建两条路线，每条路线都有独特的 App Bars 和 Raised Buttons。代码如下：

class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Me!'),
          onPressed: () {
            /* Contains the code that helps us
             navigate to the second route. */
          },
        ),
      ),
    );
  }
}
  
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Click Me Page"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            /* Contains the code that helps us
             navigate to first route. */
          },
          child: Text('Home!'),
        ),
      ),
    );
  }
}

Navigator：顾名思义，Navigator 是一个帮助我们在路线之间导航的小部件。导航器在处理路由时遵循堆栈方法。根据用户所做的操作，路线一个接一个地堆叠，当按下时，它会转到最近访问的路线。 Navigator 是一个遵循堆栈规则的小部件。

定义主页：在导航时，我们需要做的第一件事就是定义或初始化“主页”。主页可以根据我们的需要是任何路由。主页通常会放置在导航器堆栈的底部。现在让我们看看如何将 HomeRoute() 初始化为我们的主页：

void main() {
  runApp(MaterialApp(
    home: HomeRoute(),
  ));
}

导航到页面：既然我们已经定义了主页，剩下的就是从主页导航到应用程序的另一条路线。为此，导航器小部件有一个名为 Navigator.push() 的方法。此方法将路线推送到家的顶部，从而显示第二条路线。将路由压入堆栈的代码如下：

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

导航回家：现在我们已经到了目的地，但是我们如何回家呢？为此，导航器有一个名为 Navigator.pop() 的方法。这有助于我们从堆栈中删除当前路由，以便我们回到我们的主路由。这可以按如下方式完成：

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

示例：所以，这就是我们如何在应用程序的两个页面之间导航。上述flutter app的整个代码如下：

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    home: HomeRoute(),
  ));
}
  
class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Click Me!'),
          onPressed: () {
              Navigator.push(
              context,
              MaterialPageRoute(builder: 
                (context) => SecondRoute()),
              );
          }
        ),
      ),
    );
  }
}
  
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Click Me Page"),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
              Navigator.pop(context);
          },
          child: Text('Home!'),
        ),
      ),
    );
  }
}

输出：