Flutter中的多页面应用

简介：应用程序在这个技术世界中被人类广泛使用。应用商店中的应用数量每天都在增加。由于这场竞争，应用程序开发人员已经开始为他们的应用程序添加许多功能。为了降低这种复杂性，应用程序的内容主要分为不同的页面，以便用户可以轻松地在这些页面之间导航。

Flutter是一个开源的移动应用 SDK，用于开发跨平台的移动应用。 Flutter这些年变得流行起来，因为它具有令人惊叹的功能，例如热重载、吸引人的 UI 等。在Flutter中，一切都是 Widget。

路由和导航器：在Flutter中，页面/屏幕被称为路由。从一条路线导航到另一条路线的过程由称为Navigator的小部件执行。导航器以堆栈的形式维护其所有子路由。它有许多方法，如push()和pop() ，它们在堆栈规则下工作。但是，对于多页面应用程序，我们将使用一种称为 pushNamed() 的独特方法。该方法主要遵循面向对象的概念。

Navigator.pushNamed()方法用于调用路由，其类已预先创建和定义。这就像在 OOP 中需要时调用一个类。现在，让我们继续创建我们的多页应用程序。

多页应用：

创建路由：路由主要以类的形式创建。每条路线都有一个独特的类，其中包含独特的内容和 UI。在这里，我们将创建三个路由，即 HomeRoute()、SecondRoute() 和 ThirdRoute()。每条路线都有一个应用栏，其中包含一个独特的标题和一个用于在路线之间导航的凸起按钮。可以按如下方式创建路由：

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

定义路线：在路线之间导航之前，在 MaterialApp 小部件中定义它们非常重要。这有助于我们尽可能轻松地访问和调用它们。由于我们正在初始化第一条路线，因此我们没有必要提及家乡路线。路由可以定义如下：
```
void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomeRoute(),
      '/second': (context) => SecondRoute(),
      '/third': (context) => ThirdRoute(),
    },
  ));
}
```
从代码中可以看出，每条路由都被唯一命名。因此，当导航器小部件在路由类中遇到这些名称中的任何一个时，它就会导航到相应的路由。这段代码中的initialRoute指定了app的起始路径，用'/'符号表示。在这个小部件中初始化主页是强制性的。
导航到页面： Navigator.pushNamed() 方法在此部分中发挥作用。此方法调用路由类中特定路由的名称。从而初始化导航过程。导航可以如下进行：
```
onPressed: () {
  Navigator.pushNamed(context, '/second');
}
```
导航返回：但是，当访问最近访问的路线时，可以使用 Navigator.pop() 方法。它可以帮助我们导航回最后一条路线。在这种情况下，堆栈规则如下。 pop方法使用如下：
```
onPressed: () {
  Navigator.pop(context);
}
```

那么，现在让我们看看如何将所有这些代码组合起来创建这个多页应用程序。

例子：

import 'package:flutter/material.dart';
  
void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomeRoute(),
      '/second': (context) => SecondRoute(),
      '/third': (context) => ThirdRoute(),
    },
  ));
}
  
class HomeRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geeks for Geeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
          child: Column(
          children: [
          RaisedButton(
            child: Text('Click Me!'),
            onPressed: () {
              Navigator.pushNamed(context, '/second');
            },
          ),
          RaisedButton(
            child: Text('Tap Me!'),
            onPressed: () {
              Navigator.pushNamed(context, '/third');
            },
          ),
        ],
      )),
    );
  }
}
  
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('Back!'),
        ),
      ),
    );
  }
}
  
class ThirdRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tap Me Page"),
        backgroundColor: Colors.green,
      ),
    );
  }
}

输出：