CN114896000A - 一种组件布局方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开关于一种组件布局方法、装置、电子设备及存储介质，包括：若子组件集对应的权重参数为第一预设值，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸，基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸，基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件。本申请通过占位组件配合实施组件在容器组件中的布局，使得实施组件更快速方便地展示在容器组件中。

Description

一种组件布局方法、装置、电子设备及存储介质

技术领域

本公开涉及互联网技术领域，尤其涉及一种组件布局方法、装置、电子设备及存储介质。

背景技术

随着当前移动互联网的迅速发展，用户可通过应用程序和网站浏览信息。在应用程序或者网站给用户提供信息的过程中，信息可以通过不同的样式进行呈现。

举个例子，当信息需要以图片的形式居中展示在某个页面或者容器中时，客户端需要在测量图片和容器的尺寸后，确定图片相对于容器的偏移量，并逐步移动图片在容器中的位置，实现图片居中的要求。这在图片的展示的这个过程中，会花费大量的时间在确定图片的位置上，一旦布局层级比较多，那么花费的时间和移动的复杂度会叠加。

发明内容

本公开提供一种组件布局方法、装置、电子设备及存储介质，本公开的技术方案如下：

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

确定在第一容器组件中，待布局的子组件集；

若子组件集对应的权重参数为第一预设值，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸；

基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸；

基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件。

在一种可选的实施例中，基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件之后，还包括：

对实施组件进行绘制；

将绘制好的实施组件添加至第一容器组件对应的画布视图中。

在一种可选的实施例中，当实施组件的数量为一个，且目标维度为左右维度或者上下维度时，基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸，包括：

确定实施组件在左右维度或者上下维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

基于第一尺寸、第二尺寸、第一权重参数和第二权重参数确定第一占位组件的第三尺寸和第二占位组件的第四尺寸。

在一种可选的实施例中，当实施组件的数量为一个，且目标维度为左右维度和上下维度时，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸，包括：

确定实施组件在左右维度上的第一尺寸和上下维度上的第一尺寸；

确定第一容器组件在左右维度上的第二尺寸和上下维度上的第二尺寸。

在一种可选的实施例中，基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸，包括：

确定实施组件在左右维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

确定实施组件在上下维度上对应的第三占位组件的第三权重参数和第四占位组件的第四权重参数；

基于左右维度上的第一尺寸、左右维度上的第二尺寸、第一权重参数和第二权重参数确定第一占位组件在左右维度的第三尺寸，和第二占位组件在左右维度的第四尺寸；

基于上下维度上的第一尺寸、上下维度上的第二尺寸、第三权重参数和第四权重参数确定第三占位组件在上下维度的第三尺寸，和第四占位组件在上下维度的第四尺寸。

在一种可选的实施例中，基于第一尺寸、至少两个占位组件中每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件，包括：

基于左右维度的第三尺寸在第一容器组件的左侧摆放第一占位组件；

基于左右维度的第四尺寸在第一容器组件的右侧摆放第二占位组件；

基于上下维度的第三尺寸在第一容器组件的上方摆放第三占位组件；

基于上下维度的第四尺寸在第一容器组件的下方摆放第四占位组件；

在第一容器组件的空闲区域摆放实施组件；空闲区域基于摆放好的第一占位组件、第二占位组件、第三占位组件和第四占位组件确定。

在一种可选的实施例中，确定在第一容器组件中，待布局的子组件集之后，方法还包括：

若子组件集对应的权重参数为第二预设值，且子组件集存在对应的组件优先参数，确定子组件集中每个子组件的组件优先级；

基于每个子组件的组件优先级对子组件集中的组件进行测量顺序排序；得到子组件序列；子组件序列的相邻两个子组件中，前者子组件的组件优先级大于等于后者子组件的组件优先级；

测量得到第一容器组件在目标维度上的尺寸；

测量得到子组件序列中，除尾部子组件之外的每个子组件在目标维度上的尺寸；

基于第一容器组件在目标维度上的尺寸和除尾部子组件之外的每个子组件在目标维度上的尺寸确定尾部子组件的尺寸；

基于除尾部子组件之外的每个子组件在目标维度上的尺寸和尾部子组件的尺寸在第一容器组件中摆放子组件集中的每个组件。

在一种可选的实施例中，基于除尾部子组件之外的每个子组件在目标维度上的尺寸和尾部子组件的尺寸在第一容器组件中摆放子组件集中的每个组件之后，还包括：

对子组件集中的每个组件进行绘制；

将绘制好的每个组件添加至第一容器组件对应的画布视图中。

在一种可选的实施例中，方法还包括:

确定待布局的第一容器组件和第二容器组件；

获取第一容器组件和第二容器组件之间的位置描述信息；

从位置描述信息中确定第一容器组件的第一边对象、第二容器组件的第二边对象和边相对距离；

基于边相对距离，通过第一边对象和第二边对象将第一容器组件和第二容器组件渲染至容器组件所属的父组件对应的画布视图中。

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

组件确定模块，被配置为执行确定在第一容器组件中，待布局的子组件集；

尺寸测量模块，被配置为执行若子组件集对应的权重参数为第一预设值，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸；基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸；

布置模块，被配置为执行基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件。

在一种可选的实施例中，被配置为执行：

对实施组件进行绘制；

将绘制好的实施组件添加至第一容器组件对应的画布视图中。

在一种可选的实施例中，当实施组件的数量为一个，且目标维度为左右维度或者上下维度时，尺寸测量模块，被配置为执行：

确定实施组件在左右维度或者上下维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

基于第一尺寸、第二尺寸、第一权重参数和第二权重参数确定第一占位组件的第三尺寸和第二占位组件的第四尺寸。

在一种可选的实施例中，当实施组件的数量为一个，且目标维度为左右维度和上下维度时，尺寸测量模块，被配置为执行：

确定实施组件在左右维度上的第一尺寸和上下维度上的第一尺寸；

确定第一容器组件在左右维度上的第二尺寸和上下维度上的第二尺寸。

在一种可选的实施例中，尺寸测量模块，被配置为执行：

确定实施组件在左右维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

确定实施组件在上下维度上对应的第三占位组件的第三权重参数和第四占位组件的第四权重参数；

基于左右维度上的第一尺寸、左右维度上的第二尺寸、第一权重参数和第二权重参数确定第一占位组件在左右维度的第三尺寸，和第二占位组件在左右维度的第四尺寸；

基于上下维度上的第一尺寸、上下维度上的第二尺寸、第三权重参数和第四权重参数确定第三占位组件在上下维度的第三尺寸，和第四占位组件在上下维度的第四尺寸。

在一种可选的实施例中，布置模块，被配置为执行：

基于左右维度的第三尺寸在第一容器组件的左侧摆放第一占位组件；

基于左右维度的第四尺寸在第一容器组件的右侧摆放第二占位组件；

基于上下维度的第三尺寸在第一容器组件的上方摆放第三占位组件；

基于上下维度的第四尺寸在第一容器组件的下方摆放第四占位组件；

在第一容器组件的空闲区域摆放实施组件；空闲区域基于摆放好的第一占位组件、第二占位组件、第三占位组件和第四占位组件确定。

在一种可选的实施例中，装置还包括：

优先参数确定模块，被配置为执行若子组件集对应的权重参数为第二预设值，且子组件集存在对应的组件优先参数，确定子组件集中每个子组件的组件优先级；

排序模块，被配置为执行基于每个子组件的组件优先级对子组件集中的组件进行测量顺序排序；得到子组件序列；子组件序列的相邻两个子组件中，前者子组件的组件优先级大于等于后者子组件的组件优先级；

尺寸测量模块，被配置为执行测量得到第一容器组件在目标维度上的尺寸；测量得到子组件序列中，除尾部子组件之外的每个子组件在目标维度上的尺寸；基于第一容器组件在目标维度上的尺寸和除尾部子组件之外的每个子组件在目标维度上的尺寸确定尾部子组件的尺寸；

布置模块，被配置为执行基于除尾部子组件之外的每个子组件在目标维度上的尺寸和尾部子组件的尺寸在第一容器组件中摆放子组件集中的每个组件。

在一种可选的实施例中，装置还包括绘制模块，被配置为执行：

对子组件集中的每个组件进行绘制；

将绘制好的每个组件添加至第一容器组件对应的画布视图中。

在一种可选的实施例中，装置还包括:

组件确定模块，被配置为执行确定待布局的第一容器组件和第二容器组件；

信息获取模块，被配置为执行获取第一容器组件和第二容器组件之间的位置描述信息；

信息读取模块，被配置为执行从位置描述信息中确定第一容器组件的第一边对象、第二容器组件的第二边对象和边相对距离；

渲染模块，被配置为执行基于边相对距离，通过第一边对象和第二边对象将第一容器组件和第二容器组件渲染至容器组件所属的父组件对应的画布视图中。

根据本公开实施例的第三方面，提供一种电子设备，包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为执行指令，以实现如上述第一方面中任一项的方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行本公开实施例的第一方面中任一项的方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，计算机程序产品包括计算机程序，计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从可读存储介质读取并执行计算机程序，使得计算机设备执行本公开实施例的第一方面中任一项的方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

确定在第一容器组件中，待布局的子组件集，若子组件集对应的权重参数为第一预设值，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸，基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸，基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件。本申请通过占位组件配合实施组件在容器组件中的布局，使得实施组件更快速方便地展示在容器组件中。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种应用环境的示意图；

图2是根据一示例性实施例示出的一种组件布局方法的流程图；

图3是根据一示例性实施例示出的一种卡片的示意图；

图4是根据一示例性实施例示出的一种容器中组件布局方法的示意图；

图5是根据一示例性实施例示出的一种容器中组件布局方法的示意图；

图6是根据一示例性实施例示出的一种容器中组件布局方法的示意图；

图7是根据一示例性实施例示出的一种容器中组件布局方法的示意图；

图8是根据一示例性实施例示出的一种组件布局方法的流程图；

图9是根据一示例性实施例示出的一种容器组件布局方法的流程图；

图10是根据一示例性实施例示出的一种组件布局装置的框图；

图11是根据一示例性实施例示出的一种用于组件布局的电子设备的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的第一对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

需要说明的是，本公开所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于展示的数据、分析的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

请参阅图1，图1是根据一示例性实施例示出的一种组件布局方法的应用环境的示意图，如图1所示，该应用环境可以包括客户端01和数据上传端02。

在一些可能的实施例中，上述客户端011可以包括但不限于智能手机、台式计算机、平板电脑、笔记本电脑、智能音箱、数字助理、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、智能可穿戴设备等类型的客户端。也可以为运行于上述客户端的软体，例如应用程序、小程序等。可选的，客户端上运行的操作系统可以包括但不限于安卓系统、IOS系统、linux、windows、Unix等。

客户端01可以确定在第一容器组件中，待布局的子组件集，若子组件集对应的权重参数为第一预设值，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸，基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸，基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件。

数据上传端02可以是上传待布局的子组件集中布局参数的和子组件的设备。该设备可以是客户端，还可以是服务器。

此外，需要说明的是，图1所示的仅仅是本公开提供的组件布局方法的一种应用环境，在实际应用中，还可以包括其他应用环境。

图2是根据一示例性实施例示出的一种组件布局方法的流程图，如图2所示，组件布局方法可以应用于服务器，也可以应用于客户端，包括以下步骤：

在步骤S201中，确定在第一容器组件中，待布局的子组件集。

本申请实施例中，信息在页面上的传播可以通过不同的样式实现。比如，信息可以在整个页面上呈现，可以如图3所示，在某个页面300上的卡片301中呈现。

可选的，一个页面或者一个卡片中可以出现一个信息，还可以出现多个信息。本申请实施例提供一种组件布局的方式，来解决如何在卡片或者页面上布局信息。

其中，上文中的容器组件可以是某个页面或者某个卡片对应的，子组件集中的子组件可以是某个信息对应的。下面通过容器组件为页面上的卡片为例进行阐述。

本申请实施例中，在对第一容器组件中的子组件进行摆放和绘制之前，需要确定该第一容器组件中的子组件集，以及各个子组件的尺寸。

可选的，子组件集可以存在一个子组件，也可以存在多个子组件。子组件可以是图片，按钮，表格，文本，动画，特效等等。

在步骤S203中，若子组件集对应的权重参数为第一预设值，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸。

本申请实施例中，客户端可以获取子组件集对应的布局参数，从该布局参数中获取维度参数，该维度参数指示目标维度。该目标维度可以包括左右维度和/或上下维度。

本申请实施例中，客户端还可以从布局参数中获取权重参数。如果子组件集存在对应的权重参数，且对应的权重参数为第一预设值，比如权重参数weight为大于0的数值，则客户端可以确定该组件布局的实际需求是：对子组件集中的实施组件在第一容器组件中进行某一位置的布局，且占位组件分享第一容器组件剩下的空间。某一位置的布局可以包括左右维度上的靠左布局，靠右布局，居中布局。或者，某一位置的布局可以包括上下维度上的靠上布局，靠下布局，居中布局等。

在一种可选的实施例中，在确定布局参数中包含权重参数之前，子组件集中的组件可以包括实施组件，实施组件携带有布局参数，当客户端确定布局参数中的权重参数为第一预设值时，可以从布局参数中获取权重参数的个数，以及每个权重参数对应的占位组件相对于实施组件的位置参数。如此，客户端可以基于权重参数的个数，在子组件集中创建和权重参数的个数相同的占位组件。

在另一种可选的实施例中，如果布局参数中的权重参数为第一预设值时，在确定布局参数中包含权重参数之前，子组件集中的组件就包含了实施组件和占位组件，该占位组件的个数和权重参数的个数相同。其中，实施组件可以携带有维度参数，各个占位组件可以携带有权重参数和占位组件相对于实施组件的位置参数。

从上述两个实施例可以看出，第一个实施例中的子组件集中的占位组件是在确定需要占位组件后创建的，所有的布局参数都携带在实施组件中。第二个实施例中的子组件集中的占位组件是和实施组件同一时间创建的，有的参数可以携带于实施组件中(比如维度参数)，有的参数可以携带于占位组件中(比如权重参数和位置参数)。也就是说，上述两种方式中，参数都是赋予子组件的，即客户端可以直接通过子组件本身的能力实现在第一容器组件中的摆放，如此，第一容器组件只是提供摆放的容器，不要有组件在位置上的规划功能，降低了容器组件的功能和逻辑的复杂度。

在步骤S205中，基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸。

在步骤S207中，基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件。

本申请实施例中，实施组件的个数可以是一个或者多个，下面通过实施组件为一个或者二个，且目标维度是上下维度和/或左右维度进行举例。

在一种可选的实施例中，实施组件的数量为一个，目标维度为左右维度。

客户端可以测量实施组件在左右维度上的尺寸，得到第一尺寸，比如20个像素，可以测量第一容器组件在左右维度上的尺寸，得到第二尺寸，比如200个像素。由于实施组件的数量为一个，那么可以确定占位组件的个数为2个，第一占位组件和第二占位组件。接着，客户端可以确定第一占位组件的第一权重参数和第二占位组件的第二权重参数，接着，可以基于第一尺寸，第二尺寸、第一权重参数和第二权重参数确定第一占位组件的第三尺寸和第二占位组件的第四尺寸。

具体的，客户端可以根据第一尺寸和第二尺寸之间的差值确定第一占位组件和第二占位组件需要分享的尺寸为180个像素。假设第一占位组件的第一权重参数为weight＝1,第二占位组件的第二权重参数为weight＝1，则第一占位组件的第三尺寸为90个像素，第二占位组件的第四尺寸为90个像素。假设第一占位组件的第一权重参数为weight＝2,第二占位组件的第二权重参数为weight＝1，则第一占位组件的第三尺寸为120个像素，第二占位组件的第四尺寸为60个像素。如此，客户端可以根据第一尺寸、第三尺寸和第四尺寸在第一容器组件中摆放实施组件、第一占位组件和第二占位组件。

图4是根据一示例性实施例示出的一种容器中组件布局方法的示意图，如图4所示，包括第一容器组件400，按照第一占位组件和第二占位组件相对于实施组件的位置参数摆放的实施组件401、第一占位组件402和第二占位组件403。

可选的，第一占位组件和第二占位组件在上下维度上的尺寸是可调节的，如图4所示，可以是第一容器在上下维度上的尺寸。也可以小于第一容器在上下维度上的尺寸。

在一种可选的实施例中，实施组件的数量为一个，目标维度为上下维度。

客户端可以测量实施组件在上下维度上的尺寸，得到第一尺寸，比如50个像素，可以测量第一容器组件在上下维度上的尺寸，得到第二尺寸，比如300个像素。由于实施组件的数量为一个，那么可以确定占位组件的个数为2个，第一占位组件和第二占位组件。接着，客户端可以确定第一占位组件的第一权重参数和第二占位组件的第二权重参数，接着，可以基于第一尺寸，第二尺寸、第一权重参数和第二权重参数确定第一占位组件的第三尺寸和第二占位组件的第四尺寸。

具体的，客户端可以根据第一尺寸和第二尺寸之间的差值确定第一占位组件和第二占位组件需要分享的尺寸为250个像素。假设第一占位组件的第一权重参数为weight＝1,第二占位组件的第二权重参数为weight＝1，则第一占位组件的第三尺寸为125个像素，第二占位组件的第四尺寸为125个像素。假设第一占位组件的第一权重参数为weight＝3,第二占位组件的第二权重参数为weight＝2，则第一占位组件的第三尺寸为150个像素，第二占位组件的第四尺寸为100个像素。如此，客户端可以根据第一尺寸、第三尺寸和第四尺寸在第一容器组件中摆放实施组件、第一占位组件和第二占位组件。

图5是根据一示例性实施例示出的一种容器中组件布局方法的示意图，如图5所示，包括第一容器组件500，按照第一占位组件和第二占位组件相对于实施组件的位置参数摆放的实施组件501、第一占位组件502和第二占位组件503。

可选的，第一占位组件和第二占位组件在左右维度上的尺寸是可调节的，如图5所示，可以是第一容器在左右维度上的尺寸。也可以小于第一容器在左右维度上的尺寸。

在一种可选的实施例中，实施组件的数量为二个，目标维度为左右维度。

客户端可以测量两个实施组件在左右维度上的尺寸，得到第一尺寸，比如都是20个像素，可以测量第一容器组件在左右维度上的尺寸，得到第二尺寸，比如190个像素。由于实施组件的数量为二个，那么可以确定占位组件的个数为3个，第一占位组件、第二占位组件和第三占位组件。接着，客户端可以确定第一占位组件的第一权重参数、第二占位组件的第二权重参数和第三占位组件的第三权重参数，接着，可以基于第一尺寸，第二尺寸、第一权重参数、第二权重参数和第三权重参数确定第一占位组件的第三尺寸、第二占位组件的第四尺寸和第三占位组件的第五尺寸。

具体的，客户端可以根据第一尺寸和第二尺寸之间的差值确定第一占位组件、第二占位组件和第三占位组件需要分享的尺寸为190-20-20＝150个像素。假设第一占位组件的第一权重参数为weight＝1,第二占位组件的第二权重参数为weight＝1，第三占位组件的第三权重参数为weight＝1，则第一占位组件的第三尺寸为50个像素，第二占位组件的第四尺寸为50个像素，第三占位组件的第五尺寸为50个像素。如此，客户端可以根据第一尺寸、第三尺寸、第四尺寸和第五尺寸在第一容器组件中摆放两个实施组件、第一占位组件、第二占位组件和第三占位组件。

图6是根据一示例性实施例示出的一种容器中组件布局方法的示意图，如图6所示，包括第一容器组件600，按照第一占位组件、第二占位组件和第三占位组件相对于实施组件的位置参数摆放的实施组件601和602、第一占位组件603、第二占位组件604和第三占位组件605。

可选的，第一占位组件、第二占位组件和第三占位组件在上下维度上的尺寸是可调节的，如图6所示，可以是第一容器在上下维度上的尺寸。也可以小于第一容器在上下维度上的尺寸。

可选的，实施组件的数量为二个，目标维度为上下维度的请参考实施组件的数量为二个，目标维度为左右维度的实施例，这里不再赘述。

在一种可选的实施例中，实施组件的数量为一个，目标维度为上下维度和左右维度。

客户端可以测量实施组件在左右维度上的第一尺寸(比如80个像素)和上下维度上的第一尺寸(比如80个像素)。可以测量第一容器组件在左右维度上的第二尺寸(比如200个像素)和在上下维度上的第二尺寸(比如300个像素)。由于实施组件的数量为一个，那么可以确定左右维度上的占位组件的个数为2个，第一占位组件和第二占位组件，确定上下维度上的占位组件的个数为2个，第三占位组件和第四占位组件。

接着，客户端可以确定第一占位组件的第一权重参数、第二占位组件的第二权重参数，第三占位组件的第三权重参数和第四占位组件的第四权重参数。客户端可以基于左右维度上的第一尺寸，第二尺寸、第一权重参数和第二权重参数确定第一占位组件在左右维度上的第三尺寸和第二占位组件在左右维度上的第四尺寸。客户端可以基于上下维度上的第一尺寸，第二尺寸、第三权重参数和第四权重参数确定第三占位组件在上下维度上的第三尺寸和第四占位组件在上下维度上的第四尺寸。

具体的，客户端可以根据左右维度上的第一尺寸和第二尺寸之间的差值确定第一占位组件和第二占位组件需要分享的尺寸为120个像素。假设第一占位组件的第一权重参数为weight＝1,第二占位组件的第二权重参数为weight＝1，则第一占位组件的第三尺寸为60个像素，第二占位组件的第四尺寸为60个像素。

具体的，客户端可以根据上下维度上的第一尺寸和第二尺寸之间的差值确定第三占位组件和第四占位组件需要分享的尺寸为220个像素。假设第三占位组件的第三权重参数为weight＝1,第四占位组件的第四权重参数为weight＝1，则第三占位组件的第三尺寸为110个像素，第四占位组件的第四尺寸为110个像素。

如此，客户端可以根据实施组件在左右维度和上下维度上的第一尺寸、第一占位组件的第三尺寸、第二占位组件的第四尺寸、第三占位组件的第三尺寸和第四占位组件的第四尺寸在第一容器组件中摆放实施组件、第一占位组件、第二占位组件、第三占位组件和第四占位组件。可选的，客户端可以按照第一占位组件、第二占位组件、第三占位组件和第四占位组件相对于实施组件的位置参数在第一容器组件的左侧摆放第一占位组件，在第一容器组件的右侧摆放第二占位组件，在第一容器组件的上方摆放第三占位组件，在第一容器组件的下方摆放第四占位组件。并基于摆放好的第一占位组件、第二占位组件、第三占位组件和第四占位组件确定出空闲区域，将实施组件按照左右维度和上下维度的第一尺寸在空闲区域中摆放实施组件。

图7是根据一示例性实施例示出的一种容器中组件布局方法的示意图，如图7所示，包括第一容器组件700，按照第一占位组件、第二占位组件、第三占位组件和第四占位组件相对于实施组件的位置参数摆放的实施组件701、第一占位组件702、第二占位组件703、第三占位组件704和第四占位组件705。

可选的，第一占位组件和第二占位组件在上下维度上的尺寸是可调节的，如图7所示，可以是第一容器在上下维度上的尺寸，也可以小于第一容器在上下维度上的尺寸。

可选的，第三占位组件和第四占位组件在上下维度上的尺寸是可调节的，如图7所示，可以是小于第一容器在上下维度上的尺寸，也可以是第一容器在上下维度上的尺寸。

如此，通过目标维度为多个维度可以有效减少布局层级，减少布局的复杂度。

可选的，实施组件的数量为二个，目标维度为上下维度和左右维度的实施例请综合参考上述的实施例，这里不再赘述。

本申请实施例中，客户端将待布局的子组件在第一容器组件中摆放完毕，随后，客户端可以对实施组件进行绘制，并将绘制好的实施组件添加至第一容器组件内对应的画布视图中。本申请实施例中，对于第一容器中的占位组件是不需要绘制和渲染的，这可以减少无用的绘制和渲染。

本申请实施例中，在客户端从布局参数中获取维度参数之后，可以获取权重参数若不存在权重参数，或者权重参数为第二预设值，比如weight＝0，则客户端可以获取组件优先参数，若存在组件优先参数，则客户端确定该组件布局的实际需求是：子组件集中的子组件分享第一容器组件在目标维度上的空间。

图8是根据一示例性实施例示出的一种组件布局方法的流程图，如图8所示，包括：

在步骤S801中，若子组件集对应的权重参数为第二预设值，且子组件集存在对应的组件优先参数，确定子组件集中每个子组件的组件优先级。

在步骤S802中，基于每个子组件的组件优先级对子组件集中的组件进行测量顺序排序；得到子组件序列；子组件序列的相邻两个子组件中，前者子组件的组件优先级大于等于后者子组件的组件优先级。

在步骤S803中，测量得到第一容器组件在目标维度上的尺寸。

在步骤S804中，测量得到子组件序列中，除尾部子组件之外的每个子组件在目标维度上的尺寸。

在步骤S805中，基于第一容器组件在目标维度上的尺寸和除尾部子组件之外的每个子组件在目标维度上的尺寸确定尾部子组件的尺寸。

在步骤S806中，基于除尾部子组件之外的每个子组件在目标维度上的尺寸和尾部子组件的尺寸在第一容器组件中摆放子组件集中的每个组件。

本申请实施例中，若子组件集对应的权重参数为第二预设值，且子组件集存在对应的组件优先参数，客户端可以确定子组件集中每个子组件(比如，子组件集中包括3个子组件，子组件A，子组件B和子组件C)的组件优先级。接着，客户端可以基于每个子组件的组件优先级对子组件集中的组件进行测量顺序排序；得到子组件序列，子组件A，子组件C和子组件B。其中，子组件A的组件优先级大于等于子组件C的组件优先级，子组件C的组件优先级大于等于子组件B的组件优先级。假设目标维度为左右维度，可以测量得到第一容器组件在左右维度上的尺寸，假设为200个像素。随后，客户端可以测量得到子组件序列中，除尾部子组件之外的每个子组件在目标维度上的尺寸，即测量得到子组件A的尺寸为50个像素，子组件C的尺寸为80个像素。

接着，客户端基于第一容器组件在目标维度上的尺寸和除尾部子组件之外的每个子组件在目标维度上的尺寸确定尾部子组件的尺寸，即，客户端可以基于第一容器组件的尺寸和子组件A和子组件C的尺寸确定出尾部子组件的尺寸(子组件B)的尺寸为70个像素。最后，客户端可以基于每个子组件的位置参数、除尾部子组件之外的每个子组件在目标维度上的尺寸和尾部子组件的尺寸在第一容器组件中摆放子组件集中的每个组件。

假设，子组件A在左侧，子组件B在中间，子组件C在右侧，则客户端可以先摆放子组件A，随着摆放子组件C，最后摆放子组件B。子组件A占50个像素，子组件B占70个像素，子组件C占80个像素。

客户端也可以先摆放子组件A，随着摆放子组件B，最后摆放子组件C，子组件A占50个像素，子组件B占70个像素，子组件C占80个像素。

此实施例旨在解决某个子组件因组件内容的长短不固定，导致的占用像素可能不固定，从而引起其他子组件不能摆放的问题。举个例子，假设从左到右分别需要摆放账号图片，昵称和电话号码。一般来说，账号图片和电话号码所需的空间是固定的，昵称的长短会因人而异，如果按照从左到右的顺序，且按照子组件的实际所需控件进行摆放，假设昵称为90像素的时候，那么电话号码就无法摆放了。因此，在此类场景中，本申请可以基于组件优先级确定每个子组件的占用空间，随后，按照占用控件在第一容器组件中进行摆放。也就是说，子组件的占用空间可以不等于实际所需空间。

本申请实施例中，客户端将待布局的子组件在第一容器组件中摆放完毕，随后，客户端可以对子组件集中每个子组件进行绘制，并将绘制好的每个子组件添加至第一容器组件内对应的画布视图中。

上述的实施例都是在描述如何在第一容器组件中布局子组件，那么如何布局两个容器组件，图9是根据一示例性实施例示出的一种容器组件布局方法的流程图，如图9所示，包括：

在步骤S901中，确定待布局的第一容器组件和第二容器组件。

本申请实施例中，第一容器组件和第二容器组件都可以是显示信息的卡片。或者，第一容器组件和第二容器组件中一个可以是显示信息的卡片，另一个可以是该卡片所在的页面。

如此，本申请不仅可以实现卡片之间的布局，还可以实现卡片在页面上的布局，增加应用场景，增加布局层级。

在步骤S902中，获取第一容器组件和第二容器组件之间的位置描述信息。

本申请实施例中，客户端可以获取第一容器组件和第二容器组件之间的位置描述信息。

在步骤S903中，从位置描述信息中确定第一容器组件的第一边对象、第二容器组件的第二边对象和边相对距离。

假设第一容器组件和第二容器组件都是显示信息的卡片，且卡片是矩形，客户端可以从位置描述信息中确定第一容器组件的第一边对象为第一容器组件的底边，第二容器组件的第二边对象为第二容器组件的顶边，边相对距离为X个像素，则客户端可以确定第一容器组件的底边和第二容器组件的定边之间的距离为X个像素。

假设第一容器组件为卡片，第二容器组件为页面，获取第一容器组件和第二容器组件之间的位置描述信息，可以从中确定出两组信息，第一组为：第一容器组件的第一边对象为第一容器组件的顶边，第二容器组件的第二边对象为第二容器组件的顶边，边相对距离为X个像素。第二组为：第一容器组件的第一边对象为第一容器组件的左侧边，第二容器组件的第二边对象为第二容器组件的左侧边，边相对距离为X个像素。则客户端可以确定卡片的顶边距离页面的顶边为X个像素，卡片的左侧边距离页面的左侧边为X个像素。如此，可以确定出卡片和页面的相对位置。

在步骤S904中，基于边相对距离，通过第一边对象和第二边对象将第一容器组件和第二容器组件渲染至容器组件所属的父组件对应的画布视图中。

本申请可以基于边相对距离，通过第一边对象和第二边对象将第一容器组件和第二容器组件渲染至容器组件所属的父组件对应的画布视图中。

可选的，容器组件所属的父组件可以是第一容器组件和第二容器组件的父组件，若容器组件中存在页面，则父组件可以为该页面。

图10是根据一示例性实施例示出的一种组件布局装置框图。参照图10，包括组件确定模块1001，尺寸测量模块1002和布置模块1003。

组件确定模块1001，被配置为执行确定在第一容器组件中，待布局的子组件集；

尺寸测量模块1002，被配置为执行若子组件集对应的权重参数为第一预设值，确定子组件集中的实施组件在目标维度上的第一尺寸，以及确定第一容器组件在目标维度上的第二尺寸；基于第一尺寸、第二尺寸、以及子组件集中，实施组件在目标维度上对应的至少两个占位组件的权重参数，确定至少两个占位组件中的每个占位组件的尺寸；

布置模块1003，被配置为执行基于第一尺寸、至少两个占位组件中的每个占位组件的尺寸在第一容器组件中摆放实施组件、至少两个占位组件中每个占位组件。

在一种可选的实施例中，被配置为执行：

对实施组件进行绘制；

将绘制好的实施组件添加至第一容器组件对应的画布视图中。

在一种可选的实施例中，当实施组件的数量为一个，且目标维度为左右维度或者上下维度时，尺寸测量模块，被配置为执行：

确定实施组件在左右维度或者上下维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

基于第一尺寸、第二尺寸、第一权重参数和第二权重参数确定第一占位组件的第三尺寸和第二占位组件的第四尺寸。

在一种可选的实施例中，当实施组件的数量为一个，且目标维度为左右维度和上下维度时，尺寸测量模块，被配置为执行：

确定实施组件在左右维度上的第一尺寸和上下维度上的第一尺寸；

确定第一容器组件在左右维度上的第二尺寸和上下维度上的第二尺寸。

在一种可选的实施例中，尺寸测量模块，被配置为执行：

确定实施组件在左右维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

确定实施组件在上下维度上对应的第三占位组件的第三权重参数和第四占位组件的第四权重参数；

基于左右维度上的第一尺寸、左右维度上的第二尺寸、第一权重参数和第二权重参数确定第一占位组件在左右维度的第三尺寸，和第二占位组件在左右维度的第四尺寸；

基于上下维度上的第一尺寸、上下维度上的第二尺寸、第三权重参数和第四权重参数确定第三占位组件在上下维度的第三尺寸，和第四占位组件在上下维度的第四尺寸。

在一种可选的实施例中，布置模块，被配置为执行：

基于左右维度的第三尺寸在第一容器组件的左侧摆放第一占位组件；

基于左右维度的第四尺寸在第一容器组件的右侧摆放第二占位组件；

基于上下维度的第三尺寸在第一容器组件的上方摆放第三占位组件；

基于上下维度的第四尺寸在第一容器组件的下方摆放第四占位组件；

在第一容器组件的空闲区域摆放实施组件；空闲区域基于摆放好的第一占位组件、第二占位组件、第三占位组件和第四占位组件确定。

在一种可选的实施例中，装置还包括：

优先参数确定模块，被配置为执行若子组件集对应的权重参数为第二预设值，且子组件集存在对应的组件优先参数，确定子组件集中每个子组件的组件优先级；

排序模块，被配置为执行基于每个子组件的组件优先级对子组件集中的组件进行测量顺序排序；得到子组件序列；子组件序列的相邻两个子组件中，前者子组件的组件优先级大于等于后者子组件的组件优先级；

尺寸测量模块，被配置为执行测量得到第一容器组件在目标维度上的尺寸；测量得到子组件序列中，除尾部子组件之外的每个子组件在目标维度上的尺寸；基于第一容器组件在目标维度上的尺寸和除尾部子组件之外的每个子组件在目标维度上的尺寸确定尾部子组件的尺寸；

布置模块，被配置为执行基于除尾部子组件之外的每个子组件在目标维度上的尺寸和尾部子组件的尺寸在第一容器组件中摆放子组件集中的每个组件。

在一种可选的实施例中，装置还包括绘制模块，被配置为执行：

对子组件集中的每个组件进行绘制；

将绘制好的每个组件添加至第一容器组件对应的画布视图中。

在一种可选的实施例中，装置还包括:

组件确定模块，被配置为执行确定待布局的第一容器组件和第二容器组件；

信息获取模块，被配置为执行获取第一容器组件和第二容器组件之间的位置描述信息；

信息读取模块，被配置为执行从位置描述信息中确定第一容器组件的第一边对象、第二容器组件的第二边对象和边相对距离；

渲染模块，被配置为执行基于边相对距离，通过第一边对象和第二边对象将第一容器组件和第二容器组件渲染至容器组件所属的父组件对应的画布视图中。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图11是根据一示例性实施例示出的一种用于组件布局的装置2000的框图。例如，装置2000可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。

参照图11，装置2000可以包括以下一个或多个组件：处理组件2002，存储器2004，电力组件2006，多媒体组件2008，音频组件2010，输入/输出(I/O)的接口2012，传感器组件2014，以及通信组件2016。

处理组件2002通常控制装置2000的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件2002可以包括一个或多个处理器2020来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件2002可以包括一个或多个模块，便于处理组件2002和其他组件之间的交互。例如，处理组件2002可以包括多媒体模块，以方便多媒体组件2008和处理组件2002之间的交互。

存储器2004被配置为存储各种类型的数据以支持在设备2000的操作。这些数据的示例包括用于在装置2000上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器2004可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电源组件2006为装置2000的各种组件提供电力。电源组件2006可以包括电源管理系统，一个或多个电源，及其他与为装置2000生成、管理和分配电力相关联的组件。

多媒体组件2008包括在所述装置2000和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件2008包括一个前置摄像头和/或后置摄像头。当设备2000处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件2010被配置为输出和/或输入音频信号。例如，音频组件2010包括一个麦克风(MIC)，当装置2000处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器2004或经由通信组件2016发送。在一些实施例中，音频组件2010还包括一个扬声器，用于输出音频信号。

I/O接口2012为处理组件2002和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件2014包括一个或多个传感器，用于为装置2000提供各个方面的状态评估。例如，传感器组件2014可以检测到设备2000的打开/关闭状态，组件的相对定位，例如所述组件为装置2000的显示器和小键盘，传感器组件2014还可以检测装置2000或装置2000一个组件的位置改变，用户与装置2000接触的存在或不存在，装置2000方位或加速/减速和装置2000的温度变化。传感器组件2014可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件2014还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件2014还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件2016被配置为便于装置2000和其他设备之间有线或无线方式的通信。装置2000可以接入基于通信标准的无线网络，如WiFi，运营商网络(如2G、3G、4G或5G)，或它们的组合。在一个示例性实施例中，通信组件2016经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件2016还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，装置2000可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器2004，上述指令可由装置2000的处理器2020执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

Claims (10)

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

确定在第一容器组件中，待布局的子组件集；

若所述子组件集对应的权重参数为第一预设值，确定所述子组件集中的实施组件在目标维度上的第一尺寸，以及确定所述第一容器组件在所述目标维度上的第二尺寸；

基于所述第一尺寸、所述第二尺寸、以及所述子组件集中，所述实施组件在目标维度上对应的至少两个占位组件的权重参数，确定所述至少两个占位组件中的每个占位组件的尺寸；

基于所述第一尺寸、所述至少两个占位组件中的每个占位组件的尺寸在所述第一容器组件中摆放所述实施组件、所述至少两个占位组件中每个占位组件。

2.根据权利要求1所述的组件布局方法，其特征在于，所述基于所述第一尺寸、所述至少两个占位组件中的每个占位组件的尺寸在所述第一容器组件中摆放所述实施组件、所述至少两个占位组件中每个占位组件之后，还包括：

对所述实施组件进行绘制；

将绘制好的实施组件添加至所述第一容器组件对应的画布视图中。

3.根据权利要求1-2任一所述的组件布局方法，其特征在于，当所述实施组件的数量为一个，且所述目标维度为左右维度或者上下维度时，所述基于所述第一尺寸、所述第二尺寸、以及所述子组件集中，所述实施组件在目标维度上对应的至少两个占位组件的权重参数，确定所述至少两个占位组件中的每个占位组件的尺寸，包括：

确定所述实施组件在所述左右维度或者所述上下维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

基于所述第一尺寸、所述第二尺寸、所述第一权重参数和所述第二权重参数确定所述第一占位组件的第三尺寸和所述第二占位组件的第四尺寸。

4.根据权利要求1-2任一所述的组件布局方法，其特征在于，当所述实施组件的数量为一个，且所述目标维度为左右维度和上下维度时，所述确定所述子组件集中的实施组件在目标维度上的第一尺寸，以及确定所述第一容器组件在所述目标维度上的第二尺寸，包括：

确定所述实施组件在所述左右维度上的第一尺寸和所述上下维度上的第一尺寸；

确定所述第一容器组件在所述左右维度上的第二尺寸和所述上下维度上的第二尺寸。

5.根据权利要求4所述的组件布局方法，其特征在于，所述基于所述第一尺寸、所述第二尺寸、以及所述子组件集中，所述实施组件在目标维度上对应的至少两个占位组件的权重参数，确定所述至少两个占位组件中的每个占位组件的尺寸，包括：

确定所述实施组件在所述左右维度上对应的第一占位组件的第一权重参数和第二占位组件的第二权重参数；

确定所述实施组件在所述上下维度上对应的第三占位组件的第三权重参数和第四占位组件的第四权重参数；

基于所述左右维度上的第一尺寸、所述左右维度上的第二尺寸、所述第一权重参数和所述第二权重参数确定所述第一占位组件在所述左右维度的第三尺寸，和所述第二占位组件在所述左右维度的第四尺寸；

基于所述上下维度上的第一尺寸、所述上下维度上的第二尺寸、所述第三权重参数和所述第四权重参数确定所述第三占位组件在所述上下维度的第三尺寸，和所述第四占位组件在所述上下维度的第四尺寸。

6.根据权利要求5所述的组件布局方法，其特征在于，所述基于所述第一尺寸、所述至少两个占位组件中每个占位组件的尺寸在所述第一容器组件中摆放所述实施组件、所述至少两个占位组件中每个占位组件，包括：

基于所述左右维度的第三尺寸在所述第一容器组件的左侧摆放所述第一占位组件；

基于所述左右维度的第四尺寸在所述第一容器组件的右侧摆放所述第二占位组件；

基于所述上下维度的第三尺寸在所述第一容器组件的上方摆放所述第三占位组件；

基于所述上下维度的第四尺寸在所述第一容器组件的下方摆放所述第四占位组件；

在所述第一容器组件的空闲区域摆放所述实施组件；所述空闲区域基于摆放好的所述第一占位组件、所述第二占位组件、所述第三占位组件和所述第四占位组件确定。

7.根据权利要求1所述的组件布局方法，其特征在于，所述方法还包括:

确定待布局的所述第一容器组件和第二容器组件；

获取所述第一容器组件和所述第二容器组件之间的位置描述信息；

从所述位置描述信息中确定所述第一容器组件的第一边对象、所述第二容器组件的第二边对象和边相对距离；

基于所述边相对距离，通过所述第一边对象和所述第二边对象将所述第一容器组件和所述第二容器组件渲染至容器组件所属的父组件对应的画布视图中。

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至6中任一项所述的组件布局方法。

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

10.一种计算机程序产品，其特征在于，所述计算机程序产品包括计算机程序，所述计算机程序存储在可读存储介质中，计算机设备的至少一个处理器从所述可读存储介质读取并执行所述计算机程序，使得所述计算机设备执行如权利要求1至6中任一项所述的组件布局方法。

Images