CN114201252A - 页面组件布局方法、装置、电子设备及可读存储介质 - Google Patents

Abstract

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

Description

页面组件布局方法、装置、电子设备及可读存储介质

技术领域

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

背景技术

基于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的交互习惯。

附图说明

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

图1为本公开的实施例提供的一种页面组件布局方法的步骤流程图；

图2为本公开的实施例提供的另一种页面组件布局方法的步骤流程图；

图3为本公开的实施例提供的一种页面组件布局装置的结构示意图；

图4为本公开的实施例提供的另一种页面组件布局装置的结构示意图。

具体实施方式

下面将结合本公开的实施例中的附图，对本公开的实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开的实施例一部分实施例，而不是全部的实施例。基于本公开的实施例中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开的实施例保护的范围。

实施例一

参照图1，示出了本公开的实施例提供的一种页面组件布局方法的步骤流程图，如图1所示，该页面组件布局方法可以包括以下步骤：

步骤101：在目标页面内的目标位置处创建Flutter组件。

本公开的实施例可以应用于实现网页页面内任意位置的Flutter组件和web组件混排的场景中。

目标页面是指需要进行Flutter组件和web组件混排的页面，在本示例中，目标页面可以为web页面。

目标位置是指目标页面内的任意位置，在本示例中，目标位置可以为一个页面位置，也可以为多个页面位置，具体地，对于目标位置的数量可以根据业务需求而定，本实施例对此不加以限制。

Flutter是一种开源工具包，可以帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

Flutter组件是指采用Flutter编程语言编写而成的组件。

在需要进行目标页面内任意位置处的Flutter组件和web组件的混排时，则可以在目标页面内的目标位置处创建Flutter组件。

在本实施例中，在创建Flutter组件之后，还可以设置Flutter组件的显示样式和显示属性，在本示例中，显示样式可以包括Flutter组件的组件长度和组件宽度，显示属性可以包括：内边距属性，其中，内边距属性是指元素的内边距，该属性可以定义元素边框与元素内容之间的空白区域。

本公开的实施例可以实现Flutter组件的样式的自定义设置，可以实现Flutter组件的多样化显示。

在目标页面内的目标位置处创建Flutter组件之后，执行步骤102。

步骤102：在所述Flutter组件中创建组件包裹器。

组件包裹器可以作为包裹web组件的容器，在本示例中，组件包裹器即为ShadowDOM。

在目标页面内的目标位置处创建Flutter组件之后，则可以在Flutter组件中创建组件包裹器，以便插入web组件。

在Flutter组件中创建组件包裹器之后，执行步骤103。

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

目标web组件是指需要与Flutter组件混排的web组件，在本示例中，目标web组件可以为用户选择的web组件，也可以为系统提供的web组件，具体地，对于目标web组件的选择方式可以根据业务需求而定，本实施例对此不加以限制。

在Flutter组件中创建组件包裹器之后，则可以获取目标web组件，并将目标web组件渲染至组件包裹器内，以完成页面组件布局。

本公开的实施例通过创建ShadowDOM形态的Widget，并渲染Web组件，实现任意位置Flutter Widget和Web组件混排，提升了Flutter Web适配效率。

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

实施例二

参照图2，示出了本公开的实施例提供的另一种页面组件布局方法的步骤流程图，如图2所示，该页面组件布局方法可以包括以下步骤：

步骤201：获取已创建的web组件。

本公开的实施例可以应用于实现网页页面内任意位置的Flutter组件和web组件混排的场景中。

在需要进行web组件和Flutter组件的混排时，可以获取已创建的web组件。

在获取到已创建的web组件之后，执行步骤202。

步骤202：定义所述web组件在所述目标页面对应的编程语言内的调用指示信息。

调用指示信息可以用于指示在目标业面对应的编程语言调用web组件的信息。

在获取到已创建的web组件之后，则可以定义web组件在目标页面对应的编程语言内的调用指示信息，即定义已创建的web组件在Dart侧的“声明”，以便Web组件能以JS的形式被Dart调用。

在定义web组件在目标页面对应的编程语言内的调用指示信息之后，执行步骤203。

步骤203：在目标页面内的目标位置处创建Flutter组件。

目标页面是指需要进行Flutter组件和web组件混排的页面，在本示例中，目标页面可以为web页面。

目标位置是指目标页面内的任意位置，在本示例中，目标位置可以为一个页面位置，也可以为多个页面位置，具体地，对于目标位置的数量可以根据业务需求而定，本实施例对此不加以限制。

Flutter是一种开源工具包，可以帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

Flutter组件是指采用Flutter编程语言编写而成的组件。

在需要进行目标页面内任意位置处的Flutter组件和web组件的混排时，则可以在目标页面内的目标位置处创建Flutter组件。

在本实施例中，在创建Flutter组件之后，还可以设置Flutter组件的显示样式和显示属性，在本示例中，显示样式可以包括Flutter组件的组件长度和组件宽度，显示属性可以包括：内边距属性，其中，内边距属性是指元素的内边距，该属性可以定义元素边框与元素内容之间的空白区域。

本公开的实施例可以实现Flutter组件的样式的自定义设置，可以实现Flutter组件的多样化显示。

在目标页面内的目标位置处创建Flutter组件之后，执行步骤204。

步骤204：基于所述目标页面对应的编程语言，创建所述组件包裹器。

组件包裹器可以作为包裹web组件的容器，在本示例中，组件包裹器即为ShadowDOM。

在目标页面内的目标位置处创建Flutter组件之后，则可以基于目标页面对应的编程语言创建组件包裹器，例如，可以利用dart:html，创建Shadow Dom等。

在基于目标页面对应的编程语言创建组件包裹器之后，执行步骤205。

步骤205：将所述组件包裹器装载于所述Flutter组件内。

在基于目标页面对应的编程语言创建组件包裹器之后，则可以将组件包裹器装载于Flutter组件内。

在将组件包裹器装载于Flutter组件内之后，执行步骤206。

步骤206：将所述目标web组件插入所述组件包裹器内。

目标web组件是指需要与Flutter组件混排的web组件，在本示例中，目标web组件可以为用户选择的web组件，也可以为系统提供的web组件，具体地，对于目标web组件的选择方式可以根据业务需求而定，本实施例对此不加以限制。

在将组件包裹器装载于Flutter组件内之后，则可以将目标web组件插入组件包裹器内。

在将目标web组件插入组件包裹器内之后，执行步骤207。

步骤207：渲染显示所述目标web组件，以完成页面组件布局。

在将目标web组件插入组件包裹器内之后，则可以对目标web组件进行渲染，以显示目标web组件，完成页面组件的布局。

本公开的实施例通过创建包含组件包裹器的Flutter组件，并渲染Web组件，实现任意位置Flutter Widget和Web组件混排，提升了Flutter Web适配效率，又能保证Web的交互习惯。

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

实施例三

参照图3，示出了本公开的实施例提供的一种页面组件布局装置的结构示意图，如图3所示，该页面组件布局装置300可以包括如下模块：

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

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

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

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

实施例四

参照图4，示出了本公开的实施例提供的另一种页面组件布局装置的结构示意图，如图4所示，该页面组件布局装置400可以包括如下模块：

Web组件创建模块410，用于获取已创建的web组件；

调用指示定义模块420，用于定义所述web组件在所述目标页面对应的编程语言内的调用指示信息；

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

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

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

可选地，所述装置还包括：

组件属性设置模块，用于设置所述Flutter组件的显示样式和显示属性；

其中，所述显示样式包括：组件长度、组件宽度，所述显示属性包括：内边距属性。

可选地，所述组件包裹器创建模块440包括：

组件包裹器创建单元441，用于基于所述目标页面对应的编程语言，创建所述组件包裹器；

组件包裹器装载单元442，用于将所述组件包裹器装载于所述Flutter组件内。

可选地，所述Web组件渲染模块450包括：

Web组件插入单元451，用于将所述目标web组件插入所述组件包裹器内；

Web组件渲染单元452，用于渲染显示所述目标web组件，以完成页面组件布局。

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

本公开的实施例还提供了一种电子设备，包括：处理器、存储器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现前述实施例的页面组件布局方法。

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

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本公开的实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本公开的实施例的内容，并且上面对特定语言所做的描述是为了披露本公开的实施例的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本公开的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本公开的示例性实施例的描述中，本公开的实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本公开的实施例要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本公开的实施例的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的替代特征来代替。

本公开的实施例的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本公开的实施例的动态图片的生成设备中的一些或者全部部件的一些或者全部功能。本公开的实施例还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序。这样的实现本公开的实施例的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本公开的实施例进行说明而不是对本公开的实施例进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的组件或步骤。位于组件之前的单词“一”或“一个”不排除存在多个这样的组件。本公开的实施例可以借助于包括有若干不同组件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

以上所述仅为本公开的实施例的较佳实施例而已，并不用以限制本公开的实施例，凡在本公开的实施例的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本公开的实施例的保护范围之内。

以上所述，仅为本公开的实施例的具体实施方式，但本公开的实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本公开的实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本公开的实施例的保护范围之内。因此，本公开的实施例的保护范围应以权利要求的保护范围为准。

Claims (12)

1.一种页面组件布局方法，其特征在于，包括：

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

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

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

2.根据权利要求1所述的方法，其特征在于，在所述在目标页面内的目标位置处创建Flutter组件之前，还包括：

获取已创建的web组件；

定义所述web组件在所述目标页面对应的编程语言内的调用指示信息。

3.根据权利要求1所述的方法，其特征在于，在所述在目标页面内的目标位置处创建Flutter组件之后，还包括：

设置所述Flutter组件的显示样式和显示属性；

其中，所述显示样式包括：组件长度、组件宽度，所述显示属性包括：内边距属性。

4.根据权利要求1所述的方法，其特征在于，所述在所述Flutter组件中创建组件包裹器，包括：

基于所述目标页面对应的编程语言，创建所述组件包裹器；

将所述组件包裹器装载于所述Flutter组件内。

5.根据权利要求1所述的方法，其特征在于，所述将目标web组件渲染至所述组件包裹器内，以完成页面组件布局，包括：

将所述目标web组件插入所述组件包裹器内；

渲染显示所述目标web组件，以完成页面组件布局。

6.一种页面组件布局装置，其特征在于，包括：

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

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

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

7.根据权利要求6所述的装置，其特征在于，所述装置还包括：

Web组件创建模块，用于获取已创建的web组件；

调用指示定义模块，用于定义所述web组件在所述目标页面对应的编程语言内的调用指示信息。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：

组件属性设置模块，用于设置所述Flutter组件的显示样式和显示属性；

其中，所述显示样式包括：组件长度、组件宽度，所述显示属性包括：内边距属性。

9.根据权利要求6所述的装置，其特征在于，所述组件包裹器创建模块包括：

组件包裹器创建单元，用于基于所述目标页面对应的编程语言，创建所述组件包裹器；

组件包裹器装载单元，用于将所述组件包裹器装载于所述Flutter组件内。

10.根据权利要求6所述的装置，其特征在于，所述Web组件渲染模块包括：

Web组件插入单元，用于将所述目标web组件插入所述组件包裹器内；

Web组件渲染单元，用于渲染显示所述目标web组件，以完成页面组件布局。

11.一种电子设备，其特征在于，包括：

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

12.一种可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如方法权利要求1至5中任一项所述的页面组件布局方法。

Images