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

Flutter APP导航框架学习：从入门到上手

标签：

杂七杂八

概述

本文深入介绍了Flutter APP导航框架的学习，包括导航基础知识、内置导航组件解析、创建简单的导航示例、高级导航功能探索以及实战应用。从基本导航到高级功能，本文为读者提供了一个全面的Flutter APP导航框架学习指南。

导航基础知识介绍

什么是导航

导航在软件开发中指的是用户通过界面元素（如按钮、链接等）从一个页面或组件移动到另一个页面或组件的过程。导航是用户界面设计的重要组成部分，它帮助用户理解和操作你的应用程序。在Flutter中，导航机制允许用户在应用程序的不同屏幕之间进行平滑和一致的跳转。

导航在Flutter中的作用

导航在Flutter应用中起到以下作用：

用户体验：导航帮助用户理解和操作应用程序，提供了一种直观的方式来浏览和使用应用程序的功能。
代码组织：通过导航机制，可以将应用程序的不同部分组织成独立的屏幕，使代码更加模块化和易于维护。
状态管理和数据传递：导航机制提供了传递数据的方式，可以在不同屏幕之间传递数据和状态信息。
页面过渡效果：通过导航机制，可以定制页面过渡动画，提升用户体验。

常见的导航模式和概念

常见的导航模式和概念包括：

栈式导航：这是最常见的导航模式，类似于浏览器的历史记录。每当你从一个页面跳转到另一个页面时，新页面会被推入栈顶，当你返回时，会从栈顶弹出页面。
抽屉导航：一种从屏幕的一侧滑出的导航方式，通常用于菜单和侧边栏。
底部导航栏：一种位于屏幕底部的导航方式，通常用于切换主要功能或区域。
模态对话框：一种覆盖在当前页面之上的导航方式，通常用于弹出框、确认对话框等。
抽屉导航和底部导航栏结合：许多应用程序结合了底部导航栏和抽屉导航来提供更丰富的用户体验。

示例代码：基本导航示例

假设我们有一个简单的Flutter应用，包含两个页面：HomePage 和 DetailPage。下面是如何使用Navigator进行页面跳转的示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

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

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: Text('This is the Detail Page'),
      ),
    );
  }
}

Flutter内置导航组件解析

Navigator组件详解

Navigator 是Flutter框架内置的核心组件之一，用于管理应用内各个页面之间的导航。它管理一个路由栈（路由栈的每个元素都是一个Route对象），并提供了一系列方法来实现页面之间的跳转和返回。

主要方法

push(route)：将一个新的路由（页面）推入栈顶，并返回一个Future，当新页面被弹出时，这个Future会完成。
pop(context)：弹出当前页面的上一个页面，返回值为Future。
pushReplacement(route)：替代当前页面上方的页面，并将新页面推入栈顶。
pushAndRemoveUntil(route, predicate)：将一个新的页面推入栈顶，并从栈中移除所有满足predicate条件的页面。
popUntil(route)：弹出所有满足predicate条件的页面。

Route和PageRoute介绍

Route 是路由类的基类，代表导航系统中的一个页面。PageRoute是Route的一个子类，用于定义具有特定页面过渡效果的页面跳转。PageRoute负责定义页面的生命周期以及页面的过渡动画。

生命周期

createState：创建页面的状态。
buildTransitions：定义页面的过渡动画。

MaterialPageRoute和NamedRoute用法

MaterialPageRoute 是PageRoute的一个实现，用于实现具有标准Material设计过渡效果的页面跳转。NamedRoute则是通过名称来标识的路由。

示例代码：使用MaterialPageRoute和NamedRoute

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

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

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: Text('This is the Detail Page'),
      ),
    );
  }
}

创建简单的导航示例

使用Navigator进行页面跳转

在Flutter中，使用Navigator.push方法可以实现页面跳转。下面是一个简单的示例代码，展示了如何从HomePage跳转到DetailPage：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
ibli
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

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

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: Text('This is the Detail Page'),
      ),
    );
  }
}

传递数据到新页面

传递数据到新页面可以通过Navigator.push方法的参数来实现。下面是一个示例代码，展示了如何传递数据到新页面：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailPage(title: 'Hello from Home Page')),
            );
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String title;

  DetailPage({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Text('This is the Detail Page'),
      ),
    );
  }
}

返回数据给前一个页面

返回数据给前一个页面可以通过Navigator.pop方法来实现。下面是一个示例代码，展示了如何从新页面返回数据到前一个页面：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String result = '';

  void resultFromDetailPage(String value) {
    setState(() {
      this.result = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Received from Detail Page: $result'),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => DetailPage(onSubmit: (value) => resultFromDetailPage(value))),
                ).then((value) {
                  setState(() {
                    result = value ?? 'No value returned';
                  });
                });
              },
              child: Text('Go to Detail Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final Function(String) onSubmit;

  DetailPage({required this.onSubmit});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            onSubmit('Hello from Detail Page');
            Navigator.pop(context, 'Hello from Detail Page');
          },
          child: Text('Submit'),
        ),
      ),
    );
  }
}

高级导航功能探索

使用全局导航键

全局导航键（或称为全局导航控制器）是管理整个应用导航的中央枢纽。通过使用全局导航键，可以更容易地管理应用的导航状态和行为。下面是一个示例代码，展示了如何创建和使用全局导航键：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      onGenerateRoute: (settings) {
        final args = settings.arguments;
        switch (settings.name) {
          case '/home':
            return MaterialPageRoute(builder: (context) => HomePage(args));
          case '/detail':
            return MaterialPageRoute(builder: (context) => DetailPage(args));
          default:
            return MaterialPageRoute(builder: (context) => Scaffold(body: Center(child: Text('Unknown Route'))));
        }
      },
    );
  }
}

class HomePage extends StatelessWidget {
  final String title;

  HomePage(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/detail', arguments: 'Hello from Home Page');
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String title;

  DetailPage(this.title);

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments;
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Text('This is the Detail Page $args'),
      ),
    );
  }
}

动态添加和移除路由

有时需要根据应用程序的状态动态地添加和移除路由。这可以通过Navigator.pushNamedAndRemoveUntil或Navigator.pushReplacement方法来实现。下面是一个示例代码，展示了如何动态地添加和移除路由：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
        '/settings': (context) => SettingsPage(),
      },
    );
  }
}

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, '/detail');
              },
              child: Text('Go to Detail Page'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/settings');
              },
              child: Text('Go to Settings Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: Text('This is the Detail Page'),
      ),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings Page')),
      body: Center(
        child: Text('This is the Settings Page'),
      ),
    );
  }
}

定制页面过渡动画

页面过渡动画可以使用PageRoute的子类来自定义。例如，可以使用CupertinoPageRoute或自定义的PageRoute来实现独特的动画效果。下面是一个示例代码，展示了如何使用自定义的PageRoute来实现独特的动画效果：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MyCustomPageRoute(builder: (context) => DetailPage()),
            );
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: Text('This is the Detail Page'),
      ),
    );
  }
}

class MyCustomPageRoute<T> extends PageRoute<T> {
  final WidgetBuilder builder;

  MyCustomPageRoute({
    required this.builder,
  });

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    final child = builder(context);
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  }

  @override
  Duration get transitionDuration => Duration(milliseconds: 500);
}

实战：构建完整的导航框架

设计合理的导航架构

设计合理的导航架构是构建一个高效、易维护的应用程序的关键。一个良好的导航架构应该易于扩展和修改，同时保持应用程序的清晰和一致。

导航架构设计原则

模块化：将应用程序的不同部分组织成独立的模块或屏幕。
可维护性：确保导航逻辑易于理解和修改。
一致性：保持导航行为和用户界面的一致性。
灵活性：允许在不影响整体架构的情况下添加新的屏幕或更改现有屏幕。

实现底部导航栏和侧边栏

在Flutter应用中，底部导航栏和侧边栏是常见的导航元素。下面是如何实现底部导航栏和侧边栏的示例代码：

示例代码：底部导航栏

import 'package:flutter/material.dart';

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

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

class BottomNavigationBarExample extends StatefulWidget {
  @override
  _BottomNavigationBarExampleState createState() => _BottomNavigationBarExampleState();
}

class _BottomNavigationBarExampleState extends State<BottomNavigationBarExample> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    HomePage(),
    DetailPage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bottom Navigation Bar Example')),
      body: Center(child: _pages[_currentIndex]),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(child: Text('This is the Home Page')),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(child: Text('This is the Detail Page')),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings Page')),
      body: Center(child: Text('This is the Settings Page')),
    );
  }
}

示例代码：侧边栏

import 'package:flutter/material.dart';

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

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

class SideDrawerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Side Drawer Example')),
      body: Center(child: Text('This is the main content')),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              child: Text('Menu'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Home'),
              onTap: () {
                Navigator.pop(context);
                Navigator.pushNamed(context, '/home');
              },
            ),
            ListTile(
              title: Text('Search'),
              onTap: () {
                Navigator.pop(context);
                Navigator.pushNamed(context, '/search');
              },
            ),
            ListTile(
              title: Text('Settings'),
              onTap: () {
                Navigator.pop(context);
                Navigator.pushNamed(context, '/settings');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(child: Text('This is the Home Page')),
    );
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Search Page')),
      body: Center(child: Text('This is the Search Page')),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings Page')),
      body: Center(child: Text('This is the Settings Page')),
    );
  }
}

制作可复用的导航组件库

为了提高代码的可重用性和维护性，可以制作一个可复用的导航组件库。下面是如何创建一个简单的导航组件库的示例代码：

示例代码：可复用的导航组件库

import 'package:flutter/material.dart';

class NavigationHelper {
  static void pushNamedRoute(BuildContext context, String routeName) {
    Navigator.pushNamed(context, routeName);
  }

  static void pushReplacementNamedRoute(BuildContext context, String routeName) {
    Navigator.pushReplacementNamed(context, routeName);
  }

  static void pop(BuildContext context) {
    Navigator.pop(context);
  }

  static void pushAndRemoveUntil(BuildContext context, String routeName, Function(Route<dynamic>, result) predicate) {
    Navigator.pushNamedAndRemoveUntil(context, routeName, predicate);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            NavigationHelper.pushNamedRoute(context, '/detail');
          },
          child: Text('Go to Detail Page'),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Page')),
      body: Center(
        child: Text('This is the Detail Page'),
      ),
    );
  }
}

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕哥6287543

手记
篇

粉丝

2

获赞与收藏

1

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空