Flutter超好用的路由库-fluro

请添加图片描述

文章目录

  • fluro的介绍
    • fluro简介
    • 安装和导入
    • 路由配置
    • 导航到路由
    • 参数传递
  • fluro的典型使用
    • 创建路由管理类
      • 代码解释
      • 例子小结
    • 初始化路由
    • 导航到路由
  • 总结

fluro的介绍

fluro简介

fluro是一个流行的Flutter插件,用于实现高级路由管理。它提供了灵活的路由配置和导航功能,支持命名路由、参数传递、路由拦截、动画效果等,使得在Flutter应用程序中管理页面导航变得更加简单和可扩展。下面是对fluro插件的详细介绍:

安装和导入

您可以通过在pubspec.yaml文件中添加fluro依赖项来安装fluro插件。

fluro: ^2.0.5

然后,在需要使用fluro的文件中,通过import 'package:fluro/fluro.dart';导入库。

路由配置

使用fluro,您可以通过创建FluroRouter实例来配置路由。通过调用define方法,您可以为每个页面指定一个唯一的路由名称,并关联一个处理程序(Handler)。

final router = FluroRouter();
router.define('/home', handler: Handler(handlerFunc: (context, parameters) => HomeScreen()));
router.define('/profile/:id', handler: Handler(handlerFunc: (context, parameters) {final id = parameters['id']?.first;return ProfileScreen(userId: id);
}));

上面的示例代码演示了如何使用define方法为HomeScreenProfileScreen页面配置路由。在第二个路由中,:id表示一个参数,可以在路由中传递并在处理程序中使用。

导航到路由

使用fluro,您可以使用router.navigateTo方法导航到已配置的命名路由。您可以在导航时传递参数,并指定导航的转场动画。

router.navigateTo(context, '/home');
router.navigateTo(context, '/profile/123', transition: TransitionType.fadeIn);

在上面的示例中,我们分别导航到/home/profile/123的命名路由。TransitionType.fadeIn指定了导航时的转场动画效果。

参数传递

fluro支持在路由中传递参数,参数可以在处理程序中获取并使用。您可以使用RouteParams类来访问路由参数。

router.define('/profile/:id', handler: Handler(handlerFunc: (context, parameters) {final id = parameters['id']?.first;return ProfileScreen(userId: id);
}));

在上面的示例中,:id表示一个参数,可以在路由中传递。在处理程序中,我们使用parameters参数来获取路由参数,并将其传递给ProfileScreen

路由拦截:
fluro允许您添加路由拦截器,以在导航到特定路由之前执行一些操作。拦截器可以用于身份验证、权限检查等。

final authMiddleware = FluroMiddleware();
authMiddleware.handler = (context, parameters) async {if (!AuthService.isLoggedIn) {router.navigateTo(context, '/login', replace: true);}
};router.define('/profile/:id', handler: Handler(handlerFunc: (context, parameters) {final id = parameters['id']?.first;return ProfileScreen(userId: id);
}), middleware: [authMiddleware]);

在上面的示例中,我们创建了一个路由拦截器,并将其应用于/profile/:id的路由。如果用户未登录,则拦截器会导航到登录页面。

动画效果:
fluro支持在路由导航时应用自定义的转场动画效果。您可以使用TransitionType枚举提供的各种转场动画效果,如TransitionType.fadeIn、TransitionType.cupertino等。

router.navigateTo(context, '/profile/123', transition: TransitionType.fadeIn);

在上面的示例中,我们将导航到`/profile/123路由,并指定了转场动画效果为淡入(fadeIn)。

fluro的典型使用

在使用Fluro库时,可以通过以下步骤来初始化并实现全局的路由管理:

创建路由管理类

在项目中创建一个单例的路由管理类,用于管理和处理路由相关的操作。


import 'package:fluro/fluro.dart';class AppRouter {static final AppRouter _instance = AppRouter._internal();factory AppRouter() {return _instance;}AppRouter._internal();static FluroRouter router = FluroRouter();// 添加路由处理方法void defineRoutes() {router.define('/home', handler: homeHandler);// 定义其他路由...}// 定义路由处理器final homeHandler = Handler(handlerFunc: (BuildContext? context, Map<String, dynamic> params) {return HomePage();},);
}

在上述示例中,我们创建了一个名为AppRouter的路由管理类,其中定义了一个FluroRouter实例和一系列路由处理方法。在defineRoutes方法中,我们可以使用router.define方法来定义路由和相应的处理器。

代码解释

例子使用了单例模式来确保在整个应用程序中只有一个实例被创建,并且多个页面引入该类时可以保证调用的是同一个实例。

让我们详细解释一下这句代码的含义:

static关键字:
static`关键字修饰,这意味着该成员不依赖于类的实例,可以直接通过类名进行访问。

final关键字:
final关键字用于声明一个只能被赋值一次的变量。在这里,_instance被声明为final`,表示它在被赋值后不能再被修改。

AppRouter类型:
_instance是一个AppRouter类型的变量,它用于存储AppRouter`类的唯一实例。

_internal()命名的私有构造函数:
_internal是一个私有构造函数的命名,它不能被外部直接调用。这意味着其他地方无法通过AppRouter._internal()来创建AppRouter`的实例。

单例模式的实现:
在这里,_instance被声明为static final,并在声明时通过AppRouter._internal()调用私有构造函数来创建唯一的实例。由于私有构造函数无法被外部调用,因此只有在类内部才能创建实例。

例子小结

通过将构造函数私有化、使用static final变量来存储唯一实例,以及通过静态方法来访问该实例,代码确保了在整个应用程序中只有一个AppRouter实例被创建。多个页面引入该类时,可以通过AppRouter()来获取同一个实例,从而保证调用的是同一个实例。这符合单例模式的概念,实现了全局共享的路由管理器。

初始化路由

在应用程序的入口处,通常是main.dart文件中,进行路由的初始化和配置。

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';void main() {// 初始化路由FluroRouter router = AppRouter.router;AppRouter().defineRoutes();// 启动应用程序runApp(MyApp());
}

在上述示例中,我们首先通过AppRouter.router来获取FluroRouter实例,然后调用defineRoutes方法来定义路由。这样就完成了路由的初始化和配置。

导航到路由

在需要导航到某个路由的地方,可以使用FluroRouter实例来执行路由导航操作。

AppRouter.router.navigateTo(context, '/home');

在上述示例中,我们使用navigateTo方法来导航到'/home'路由。可以根据实际需求传递参数等。
通过以上步骤,我们可以在整个应用程序中使用AppRouter.router来访问全局的路由管理器。这样,我们就可以在任何地方执行路由导航和管理操作,而无需显式地传递路由管理器的实例。

请注意,上述示例仅为演示目的,并未涉及完整的Fluro配置和使用方法。在实际开发中,还需要根据具体需求配置路由的拦截器、传递参数、处理动态路由等。可以参考Fluro库的官方文档和示例代码,以获取更详细的使用说明和示例。

总结

通过使用fluro插件,您可以更轻松地配置和管理Flutter应用程序中的路由。它提供了灵活的路由配置方式、参数传递、路由拦截和动画效果等功能,使得应用程序的导航管理变得更加简单和可扩展。无论是构建中小型应用程序还是大型应用程序,fluro都是一个强大而受欢迎的选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/84929.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

笔试面试相关记录(5)

&#xff08;1&#xff09;给定一个字符串&#xff0c;含有大写、小写字母&#xff0c;空格&#xff0c;数字&#xff0c;需要将其变为满足如下条件&#xff1a; 所有的数字需要换成空格&#xff0c;并且字符串的头尾不包含空格&#xff0c;且整个字符串不包含连续的两个空格。…

Maven的介绍和使用

Maven的作用 项目构建 依赖管理&#xff1a;避免资源间版本冲突问题 统一开发结构&#xff1a;提供统一的项目结构 Maven的使用 下载完压缩包之后放在合适的目录下&#xff0c;其中apache-maven-3.8.8文件夹是安装的maven&#xff0c;下面的repository是本地仓库&#xff…

月木学途开发 6.网址模块

概述 效果图 数据库设计 网站类型表 DROP TABLE IF EXISTS website; CREATE TABLE website (websiteId int(11) NOT NULL AUTO_INCREMENT,websiteImg longtext,websiteName varchar(255) DEFAULT NULL,websiteUrl longtext,websiteDesc varchar(255) DEFAULT NULL,websiteTy…

Python经典练习题(一)

文章目录 &#x1f340;第一题&#x1f340;第二题&#x1f340;第三题&#x1f340;第四题&#x1f340;第五题 &#x1f340;第一题 有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; 这里我们使用…

HTTP 错误 401.3 - Unauthorized 由于 Web 服务器上此资源的访问控制列表(ACL)配置或加密设置,您无权查看此目录或页面。

用IIS 发布网站&#xff0c;不能访问且出现错误&#xff1a;HTTP 错误 401.3 - Unauthorized 由于Web服务器上此资源的访问控制列表(ACL)配置或加密设置。您无权查看此目录或页面 问题截图&#xff1a; 问题描述&#xff1a;HTTP 错误 401.3 - 未经授权&#xff1a;访问由于 A…

[RF学习记录][参数读取]从yaml文件读取参数变量

robotframework支持从yaml文件读取变量&#xff0c;对于比较多的参数&#xff0c;可以在yaml文件中定义好&#xff0c;在robot脚本中引用 1、定义yaml文件 文件内容如下&#xff0c;注意&#xff0c;变量和变量值之间要以4个字符分开 yaml_demo_name: tester traing_gpt_…

RabbitMQ 消息应答

每日一句 物是人非事事休,欲语泪先流。 概述 为了保证消息在发送过程中不丢失,RabbitMQ引入了消息应答机制, 消费者在接收到消息并且处理该消息后,告诉RabbitMQ它已经处理了,RabbitMQ可以把消息删除了。 自动应答 消息发送后立即被认为已经传送成功,这种模式需要在…

Python150题day08

2.基础语法篇 2.1 if 条件句 ①单个条件分支 使用input函数接收用户的输入&#xff0c;如果用户输入的整数是偶数&#xff0c;则使用print函数输出"你输入的整数是:{value],它是偶数”&#xff0c;[value]部分要替换成用户的输入。 解答: value input("请输⼊⼀…

Guava Cache介绍-面试用

一、Guava Cache简介 1、简介 Guava Cache是本地缓存&#xff0c;数据读写都在一个进程内&#xff0c;相对于分布式缓存redis&#xff0c;不需要网络传输的过程&#xff0c;访问速度很快&#xff0c;同时也受到 JVM 内存的制约&#xff0c;无法在数据量较多的场景下使用。 基…

苹果开发者账号注册及证书生成方法详解

转载&#xff1a;注册苹果开发者账号的方法 在2020年以前&#xff0c;注册苹果开发者账号后&#xff0c;就可以生成证书。 但2020年后&#xff0c;因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号&#xff0c;所以需要缴费才能创建ios证书了。 所以新政策…

什么是葡萄酒结构,结构型葡萄酒好吗?

葡萄酒爱好者使用许多复杂的术语来描述葡萄酒的味道&#xff0c;有些是不言自明的&#xff0c;有些则有点模糊。如果你不是葡萄酒专家&#xff0c;你可能很难理解这个葡萄酒术语的全部含义。其中一个术语是葡萄酒结构&#xff0c;那么葡萄酒结构是什么意思呢&#xff1f;而结构…

电路的基本定律——基尔霍夫定律

基尔霍夫定律 &#x1f391;预备知识&#x1f391;基尔霍夫电流定律(KCL)&#x1f383;基尔霍夫电流定律的本质&#xff1a;节点上电荷具有连续性(不会突变)&#x1f383;基尔霍夫电流定律的推广&#xff1a; &#x1f391;基尔霍夫的电压定律(KVL)&#x1f383;基尔霍夫电压定…

在Windos 10专业版搭建Fyne(Go 跨平台GUI)开发环境

目录 在Windos 10专业版搭建Fyne&#xff08;Go 跨平台GUI&#xff09;开发环境一 Fyne 和 MSYS2简介1.1 Fyne1.2 MSYS2 二 安装 MSYS22.1 下载MSYS22.2 安装2.3 环境变量设置2.4 检测安装环境 三 参考文档 在Windos 10专业版搭建Fyne&#xff08;Go 跨平台GUI&#xff09;开发…

zabbix学习2--zabbix6.x高可用

文章目录 1. server高可用-默认HA2. 访问高可用 1. server高可用-默认HA 1.部署zabbix单节点后&#xff0c;配置添加HANodeName和NodeAddress即为HA架构 2.zabbix1故障后切换zabbix2使用 3.浏览器访问主机1&#xff0c;使用主机1php前端连接mysql后zabbix2提供后台服务--------…

算法-单词搜索 II

算法-单词搜索 II 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/word-search-ii/description/?envTypestudy-plan-v2&envIdtop-interview-150 1.2 题目描述 2 DFS 2.1 解题思路 每个格子往上下左右四个方向DFS&#xff0c;拼接后的单词如果在答案集中&…

【若依框架2】前后端分离版本添加功能页

在VSCode的src/views下新建个文件平example,在example下创建test文件夹&#xff0c;在test里创建index.vue文件 <template> <h1>Hello world</h1> </template><script> export default {name: "index" } </script><style s…

2023/9/20总结

maven maven本质是 一个项目管理工具 将项目开发 和 管理过程 抽象成 一个项目对象模型&#xff08;POM&#xff09; POM &#xff08;Project Object Model&#xff09; 项目对象模型 作用 项目构建 提供标准的自动化 项目构建 方式依赖管理 方便快捷的管理项目依赖的资源…

C++【个人笔记1】

1.C的初识 1.1 简单入门 #include<iostream> using namespace std; int main() {cout << "hello world" << endl;return 0; } #include<iostream>; 预编译指令&#xff0c;引入头文件iostream.using namespace std; 使用标准命名空间cout …

springboot整合返回数据统一封装

1、MagCode&#xff0c;错误码枚举类 package com.mgx.common.enums;import lombok.*; import lombok.extern.slf4j.Slf4j;/*** 错误码* author mgx*/ Slf4j NoArgsConstructor AllArgsConstructor public enum MsgCode {/*** 枚举标识&#xff0c;根据业务类型进行添加*/Code…

PostgreSQL 数据库实现公网远程连接

文章目录 前言1. 安装postgreSQL2. 本地连接postgreSQL3. Windows 安装 cpolar4. 配置postgreSQL公网地址5. 公网postgreSQL访问6. 固定连接公网地址7. postgreSQL固定地址连接测试 前言 PostgreSQL是一个功能非常强大的关系型数据库管理系统&#xff08;RDBMS&#xff09;,下…