CN118051294A - 一种基于Flutter的移动端混合页面的管理方法 - Google Patents

Abstract

本申请涉及应用管理技术领域，特别地涉及一种基于Flutter的移动端混合页面的管理方法。一种基于Flutter的移动端混合页面的管理方法，包括系统启动时初始化处理；多引擎模式下路由关系维护和通信机制的建立；Flutter页面堆栈实现方式和Flutter页面路由实现方式。本发明通过对混合页面堆栈管理，可以让用户无感知的在不同技术栈的页面自由跳转、参数传递与结果回传，从而对页面场景的切换进行优化，使用户能够有更好的应用使用体验。

Description

一种基于Flutter的移动端混合页面的管理方法

技术领域

本申请涉及应用管理技术领域，特别地涉及一种基于Flutter的移动端混合页面的管理方法。

背景技术

科技的进步带来了许多便利，移动设备的普及也对市场有了新的要求，用户对于夸平台的体验一致性愈发强烈，应用研发的过程中也将此作为重要的目标，Flutter作为一个开源的UI框架，能够较好的提供多平台一致性体验，但是一些特定场景依旧无法满足。

后续对于Flutter混合开发，Flutter官方提出了“Add2APP”方案，允许开发者将Flutter模块集成到现有原生应用中，但是并没有解决页面管理及路由问题，对某些业务场景并不能提供很好的支持。

发明内容

针对上述问题，本申请提供一种基于Flutter的移动端混合页面的管理方法，通过对混合页面堆栈管理，可以让用户无感知的在不同技术栈的页面自由跳转、参数传递与结果回传，从而对页面场景的切换进行优化，使用户能够有更好的应用使用体验。

本申请的技术方案为：一种基于Flutter的移动端混合页面的管理方法，包括：

S1、接收应用启动信号后，系统在执行配置的EntryPoint入口预热一个Flutter引擎，在Flutter内创建一个Flutter容器实例和一个Widget结构的路由栈，路由栈中包含多个Navigator路由，且路由栈能够维护当前引擎内所有的原生容器所对应的Flutter堆栈，保持原生容器与Navigator路由一一对应；

S2、接收应用页面交互的信号后，在单引擎模式下，进行跨原生页面的Flutter页面跳转切换，将执行Flutter引擎与Flutter容器的依附与分离操作，完成应用页面交互；

其中对Flutter引擎与Flutter容器Flutter容器的依附和分离操作为：

依附操作，创建Flutter视图并添加到原生界面中；将创建的Flutter视图与Flutter引擎一一关联，随后完成Flutter引擎就会附加到Flutter视图上，进而完成原生应用中嵌入Flutter视图；

分离操作，在原生应用退出或者不需要嵌入的Flutter视图的时候，断开Flutter视图与Flutter引擎的关联，并且销毁Flutter容器。

作为优选地，步骤S1中在Flutter内创建一个Flutter容器实例和一个Widget结构的路由栈”之后，还包括对Flutter界面的判断，具体步骤为：

Flutter框架在创建应用程序时会根据应用的配置设置默认的首页或根路由，应用默认以Flutter页面作为应用首个页面，自动判断路由导航到根路由配置的Flutter页面，并通过Navigator路由负责管理页面的堆栈，无需开发者介入；

如果在Flutter应用中Flutter页面不是根路由页面，则需要开发者手动导航至非根路由页面或者修改根页面，从而满足不同的导航需求。

作为优选地，步骤S2中接收应用页面交互的信号后，还包括有多引擎模式下对路由关系的维护，具体步骤为：

路由跳转时提供可选Flutter引擎，当未指定Flutter引擎时，将优先从当前引擎路由查找，失败则从全局查找，其中Flutter引擎由Flutter引擎组创建，不同的Flutter引擎的编号分别记为α_n，n=1，2，3······N，N为创建的Flutter引擎的总数量，且每个Flutter引擎α_n对应唯一一个引擎β_n，引擎β_n为Flutter引擎α_n对应的路径，每个Flutter引擎α_n对应数个Flutter容器，γ_m为Flutter容器对应的路径，m=1，2，3······M，M为Flutter容器的总数量，构建从Flutter引擎到每一个Flutter容器的路径ID_m=α_n+β_n+γ_m，通过ID_m可全局定位到系统任意的路由页面。

作为优选地，在多引擎模式下对路由关系进行维护时，还包括多引擎模式下的共享通信，具体步骤为：

建立一个共享内存区域，当系统中的任何一个部分进行路由栈数据操作时，这些操作会同步映射到共享内存区域，通过FFI通道在Flutter和原生进程之间共享，Flutter和原生进程通过共享内存区域的地址来访问和操作相同的数据；

所述共享内存区域存储有路由栈数据，还保存应用的全局数据，全局数据包括应用的状态和配置信息，且共享内存区域设置有持久化接口，允许将这些数据永久保存在存储介质中；

并且在debug模式下，由于共享内存区域存储了路由栈数据，因此可以通过共享内存区域的数据来恢复路由栈。

作为优选地，S1中通过路由栈维护当前引擎内所有的原生容器所对应的Flutter堆栈的具体步骤为：

在每个Flutter引擎α_n都设置一个路由栈，路由栈δ_n为路由栈对应的编号，用于管理页面，且其中包含多个Navigator路由实例，构成路由栈-Navigator路由列表，每个Navigator路由都代表一个页面堆栈；接收需要显示的Navigator路由，遍历路由栈-Navigator路由列表，查找对应的路由栈δ_n，通过改变路由栈δ_n对应的index来控制当前显示的Navigator路由，并且将已经显示的Navigator路由进行隐藏，从而通过改变路由栈δ_n的index来对应原生容器的显示和隐藏；

将路由栈δ_n中多个Navigator路由实例记为子类，建立子类列表，接收原生容器展示信号，在需要展示的地方，建立一个新的Navigator路由，更新路由栈δ_n对应的子类属性，添加原生容器对应的Navigator路由到子类列表中，完成对原生容器的展示，当接收销毁信号的时候，同样更新路由栈δ_n对应的子类属性，从子类列表中移除对应的Navigator路由以销毁原生容器；

定义GlobalKey作为Navigator路由的唯一标识key，在创建Navigator路由时将定义的GlobalKey分配给Navigator路由的key属性，根据GlobalKey来获取对应的Navigator路由State，进而执行页面跳转和返回的操作，确保在整个应用程序中，使用GlobalKey时保持其唯一性，以便准确地标识和操作对应的Navigator路由，确保Flutter中的Navigator路由与原生容器之间一一对应。

作为优选地，步骤S2进行跨原生页面的Flutter页面跳转切换时，还包括Flutter页面路由实现的具体步骤为：

创建一个名为MyContainerWidget的自定义小部件，其中包含了一个Navigator路由组件，这个自定义小部件通过Flutter提供的Navigator路由大大简化了页面路由的实现，自定义小部件使用onGenerateRoute方法提供路由工厂配置自动实现路由跳转；ContainerWidget通过监听Navigator路由Observer来记录ContainerWidget路由页面的数量，通过监听页面压栈和出栈操作，动态地追踪页面数量的变化，WidgetsBindingObserver的ChangeMetrics方法被利用来监测页面数量，当页面数量为零时，可以触发对Flutter堆栈和原生容器的销毁。

本申请具有以下优点：

1、本发明通过对混合页面堆栈管理，可以让用户无感知的在不同技术栈的页面自由跳转、参数传递与结果回传，从而对页面场景的切换进行优化，使用户能够有更好的应用使用体验；

2、本发明还包括对Flutter多引擎或多进程运行场景的优化，实现了跨进程、跨引擎的路由管理方案，可支持多个Flutter引擎及不同进程之间的混合页面路由与通信，还针对路由操作、事件通知等场景简化了项目接入以及使用方式。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图示出的结构获得其他的附图；

图1为本申请实施例中的混合页面管理系统组成框图；

图2为本申请实施例中的引擎内容容器对应关系图；

图3为本申请实施例中的单引擎模式路由流程图；

图4为本申请实施例中的多引擎模式引擎与容器关系图；

图5为本申请实施例中的引擎-容器-Flutter堆栈关系图；

图6为本申请实施例中的共享内存机制流程图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请部分实施例进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。然而，本领域的普通技术人员可以理解，在本申请的各实施例中，为了使读者更好地理解本申请而提出了许多技术细节。但是，即使没有这些技术细节和基于以下各实施例的种种变化和修改，也可以实现本申请所要求保护的技术方案。

实施例

如图2和图3所示，本申请的技术方案为：一种基于Flutter的移动端混合页面的管理方法，包括：

S1、接收应用启动信号后，系统在执行配置的EntryPoint入口预热一个Flutter引擎，在Flutter内创建一个Flutter容器实例和一个Widget结构的路由栈，路由栈中包含多个Navigator路由，且路由栈用于维护当前引擎内所有的原生容器所对应的Flutter堆栈，原生容器与Navigator路由一一对应；

S2、接收应用页面交互的信号后，在单引擎模式下，实现跨原生页面的Flutter页面跳转切换，将执行Flutter引擎与Flutter容器的依附与分离操作，完成应用页面交互；

其中对Flutter引擎与Flutter容器Flutter容器的依附和分离操作为：

依附操作，创建Flutter视图并添加到原生界面中；将创建的Flutter视图与Flutter引擎一一关联，随后完成Flutter引擎就会附加到Flutter视图上，进而完成原生应用中嵌入Flutter视图；

其中Flutter视图是一个用于承载Flutter引擎渲染内容的视图。它通常是原生应用程序中的一个部分，用于显示由Flutter引擎生成的用户界面。在Flutter的工作原理中，Flutter视图实际上是一个嵌入式视图，负责将Flutter引擎的输出集成到原生应用程序中。

分离操作，在原生应用退出或者不需要嵌入的Flutter视图的时候，断开Flutter视图与Flutter引擎的关联，并且销毁Flutter容器。

如图1所示，本发明主要涉及原生（Android或IOS）、Flutter、H5三部分，主要由Flutter容器管理，容器管理、路由管理、数据总线等模块组成，对于不同模块的功能介绍为：

引擎管理：负责当前应用中的Flutter引擎管理，包括创建、销毁、查找等；容器管理：负责维护管理当前应用中容器，包括Flutter容器、WebView容器、原生容器；生命周期管理：负责实时监控应用及原生容器的生命周期并分发给感兴趣的业务模块；路由管理：负责混合页面堆栈的维护，以及路由跳转、参数传递以及结果回传等操作；数据总线：提供消息注册，分发等数据通信的功能。

其中还包括有对步骤S1中还包括对Flutter界面的判断，具体步骤为：

Flutter框架在创建应用程序时会根据应用的配置设置默认的首页或根路由，应用默认以Flutter页面作为应用首个页面，自动判断路由导航到根路由配置的Flutter页面，并通过Navigator路由负责管理页面的堆栈，无需开发者介入，当应用进入的页面为应用首页，则表示Flutter框架在创建应用程序时，建立了准确的很路由路径，应用页面显示正常；

如果在Flutter应用中Flutter页面不是根路由页面，则需要开发者手动导航至非根路由页面或者修改根页面，从而满足不同的导航需求，需要补充的是，应用在使用的时候，页面出现崩溃的情况，开发者需要手动导航，修复出现显示错误的地方，从而在不同导航要求都能够正常显示。

本发明通过对混合页面堆栈管理，可以让用户无感知的在不同技术栈的页面自由跳转、参数传递与结果回传，从而对页面场景的切换进行优化，使用户能够有更好的应用使用体验。

如图4和图5所示，还包括有多引擎模式下对路由关系的维护，具体步骤为：

路由跳转时提供可选Flutter引擎，当未指定Flutter引擎时，将优先从当前引擎路由查找，失败则从全局查找，其中Flutter引擎由Flutter引擎组创建，不同的Flutter引擎的编号分别记为α_n，n=1，2，3······N，N为创建的Flutter引擎的总数量，且每个Flutter引擎α_n对应唯一一个引擎β_n，引擎β_n为Flutter引擎α_n对应的路径，每个Flutter引擎α_n对应数个Flutter容器，γ_m为Flutter容器对应的路径，m=1，2，3······M，M为Flutter容器的总数量，构建从Flutter引擎到每一个Flutter容器的路径ID_m=α_n+β_n+γ_m，通过ID_m可全局定位到系统任意的路由页面，从而当需要对任一页面进行定位的时候，直接遍历所有路径ID_m，程序能够提取路径ID_m内存储的α_n+β_n+γ_m，从而准确快速地定位到目标页面。

如图6所示，还包括多引擎模式下的共享通信，具体步骤为：

建立一个共享内存区域，当系统中的任何一个部分进行路由栈数据操作时，这些操作会同步映射到共享内存区域，通过FFI通道在Flutter和原生进程之间共享，Flutter和原生进程通过共享内存区域的地址来访问和操作相同的数据；在原生层面，stack-info堆栈信息和stack-address地址可能是用于操作堆栈信息和内存地址的工具或方法，这些信息通常在原生层处理，可能被用来获取内存地址或操作堆栈，用于共享数据。

所述共享内存区域存储有路由栈数据，还保存应用的全局数据，全局数据包括应用的状态和配置信息，且共享内存区域设置有持久化接口，允许将这些数据永久保存在存储介质中；这确保了不同部分对路由栈的操作具有一致性，保持了路由栈的同步状态，共享内存区域不仅存储了路由栈数据，还用于保存应用的全局数据，这些全局数据可能包括应用的状态、配置信息等，并且，共享内存提供了持久化接口，允许将这些数据永久保存在存储介质中，以便在应用关闭后进行恢复。

并且在debug模式下，由于共享内存区域存储了路由栈数据，因此可以通过共享内存区域的数据来恢复路由栈。

本发明针对Flutter多引擎或多进程运行场景，本系统实现了跨进程、跨引擎的路由管理方案，可支持多个Flutter引擎及不同进程之间的混合页面路由与通信。

如图2所示，在S1中Flutter页面堆栈实现改变的具体步骤为：

在每个Flutter引擎α_n都设置一个路由栈，路由栈δ_n为路由栈对应的编号，用于管理页面，且其中包含多个Navigator路由实例，构成路由栈-Navigator路由列表，每个Navigator路由都代表一个页面堆栈；接收需要显示的Navigator路由，遍历路由栈-Navigator路由列表，查找对应的路由栈δ_n，通过改变路由栈δ_n对应的index来控制当前显示的Navigator路由，并且将已经显示的Navigator路由进行隐藏，从而通过改变路由栈δ_n的index来对应原生容器的显示和隐藏；

将路由栈δ_n中多个Navigator路由实例记为子类，建立子类列表，接收原生容器展示信号，在需要展示的地方，建立一个新的Navigator路由，更新路由栈δ_n对应的子类属性，添加原生容器对应的Navigator路由到子类列表中，完成对原生容器的展示，当接收销毁信号的时候，同样更新路由栈δ_n对应的子类属性，从子类列表中移除对应的Navigator路由以销毁原生容器；

定义GlobalKey作为Navigator路由的唯一标识key，在创建Navigator路由时将定义的GlobalKey分配给Navigator路由的key属性，根据GlobalKey来获取对应的Navigator路由State，进而执行页面跳转和返回的操作，确保在整个应用程序中，使用GlobalKey时保持其唯一性，以便准确地标识和操作对应的Navigator路由，确保Flutter中的Navigator路由与原生容器之间一一对应。

还包括Flutter页面路由实现的具体步骤为：

创建一个名为MyContainerWidget的自定义小部件，其中包含了一个Navigator路由组件，这个自定义小部件通过Flutter提供的Navigator路由大大简化了页面路由的实现，自定义小部件使用onGenerateRoute方法提供路由工厂配置自动实现路由跳转；ContainerWidget通过监听Navigator路由Observer来记录ContainerWidget路由页面的数量，通过监听页面压栈和出栈操作，动态地追踪页面数量的变化，WidgetsBindingObserver的ChangeMetrics方法被利用来监测页面数量，当页面数量为零时，可以触发对Flutter堆栈和原生容器的销毁，这个方法可以帮助在Flutter页面堆栈为空时，自动地触发与原生容器的关联销毁，以便与原生应用的生命周期保持同步，总体来说：这个方案利用了Flutter的Navigator路由和Observer机制，以及WidgetsBindingObserver的生命周期监听，在容器中动态地管理页面路由，并能够在需要时与原生容器进行有效地交互和同步。

本发明针对路由操作、事件通知等场景简化了项目接入以及使用方式。

应当理解的是，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，而所有这些改进和变换都应属于本申请所附权利要求的保护范围。本说明书中未作详细描述的部分属于本领域专业技术人员公知的现有技术。

Claims (6)

1.一种基于Flutter的移动端混合页面的管理方法，其特征在于，包括：

S1、接收应用启动信号后，系统在执行配置的EntryPoint入口预热一个Flutter引擎，在Flutter内创建一个Flutter容器实例和一个Widget结构的路由栈，路由栈中包含多个Navigator路由，且路由栈能够维护当前引擎内所有的原生容器所对应的Flutter堆栈，保持原生容器与Navigator路由一一对应；

S2、接收应用页面交互的信号后，在单引擎模式下，进行跨原生页面的Flutter页面跳转切换，将执行Flutter引擎与Flutter容器的依附与分离操作，完成应用页面交互；

其中对Flutter引擎与Flutter容器Flutter容器的依附和分离操作为：

依附操作，创建Flutter视图并添加到原生界面中；将创建的Flutter视图与Flutter引擎一一关联，随后完成Flutter引擎就会附加到Flutter视图上，进而完成原生应用中嵌入Flutter视图；

分离操作，在原生应用退出或者不需要嵌入的Flutter视图的时候，断开Flutter视图与Flutter引擎的关联，并且销毁Flutter容器。

2.如权利要求1所述的一种基于Flutter的移动端混合页面的管理方法，其特征在于，步骤S1中在Flutter内创建一个Flutter容器实例和一个Widget结构的路由栈”之后，还包括对Flutter界面的判断，具体步骤为：

Flutter框架在创建应用程序时会根据应用的配置设置默认的首页或根路由，应用默认以Flutter页面作为应用首个页面，自动判断路由导航到根路由配置的Flutter页面，并通过Navigator路由负责管理页面的堆栈，无需开发者介入；

如果在Flutter应用中Flutter页面不是根路由页面，则需要开发者手动导航至非根路由页面或者修改根页面，从而满足不同的导航需求。

3.如权利要求1所述的一种基于Flutter的移动端混合页面的管理方法，其特征在于，步骤S2中接收应用页面交互的信号后，还包括有多引擎模式下对路由关系的维护，具体步骤为：

路由跳转时提供可选Flutter引擎，当未指定Flutter引擎时，将优先从当前引擎路由查找，失败则从全局查找，其中Flutter引擎由Flutter引擎组创建，不同的Flutter引擎的编号分别记为α_n，n=1，2，3······N，N为创建的Flutter引擎的总数量，且每个Flutter引擎α_n对应唯一一个引擎β_n，引擎β_n为Flutter引擎α_n对应的路径，每个Flutter引擎α_n对应数个Flutter容器，γ_m为Flutter容器对应的路径，m=1，2，3······M，M为Flutter容器的总数量，构建从Flutter引擎到每一个Flutter容器的路径ID_m=α_n+β_n+γ_m，通过ID_m可全局定位到系统任意的路由页面。

4.如权利要求3所述的一种基于Flutter的移动端混合页面的管理方法，其特征在于，在多引擎模式下对路由关系进行维护时，还包括多引擎模式下的共享通信，具体步骤为：

建立一个共享内存区域，当系统中的任何一个部分进行路由栈数据操作时，这些操作会同步映射到共享内存区域，通过FFI通道在Flutter和原生进程之间共享，Flutter和原生进程通过共享内存区域的地址来访问和操作相同的数据；

所述共享内存区域存储有路由栈数据，还保存应用的全局数据，全局数据包括应用的状态和配置信息，且共享内存区域设置有持久化接口，允许将这些数据永久保存在存储介质中；

并且在debug模式下，由于共享内存区域存储了路由栈数据，因此可以通过共享内存区域的数据来恢复路由栈。

5.如权利要求1所述的一种基于Flutter的移动端混合页面的管理方法，其特征在于，S1中通过路由栈维护当前引擎内所有的原生容器所对应的Flutter堆栈的具体步骤为：

在每个Flutter引擎α_n都设置一个路由栈，路由栈δ_n为路由栈对应的编号，用于管理页面，且其中包含多个Navigator路由实例，构成路由栈-Navigator路由列表，每个Navigator路由都代表一个页面堆栈；接收需要显示的Navigator路由，遍历路由栈-Navigator路由列表，查找对应的路由栈δ_n，通过改变路由栈δ_n对应的index来控制当前显示的Navigator路由，并且将已经显示的Navigator路由进行隐藏，从而通过改变路由栈δ_n的index来对应原生容器的显示和隐藏；

将路由栈δ_n中多个Navigator路由实例记为子类，建立子类列表，接收原生容器展示信号，在需要展示的地方，建立一个新的Navigator路由，更新路由栈δ_n对应的子类属性，添加原生容器对应的Navigator路由到子类列表中，完成对原生容器的展示，当接收销毁信号的时候，同样更新路由栈δ_n对应的子类属性，从子类列表中移除对应的Navigator路由以销毁原生容器；

定义GlobalKey作为Navigator路由的唯一标识key，在创建Navigator路由时将定义的GlobalKey分配给Navigator路由的key属性，根据GlobalKey来获取对应的Navigator路由State，进而执行页面跳转和返回的操作，确保在整个应用程序中，使用GlobalKey时保持其唯一性，以便准确地标识和操作对应的Navigator路由，确保Flutter中的Navigator路由与原生容器之间一一对应。

6.如权利要求1所述的一种基于Flutter的移动端混合页面的管理方法，其特征在于，步骤S2进行跨原生页面的Flutter页面跳转切换时，还包括Flutter页面路由实现的具体步骤为：

创建一个名为MyContainerWidget的自定义小部件，其中包含了一个Navigator路由组件，自定义小部件使用onGenerateRoute方法提供路由工厂配置自动实现路由跳转；ContainerWidget通过监听Navigator路由Observer来记录ContainerWidget路由页面的数量，通过监听页面压栈和出栈操作，动态地追踪页面数量的变化，WidgetsBindingObserver的ChangeMetrics方法被利用来监测页面数量，当页面数量为零时，可以触发对Flutter堆栈和原生容器的销毁。