首页手记 Flutter APP导航框架学习：从入门到实践

Flutter APP导航框架学习：从入门到实践

标签：

移动开发

概述

本文详细介绍了flutter APP导航框架的学习过程，从导航的基础概念到高级技巧，涵盖了Flutter导航的重要性和应用场景。文章通过实例代码解释了如何使用Navigator 1.0和Navigator 2.0进行页面跳转，并探讨了动态路由和自定义导航器的使用方法。学习过程中，您将掌握Flutter导航的核心知识和实践技巧。

Flutter APP导航框架学习：从入门到实践

Flutter导航基础概述

Flutter导航简介

Flutter导航是移动应用开发中不可或缺的一个环节。无论是在iOS还是Android平台，导航都是用户界面设计的重要组成部分。Flutter的导航机制提供了丰富的功能来实现页面之间的跳转，使得开发者能够更加灵活地控制应用的用户体验。

导航的基本概念

导航在Flutter中主要通过Navigator实现。Navigator是Flutter提供的一个管理页面栈的组件。它允许开发者在应用的不同页面之间进行切换，通过页面栈的管理来实现这种导航。页面栈中的每个元素称为一个Route，它对应着应用中的一个页面。Navigator通过维护一个页面栈来控制应用的导航流程，可以进行页面的添加、移除、替换等操作。

导航的重要性和应用场景

导航的重要性在于它直接影响用户体验。合理的导航设计能够帮助用户更加直观地理解和操作应用。常见的应用场景包括：

页面之间的切换，例如从登录页面跳转到主页面。
嵌套页面的管理，例如在主页面中打开一个子页面。
组件之间的状态传递，例如将一个页面的状态传递给另一个页面。
动态路由的管理，例如根据不同的条件跳转到不同的页面。

Flutter导航方式介绍

Navigator 1.0 和 Navigator 2.0

Flutter中的导航机制经历了从Navigator 1.0到Navigator 2.0的演进。Navigator 1.0是早期版本的导航机制，基于页面栈的管理模式。Navigator 2.0则是更加现代化的版本，提供了更加灵活和高级的导航功能。

Navigator 1.0

在Navigator 1.0中，导航主要通过Navigator.push()和Navigator.pop()方法实现。push()方法用于将新的页面添加到页面栈中，而pop()方法则用于从页面栈中移除当前页面并返回上一个页面。这种模式适用于简单的导航场景，但当遇到复杂的导航需求时，可能会显得有些局限。

// 示例代码：使用Navigator 1.0
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator 1.0 Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

Navigator 2.0

Navigator 2.0带来了更强大的功能，例如支持更复杂的页面嵌套、动态路由管理等。它通过GlobalObjectKey和Page对象来更精细地管理页面栈。此外，Navigator 2.0还提供了更多定制化的选项，如自定义导航器、自定义页面转场动画等。

// 示例代码：使用Navigator 2.0
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator 2.0 Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

页面路由介绍

页面路由是实现页面跳转的关键组件。Flutter提供了多种不同的页面路由模式，包括MaterialPageRoute、CupertinoPageRoute等。MaterialPageRoute适用于Material Design风格的应用，而CupertinoPageRoute则适用于Cupertino风格的应用。这两种路由都使用栈来管理页面跳转。

路由管理和导航模式

在Flutter中，路由可以通过不同的方式来管理，例如通过MaterialApp或CupertinoApp的routes属性来定义页面路由，或者通过Navigator的push和pop方法来进行页面跳转。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

实战：简单的页面跳转

创建第一个Flutter应用

首先，创建一个新的Flutter项目。使用flutter create命令来创建一个新的Flutter项目：

flutter create first_navigation_app
cd first_navigation_app

在项目根目录下的lib/main.dart文件中，可以看到默认的Flutter应用代码结构。

添加导航按钮

创建一个简单的按钮来实现页面之间的跳转。在main.dart文件中，定义两个简单的页面FirstPage和SecondPage，并在FirstPage中添加一个按钮来跳转到SecondPage。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

实现页面跳转

在上述代码中，FirstPage中的按钮点击事件通过Navigator.push()方法来触发页面跳转，跳转的目标是SecondPage。SecondPage中的按钮点击事件通过Navigator.pop()方法返回上一个页面。

动态路由的使用

动态路由的概念

动态路由是一种更加灵活的路由管理方式。它允许在运行时根据不同的条件动态地生成不同的路由。这种方式特别适用于需要根据用户输入或者外部数据来动态决定跳转目标的场景。

路由参数的传递

在动态路由中，可以通过传递参数来传递额外的信息。例如，在跳转到新的页面时，可以通过参数传递一些数据，以便新页面能够根据这些数据来初始化。

示例代码：动态路由

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Navigation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/second',
              arguments: {'message': 'Hello from First Page'},
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: args is Map && args['message'] != null
            ? Text(args['message'])
            : Text('No message received'),
      ),
    );
  }
}

动态路由的实现

在上述代码中，FirstPage通过Navigator.pushNamed()方法跳转到SecondPage，并传递了一个参数。在SecondPage中，通过ModalRoute.of(context)?.settings.arguments来获取这个参数，并根据参数内容来显示不同的内容。

高级导航技巧

导航栈管理

在复杂的导航场景中，导航栈的管理变得尤为重要。可以通过Navigator.popUntil()等方法来实现复杂的导航逻辑。

示例代码：导航栈管理

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Stack Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/second',
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.popUntil(
              context,
              (route) => route.settings.name == '/',
            );
          },
          child: Text('Go Back to First Page'),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

自定义导航器

在某些场景下，需要对导航行为进行更精细的控制。可以通过自定义导航器来实现这种需求。自定义导航器可以通过继承NavigatorObserver或RouteAware接口来实现。

示例代码：自定义导航器

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Navigator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorObservers: [MyNavigatorObserver()],
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class MyNavigatorObserver extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    super.didPush(route, previousRoute);
    print('Route pushed: ${route.settings.name}');
  }

  @override
  void didPop(Route route, Route? previousRoute) {
    super.didPop(route, previousRoute);
    print('Route popped: ${route.settings.name}');
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/second',
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

跳转动画的定制

默认情况下，Flutter提供了多种转场动画效果。可以通过自定义转场动画来实现更加个性化的导航体验。

示例代码：跳转动画定制

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Transition Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
      builder: (context, child) {
        return FadeScaleTransition(child: child);
      },
    );
  }
}

class FadeScaleTransition extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      transitionBuilder: (child, animation) {
        return ScaleTransition(
          scale: animation,
          child: FadeTransition(
            opacity: animation,
            child: child,
          ),
        );
      },
      duration: Duration(milliseconds: 500),
      child: RouterScope(
        child: child,
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/second',
            );
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

返回和拦截导航

在某些情况下，可能需要拦截或阻止某些导航操作。可以通过重写willPopScope方法来实现这种需求。

示例代码：返回和拦截导航

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pop Scope Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (Navigator.canPop(context)) {
          return true;
        } else {
          return false;
        }
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text('First Page'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(
                context,
                '/second',
              );
            },
            child: Text('Go to Second Page'),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

实践项目：构建一个简单的导航应用

项目需求分析

假设我们需要构建一个简单的导航应用，该应用包含以下几个页面：

首页（Home Page）
设置页（Settings Page）
关于页（About Page）

用户可以从首页跳转到设置页或关于页，并能够从设置页或关于页返回到首页。

分析导航逻辑

用户点击首页中的“设置”按钮跳转到设置页。
用户点击首页中的“关于”按钮跳转到关于页。
用户点击设置页或关于页中的“返回”按钮返回到首页。

实现并测试导航功能

根据上述需求和导航逻辑，我们可以实现一个简单的导航应用。首先，创建一个新的Flutter项目，并在项目中定义各个页面。

flutter create navigation_example
cd navigation_example

在lib/main.dart文件中，定义首页、设置页和关于页，并通过Navigator实现页面之间的跳转。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/settings': (context) => SettingsPage(),
        '/about': (context) => AboutPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  '/settings',
                );
              },
              child: Text('Go to Settings'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(
                  context,
                  '/about',
                );
              },
              child: Text('Go to About'),
            ),
          ],
        ),
      ),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

完成上述代码后，运行应用并测试各个页面的跳转逻辑是否符合预期。

总结

通过本文的学习，您应该已经掌握了Flutter导航的基本概念和实践技巧。导航是Flutter应用开发中的重要组成部分，合理的导航设计能够极大地提升用户体验。当然，导航的实现也有许多高级技巧，例如动态路由、自定义导航器、动画定制等，这些技巧可以帮助您构建更加复杂和个性化的导航应用。希望本文的内容能对您有所帮助，更多Flutter开发技巧和项目实践可以在慕课网学习。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

BIG阳

手记
篇

粉丝

70

获赞与收藏

457

关注作者，订阅最新文章

相关文章推荐

【备战春招】第1天 Flutter从入门到进阶，实战携程网App的学习地图

Flutter框架技术入门到企业站APP实战开发

两分钟带你快速掌握Flutter的路由与导航

革命性移动端开发框架-Flutter时间简史

从入门到精通，Java学习路线导航

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空