如何在Flutter中处理导航

所有移动应用程序中的核心概念之一是导航。它允许用户在不同的页面或活动之间移动。导航增加了一个应用程序的功能。它使开发者能够在不同的屏幕上包含许多功能。

前提条件

本指南假设您对Flutter框架有基本的了解。您必须熟悉创建Flutter项目、基本的Flutter小部件和布局。我们还将在这个项目中使用Dart。当涉及到代码编辑器时，您可以使用Visual Studio Code 或Android Studio 。

目标

本教程的重点是以下几个方面。

导航和路由。
Flutter中的命名路由。

路由

从一个点到一个目的地所采取的方式或路线被称为路线。在软件开发中，路线可以被看作是用户的方向或路径。

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// code for the home page layout
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
// code for the button in the home page 
        child: ElevatedButton(
          child: Text('Go to Login page'),
          onPressed: null,
        ),
      ),
    );
  }
}

在上面的代码中，我们已经包含了一个应用栏、页面标题和按钮。当按钮被点击时，我们将引导用户到另一个页面。

我们将在我们所有的页面中重复上述代码。

创建一个login.dart 文件并包括下面的代码。

  import 'package:flutter/material.dart';
  class LoginPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    // code for the login page layout
      return Scaffold(
        appBar: AppBar(
          title: Text('Login Page'),
        ),
        body: Center(
        // code for the button
          child: ElevatedButton(
            child: Text("Go to home page"),
            onPressed: null
          ),
        ),
      );
    }
  }

创建一个register.dart 文件，并包括以下代码。

  import 'package:flutter/material.dart';

  class RegisterPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
// code for the register layout
      return Scaffold(
        appBar: AppBar(
          title: Text('Register Page'),
        ),
        body: Center(
// code for button
          child: ElevatedButton(
            child: Text("Go to Login page"),
            onPressed: null
          ),
        ),
      );
    }
  }

接下来，我们将创建我们的navigation 路线。要做到这一点，让我们用下面的代码更新route.dart 文件。

  import 'package:flutter/material.dart';
 // importing our pages into our route.dart
  import 'package:flutter_navigation/views/home.dart';
  import 'package:flutter_navigation/views/login.dart';
  import 'package:flutter_navigation/views/register.dart';

  // variable for our route names
  const String loginPage = 'login';
  const String homePage = 'home';
  const String registerPage = 'register';

  void login() {}

  // controller function with switch statement to control page route flow
  Route<dynamic> controller(RouteSettings settings) {
    switch (settings.name) {
      case loginPage:
        return MaterialPageRoute(builder: (context) => LoginPage());
      case homePage:
        return MaterialPageRoute(builder: (context) => HomePage());
      case registerPage:
        return MaterialPageRoute(builder: (context) => RegisterPage());
      default:
        throw ('this route name does not exist');
    }
  }

我们首先导入views 文件夹中的所有页面。确保你在导入文件时使用你的项目名称。

接下来，我们将我们的路由名称定义为constant 变量，然后声明一个controller 函数，使我们能够控制路由流。

controller 函数需要在参数中传递一个设置。settings 变量有两个重要参数：settings.name ，和settings.argument 。在本教程中，我们将只使用setting.name 参数。

接下来我们将用下面的代码更新我们的main.dart 文件。

    import 'package:flutter/material.dart';
    // importing our route.dart into our main.dart 
    import 'route/route.dart' as route;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  // code for our main layout
    return MaterialApp(
      title: 'Flutter navigation',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      // code that is setting the first page you will see when you open your app
      onGenerateRoute: route.controller,
      initialRoute: route.loginPage,
    );
  }
}

在这里，我们将route.dart 文件导入为route ，然后将onGenerateRoute 设置为我们的controller 函数，将我们的初始路由设置为我们的登录页面。

然后，我们将进入我们的页面，并在每个页面之间做一个过渡。

要做到这一点，我们将在views 文件夹中的每个页面内导入route.dart 文件，如下图所示。

    // importing our route.dart file
    import 'package:tutorial_app/route/route.dart' as route;

注意 tutorial_app 是我项目的名称。

接下来，我们将用下面的代码替换所有页面上的onpressed 函数中的null 。

对于主页。

    // code that navigates us to the next page
    onPressed: () => Navigator.pushNamed(context, route.registerPage),

对于登录页。

    // code that navigates us to the next page
    onPressed: () => Navigator.pushNamed(context, route.homePage),

对于注册页。

    // code that navigates us to the next page
    onPressed: () => Navigator.pushNamed(context, route.loginPage),

我们将保存所有文件并重新加载应用程序。然后，我们将能够在不同的页面上进行导航。

我们最终的应用程序将看起来像这样。

Home Page

结论

我们现在有了一个简单的应用程序，它有一个有组织的Named Route 的导航。你可以从这个GitHub repo下载完整的项目。

使用Named Routes 可以帮助我们减少开发时间，因为它消除了模板代码。

如何在Flutter中处理导航问题

如何在Flutter中处理导航

前提条件

目标

路由

导航

结论