【Flutter】路由详解

最新推荐文章于 2024-09-25 20:26:11 发布
最新推荐文章于 2024-09-25 20:26:11 发布
阅读量1.5k 收藏 25
点赞数 36
分类专栏： Flutter学习 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62511863/article/details/139220704
版权

🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月27日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

目录

路由介绍

路由，通俗地讲就是页面跳转。在 Flutter 中，我们通过 Navigator 组件来管理路由导航， Navigator 组件中提供了管理堆栈的方法。如：Navigator.push 跳转到某个路由和 Navigator.pop 返回到某个路由

Flutter 中给我们提供了两种配置路由跳转的方式：

  1. 普通路由
  2. 命名路由

普通路由

举例：比如我们现在想从 HomePage 组件跳转到 SearchPage 组件，应该如何使用普通路由实现呢？

  1. 我们先在 pages 目录下简单写一个 search.dart

    import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("搜索页面"),
      ),
      body: const Center(
        child: Text("搜索页面"),
      ),
    );
  }
}

  2. 在 home.dart 中引入 search.dart

    import '../search.dart';

  3. 在 HomePage 中通过下面方法跳转

    import 'package:flutter/material.dart';
import '../search.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(	//调用push
                MaterialPageRoute(builder: (context) {
                  return const SearchPage();
                }),
              );
            },
            child: const Text("跳转到搜索页面"),
          ),
        ],
      ),
    );
  }
}

  4. 点击按钮，就会自动跳转到搜索页面

    在这里插入图片描述

普通路由跳转传值

跳转传值的意思是在跳转页面的同时传一些值给要跳转的页面，比如页面标题什么的。

我们在 search.dart 中添加一个变量 title 来接收传值，并将其设置为页面导航栏的标题，同时，我们还增加了一个可以返回上个页面的浮动按钮

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  final String title; //用于接收传值
  const SearchPage({super.key, required this.title});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), //通过widget.来调用传过来的值
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //返回到上一页
          Navigator.pop(context);
        },
        child: const Icon(Icons.home),
      ),
      body: const Center(
        child: Text("搜索页面"),
      ),
    );
  }
}

当然，在跳转页面的时候就必须传入值了

在这里插入图片描述

命名路由

当跳转的页面多了之后，为了方便管理这些页面，这个时候我们就需要用到命名路由。

命名路由的使用很简单，具体步骤如下：

  1. 在 main.dart 中引入项目中所有需要跳转的页面，引入后，在其它文件中就不用再引入了，可以直接使用。比如我们有 search.dart 和 form.dart 两个页面需要跳转：

    import './pages/search.dart';
import './pages/form.dart';

    两个页面除了名字都是一样的

    import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  const SearchPage({super.key});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("搜一搜"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //返回到上一页
          Navigator.pop(context);
        },
        child: const Icon(Icons.home),
      ),
      body: const Center(
        child: Text("搜索页面"),
      ),
    );
  }
}

  2. 在 main.dart 中配置所有路由和初始路由，此时我们不用再配置 home 属性

    import 'package:flutter/material.dart';
import 'pages/tabs.dart';
import './pages/search.dart';
import './pages/form.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      routes: {
        "/": (context) => const Tabs(),
        "/search": (context) => const SearchPage(),
        "/form": (context) => const FormPage(),
      },
    );
  }
}

    这两种书写方式的效果是一样的

    "/form": (context) => const FormPage(title: "表单")

"/form": (context) {
  return const FormPage(title: "表单");
}

  3. 然后我们在 home.dart 中进行页面的跳转，不用引入，而且只需要一行代码

    import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/search");
            },
            child: const Text("命名路由跳转搜索页面"),
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/form");
            },
            child: const Text("命名路由跳转表单页面"),
          ),
        ],
      ),
    );
  }
}

命名路由跳转传值

具体步骤：

  1. 定义路由
  2. 配置 onGenerateRoute
  3. 定义页面接收 arguments 传参
  4. 跳转页面实现传参
  5. 打印验证传值是否成功

完整代码：

main.dart

import 'package:flutter/material.dart';
import 'pages/tabs.dart';
import './pages/search.dart';
import './pages/form.dart';

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

class MyApp extends StatelessWidget {
  //1. 定义路由
  Map routes = {
    "/": (context) => const Tabs(),
    "/search": (context, {arguments}) =>
        SearchPage(arguments: arguments), //定义arguments后, 需要传入arguments
    "/form": (context) => const FormPage(),
  };
  MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      //2. 配置onGenerateRoute，固定写法
      onGenerateRoute: (settings) {
        // 统一处理
        final String? name = settings.name;
        final Function? pageContentBuilder = routes[name];
        if (pageContentBuilder != null) {
          if (settings.arguments != null) {
            final Route route = MaterialPageRoute(
                builder: (context) =>
                    pageContentBuilder(context, arguments: settings.arguments));
            return route;
          } else {
            final Route route = MaterialPageRoute(
                builder: (context) => pageContentBuilder(context));
            return route;
          }
        }
        return null;
      },
    );
  }
}

search.dart

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  //3. 定义页面接收arguments传参
  final Map arguments;
  const SearchPage({super.key, required this.arguments});

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  void initState() {
    super.initState();
    //5. 打印传过来的值
    print(widget.arguments);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("搜一搜"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          //返回到上一页
          Navigator.pop(context);
        },
        child: const Icon(Icons.home),
      ),
      body: const Center(
        child: Text("搜索页面"),
      ),
    );
  }
}

home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              //4. 跳转页面实现传参
              Navigator.pushNamed(context, "/search", arguments: {
                "title": "搜索页面",
                "aid": 20,
              });
            },
            child: const Text("命名路由跳转传值"),
          ),
          const SizedBox(height: 30),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, "/form");
            },
            child: const Text("命名路由跳转表单页面"),
          ),
        ],
      ),
    );
  }
}

启动项目后，当我们点击第一个按钮时，终端打印出我们传递过去的参数，即为成功：

在这里插入图片描述

将命名路由单独抽离

  1. 在 lib 目录下新建 routers 文件夹，在文件夹下新建文件 router.dart，然后将 main.dart 中和路由有关的代码复制过来

    import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/search.dart';
import '../pages/form.dart';

//1. 定义路由
final Map routes = {
  "/": (context) => const Tabs(),
  "/search": (context, {arguments}) =>
      SearchPage(arguments: arguments), //定义arguments后, 需要传入arguments
  "/form": (context) => const FormPage(),
};

//2. 配置onGenerateRoute，固定写法
var onGenerateRoute = (settings) {
  // 统一处理
  final String? name = settings.name;
  final Function? pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
  return null;
};

  2. 修改 main.dart

    import 'package:flutter/material.dart';
import './routers/router.dart';	//引入

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      onGenerateRoute: onGenerateRoute,
    );
  }
}

返回上一级路由

Navigator.of(context).pop();

替换路由

一般在一个页面跳转后，我们点击返回按钮，只能返回到上一级页面。如果我们想让其直接返回到上上级页面，跳过上一级页面，这个时候就需要用到替换路由，我们需要将被跳过的页面中的跳转语句改为类似如下：

Navigator.of(context).pushReplacementNamed('/registerSecond');

返回到根路由

当跳转页面太多的时候，替换路由并不能让我们在某个页面直接返回到最开始的那个页面，这个时候我们就需要用到跟路由的知识。

首先，我们需要在需要跳转的页面中引入最开始那个页面，然后将其中的跳转语句改为类似如下：

//返回到根页面
Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (BuildContext context) {
  return const Tabs();
}), (route) => false);

Android和Ios使用同样风格的路由跳转

Material 组件库中提供了一个 MaterialPageRoute 组件，它可以使用和平台风格一致的路由切换动画，如在 iOS 上会左右滑动切换，而在 Android 上会上下滑动切换，CupertinoPageRoute 是 Cupertino 组件库提供的 iOS 风格的路由切换组件，如果在 Android 上也想使用左右切换风格，我们可以使用 CupertinoPageRoute。

具体步骤如下：

  1. 在 router.dart 中删掉 import 'package:flutter/material.dart';，然后引入 Cupertino 组件，即 import 'package:flutter/cupertino.dart';
  2. 将 router.dart 代码中的 MaterialPageRoute 改为 CupertinoPageRoute 即可
程序喵正在路上
关注
专栏目录
Flutter中的路由
wangzunkuan的博客
10-23 2126
1.概述 Flutter支持所有的路由场景，包括push页面、pop页面，以及页面间的参数传递等。flutter里面的路由可以分为如下两种。 静态路由：直接注册，不能传递参数。 动态路由：要自己构造实例，可以传递参数。 静态路由 动态路由 ...
Flutter 路由跳转
XueQiYa的博客
06-18 809
路由信息 void main() { runApp( new MaterialApp( home: new Screen1(), routes: <String, WidgetBuilder> { '/screen1': (BuildContext context) => new Screen1(), ...
Flutter—路由
大模型训练
02-15 1546
路由（Route）在移动开发中通常指页面（Page），这跟 Web 开发中单页应用的 Route 概念意义是相同的，Route 在 Android中 通常指一个 Activity，在 iOS 中指一个 ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作，而路由管理主要是指如何
Flutter路由
最新发布
且听真言
09-25 1224
路由作为一种页面切换的能力，非常重要。Flutter 中路由管理有几个重要的点。Navigator 1.0：Flutter 早期的路由系统，侧重于 移动端(Android/iOS) ，采用「命令式」编程风格，使用 Navigator.push() 和 Navigator.pop() 等方法来管理「路由栈」。
Flutter系列-flutter路由管理
路漫漫其修远兮，吾将上下而求索
10-20 6659
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.MaterialPageRoute1.3.Navigator1.4.路由传值1.5 命名路由1.6.命名路由参数传递1.7.适配二、路由钩子三、onUnknownRoute四、结尾 初识路由概念 路由的概念由来已久，包括网络路由、后端路由，到现在广为流行的前端路由。无论路由的概念如何应用，它的核心是一个路由映射表。比如：名字 detail 映射到 DetailPage 页面等。有了这个映射表之后，我们就可以方便的根据名字来完成路由的转发
flutter路由跳转
q7410p123的博客
03-25 643
/路由跳转(模块方式)Navigator.pushNamed(context, "/") //路由跳转(路由方式)Navigator.pop(context)//返回上级路由对象 widget获取/使用路由参数 (widget.id / widget.title) 使用${widget.title}
Flutter入门进阶之旅（十三）Flutter 路由
谢栋的专栏
02-20 2324
距离上一篇专栏已经过去好长时间了，小伙伴们都等急了吧，刚刚过了个年，笔者刚刚从吃喝睡的状态复苏回来，开始马不停蹄的进入到工作状态，题外话说的有点多，接下来我们开始进入我们本篇博文的主题Fluttter 路由。 在本篇博文更新之前就有好多读者给我留言说专栏里讲到的东西都只能在一个页面上操作，涉及到多页面的时候不知道该怎么跳页或者不知道怎么给下一个页传值，那这期分享确实来的有点晚，通过本次的分享，读...
Flutter路由的跳转、动画和传参详解（最简单）
08-26
Flutter路由的跳转、动画和传参详解 Flutter路由的跳转、动画和传参是Flutter框架中非常重要的知识点，這篇文章主要介绍了Flutter路由的跳转、动画和传参的相关知识，通过实例代码详细介绍了Flutter路由的实现。 ...
Flutter 局部路由实现详解
08-25
Flutter 局部路由实现详解 Flutter 局部路由实现详解是指在 Flutter 中实现局部路由的方法，通过 Navigator Widget 实现路由的跳转和管理。下面将详细介绍 Flutter 局部路由实现详解的知识点。 一、Navigator ...
Flutter路由封装技术详解
资源摘要信息:"Flutter路由封装" Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter基于Dart语言进行开发，具有高效、可移植和高度定制的特点。在Flutter开发中，页面跳转和...
Flutter之路由跳转(上)
可可的博客
04-07 4556
import 'package:flutter/material.dart'; class AnimationDemo extends StatefulWidget { @override _AnimationDemoState createState() => _AnimationDemoState(); } class _AnimationDemoState extends State<AnimationDemo> with SingleTickerProviderState
Flutter 路由
m0_71902318的博客
01-28 181
flutter 路由
Flutter路由跳转方式
海阔天空
05-09 1152
Flutter路由跳转方式
Flutter-路由
Emperor_huanzi 的博客
11-09 623
Flutter路由之fluro Fluro作为 一个Flutter的 企业级的路由框架 ，确实不错，可以解决多变的需求情况 ，是时候搞一波了 引入fluro fluro: ^1.5.1 基础配置路由 routes.dart 在routes.dart文件中配置路由，这里需要注意的事首页一定要用“/”配置 import 'package:flutter/material.dart'; impor...
Flutter 路由
qq_35342288的博客
12-14 485
路由       路由(Route)在移动开发中通常指页面（Page），这个web开发中单页应用的Route概念意义是相同的。在我们之前做Android/iOS原生开发的时候，要打开一个新的页面，可以通过一个Intent或者ViewController去进行页面的跳转。在原生app开发时除了这些方式也有一些优秀的的路由框架供我们选择，这里给大家推荐一下阿里的Android开源路由框架:   AR...
flutter 路由
weixin_44769718的博客
11-25 1978
路由页面配置 import 'package:flutter/material.dart'; import '../pages/Tabs.dart'; import '../pages/Form.dart'; import '../pages/Search.dart'; import '../pages/Product.dart'; import '../pages/ProductInfo.dart'; //配置路由 //arguments 未有参数的路由 final routes={ '/'
Flutter路由跳转（页面跳转）
qq_30005223的博客
02-21 4386
指定页面名称跳转Navigator.of(context).push(MaterialPageRoute() class TextPage extends StatelessWidget { const TextPage({Key? key}) : super(key: key); @override Widget build(BuildContext context) => MaterialApp( home: Scaffold( body: Cen
flutter路由封装
07-28
引用\[1\]:Fluro是一个用于Flutter的路由跳转框架，它提供了一些功能，如push、pop、replace和reset等，可以方便地进行页面之间的跳转和参数传递。通过使用Fluro，我们可以定义一个全局的路由对象类AppRouter，用来设置Fluro的配置和注册路由列表。同时，我们可以使用AppRouterList来记录各个路由的路径，并提供注册路由的方法。最后，通过导航工具类NavigationUtils，我们可以方便地进行静态函数调用，实现页面的跳转和参数传递。\[1\]\[2\] 在使用Fluro进行路由封装时，我们可以通过定义AppRouterList来注册路由，并在handle方法中指定对应的页面组件。例如，我们可以使用router.define方法来注册路由，并通过Handler的handlerFunc参数来指定对应的页面组件。在这个handlerFunc中，我们可以通过params参数来接收传递的参数。通过这种方式，我们可以实现对Flutter路由的封装。\[1\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [Flutter 封装fluro路由框架,提供路由,实现父子页面信息互传等功能](https://blog.csdn.net/iOSTianNan/article/details/108127040)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序喵正在路上

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值