[发明专利]页面组件布局方法、装置、电子设备及可读存储介质

说明书

本公开的实施例提供了一种页面组件布局方法、装置、电子设备及可读存储介质。所述方法包括：在目标页面内的目标位置处创建Flutter组件；在所述Flutter组件中创建组件包裹器；将目标web组件渲染至所述组件包裹器内，以完成页面组件布局。本公开的实施例可以实现页面内任意位置的Flutter组件和web组件的混排，提升了Flutter Web适配效率，又能保证Web的交互习惯。

技术领域

本公开的实施例涉及页面组件布局技术领域，尤其涉及一种页面组件布局方法、装置、电子设备及可读存储二级制。

背景技术

基于Flutter的跨端解决方案越来越受关注，为了实现多端复用提效最大化，各生产厂商纷纷在做Flutter Web(World Wide Web，万维网)(Flutter跨端技术在web侧的延伸)的实践。而若能在FlutterWeb中实现任意位置的Flutter Widget和Web组件混排(即任意Widget节点位置插入Web组件)，将会大大提高Web适配效率，同时能保证web侧(尤其是PC(personal computer，个人计算机))的交互习惯(如日期选择器、下拉框)。

在现有技术中，通常是在Web中预设挂载节点，在Flutter中直接调用DOM(Document Object Model，文档对象模型)API(Application Programming Interface，应用程序编程接口)插入Web组件。

上述方式只能在“预设固定的挂载节点”实现Flutter组件和web组件的混排，而并不能实现任意位置的Flutter Widget和Web组件混排。

发明内容

本公开的实施例提供一种页面组件布局方法、装置、电子设备及可读存储介质，用以实现任意位置的Flutter Widget和Web组件混排。

根据本公开的实施例的第一方面，提供了一种页面组件布局方法，包括：

在目标页面内的目标位置处创建Flutter组件；

在所述Flutter组件中创建组件包裹器；

将目标web组件渲染至所述组件包裹器内，以完成页面组件布局。

根据本公开的实施例的第二方面，提供了一种页面组件布局装置，包括：

Flutter组件创建模块，用于在目标页面内的目标位置处创建Flutter组件；

组件包裹器创建模块，用于在所述Flutter组件中创建组件包裹器；

Web组件渲染模块，用于将目标web组件渲染至所述组件包裹器内，以完成页面组件布局。

根据本公开的实施例的第三方面，提供了一种电子设备，包括：

处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现上述任一项所述的页面组件布局方法。

根据本公开的实施例的第四方面，提供了一种可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述任一项所述的页面组件布局方法。

本公开的实施例提供了一种页面布局方法、装置、电子设备及可读存储介质。通过在目标页面内的目标位置处创建Flutter组件，在Flutter组件中创建组件包裹器，将目标web组件渲染至组件包裹器内，以完成页面组件布局。本公开的实施例通过创建包含组件包裹器的Flutter组件，并渲染Web组件，实现任意位置Flutter Widget和Web组件混排，提升了Flutter Web适配效率，又能保证Web的交互习惯。

附图说明