CN116450129A - 页面布局方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开实施例公开了一种页面布局方法、页面布局装置、电子设备及介质，该方法包括：获取待布局页面，将待布局页面确定为主轴为第一方向的父容器，其中父容器包含待布局页面中的元素，根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器，基于子容器生成页面的布局代码源文件，布局源文件被配置为对待布局页面进行布局，其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。本公开解决绝对布局下自适应不足、视觉效果兼容性差等问题，提高在动态内容页面场景下的灵活性和可扩展性。

Description

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

技术领域

本公开涉及计算机技术领域，尤其涉及一种页面布局方法、装置、电子设备及存储介质。

背景技术

在产品开发的过程中，设计师在绘制好视觉设计稿后，前端需要将视觉稿还原成可交互的页面，一方面要提升还原效果的精确度，另一方面需要保证产出代码的可读性。

目前，在视觉设计稿还原代码领域，生成的前端代码直接使用的是绝对布局体系。绝对布局的程序代码在页面尺寸上布局自适应不足，不能同时兼容多屏幕终端下的视觉还原效果，而且元素的布局和尺寸固定，程序的扩展性不足、兼容性差。

发明内容

本公开实施例提供了一种页面布局方法、装置、电子设备及存储介质，以解决相关技术中在页面尺寸上布局自适应不足，不能同时兼容多屏幕终端，程序的扩展性不足。

有鉴于此，本公开第一方面提供了一种页面布局方法，包括：

获取待布局页面；

将待布局页面确定为主轴为第一方向的父容器，父容器包含待布局页面中的元素；

根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器；

基于子容器生成布局源文件，布局源文件被配置为对待布局页面进行布局，

其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。

在本公开的一些实施例中，根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器包括：

根据待布局页面中各元素在第一方向上的顶端坐标和各元素在第一方向上的长度，确定各元素在第一方向上的尾端坐标；

根据各元素的尾端坐标，对各元素在第一方向上进行排序；

将各元素的尾端坐标所在直线确定为基准线，其中基准线垂直于第一方向，在基准线未穿过任何元素的情况下，将尾端坐标在基准线以上的所有元素划分至备选区块中；

在备选区块包括至少两个元素和/或备选区块中的元素个数小于父容器中的元素个数的情况下，将备选区块确定为子容器。

在本公开的一些实施例中，将备选区块确定为子容器之后，该方法还包括：

在垂直于第一方向的第二方向上，确定子容器中各个元素之间的间距；

在子容器中各个元素之间的间距均大于或等于零的情况下，保留子容器；

在子容器中各个元素之间的任一间距小于零的情况下，将所有间距为负的元素重新划分为新区块，所述新区块作为所述子容器的子容器元素，并设置所述新区块的主轴方向为所述子容器的副轴方向。

在本公开的一些实施例中，确定满足预设条件的子容器包括：

在所述备选区块包括一个元素、或者所述备选区块中的元素个数等于所述待布局页面内所有元素个数的情况下，将所述备选区块中的元素划入所述父容器中；

清除所述备选区块。

在本公开的一些实施例中，该方法还包括：

在第一方向上未确定出满足预设条件的子容器的情况下，确定垂直于第一方向的第二方向上是否存在满足预设条件的子容器；

在所述第二方向上存在满足预设条件的子容器的情况下，基于满足预设条件的子容器生成所述布局源文件；

在所述第二方向上不存在满足预设条件的子容器的情况下，基于所述父容器生成所述布局源文件。

在本公开的一些实施例中，子容器为至少两个，该方法还包括：

将垂直于第一方向的第二方向确定为子容器的主轴，将第一方向确定为子容器的副轴；

分别确定至少两个子容器之间在主轴和副轴上的间距；

根据间距设置子容器的布局属性，布局属性被配置为生成所述布局源文件。

在本公开的一些实施例中，布局属性包括至少两个所述子容器之间在所述主轴和副轴上的非负间距，基于子容器生成布局源文件包括：

基于布局属性为非负间距的子容器，生成布局源文件。

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

获取单元，被配置为执行获取待布局页面；

第一确定单元，被配置为执行将所述待布局页面确定为主轴为第一方向的父容器，所述父容器包含所述待布局页面中的元素；

第二确定单元，被配置为执行根据所述待布局页面中各元素的坐标，在所述第一方向上从所述父容器中确定满足预设条件的子容器；

生成单元，被配置为执行基于所述子容器生成布局源文件，所述布局源文件被配置为对所述待布局页面进行布局，

其中，所述预设条件包括以下至少一项：所述子容器中包括至少两个元素、所述子容器中的元素个数小于所述父容器中的元素个数。

在本公开的一些实施例中，第二确定单元被配置为执行：

根据所述待布局页面中各元素在所述第一方向上的顶端坐标和各元素在所述第一方向上的长度，确定各元素在所述第一方向上的尾端坐标；

根据各元素的尾端坐标，对各元素在所述第一方向上进行排序；

将各元素的尾端坐标所在直线确定为基准线；其中，所述基准线垂直于所述第一方向；

在所述基准线未穿过任何元素的情况下，将尾端坐标在所述基准线以上的所有元素划分至备选区块中；

在所述备选区块包括至少两个元素和/或所述备选区块中的元素个数小于所述父容器中的元素个数的情况下，将所述备选区块确定为所述子容器。

在本公开的一些实施例中，该装置还包括更新单元，被配置为执行：

在垂直于所述第一方向的第二方向上，确定所述子容器中各个元素之间的间距；

在所述子容器中各个元素之间的间距均大于或等于零的情况下，保留所述子容器；

在所述子容器中各个元素之间的任一间距小于零的情况下，将间距小于零的元素重新划分至新区块；

确定所述新区块为所述子容器的子容器元素，并设置所述新区块的主轴方向为所述子容器的副轴方向。

在本公开的一些实施例中，第二确定单元被配置为执行：

在所述备选区块包括一个元素、或者所述备选区块中的元素个数等于所述待布局页面中的所有元素个数的情况下，将所述备选区块中的元素划分至所述父容器中；

清除所述备选区块。

在本公开的一些实施例中，该装置还包括换向单元，被配置为执行：

在所述第一方向上未确定出满足预设条件的子容器的情况下，确定垂直于所述第一方向的第二方向上是否存在满足预设条件的子容器；

在所述第二方向上存在满足预设条件的子容器的情况下，基于满足预设条件的子容器生成所述布局源文件；

在所述第二方向上不存在满足预设条件的子容器的情况下，基于所述父容器生成所述布局源文件。

在本公开的一些实施例中，子容器为至少两个，该装置还包括布局属性设置单元，被配置为执行：

将垂直于所述第一方向的第二方向确定为所述子容器的主轴，将所述第一方向确定为所述子容器的副轴；

分别确定至少两个所述子容器之间在所述主轴和副轴上的间距；

根据所述间距设置所述子容器的布局属性；所述布局属性被配置为生成所述布局源文件。

在本公开的一些实施例中，布局属性包括至少两个所述子容器之间在所述主轴和副轴上的非负间距，生成单元被配置为执行：

基于所述布局属性为非负间距的子容器，生成所述布局源文件。

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

处理器；

被配置为存储处理器可执行指令的存储器；

其中，处理器被配置为执行指令，以实现如本公开第一方面任一可选实现方式中的页面布局方法。

本公开实施例第四方面提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由电子设备的处理器执行时，使得电子设备执行如本公开第一方面任一可选实现方式中的页面布局方法。

本公开实施例第五方面提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如上第一方面任一可选实现方式中的页面布局方法。

综上，根据本公开的方案，通过获取待布局页面，将待布局页面确定为主轴为第一方向的父容器，其中父容器包含待布局页面中的元素，根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器，基于子容器生成布局源文件，布局源文件被配置为对待布局页面进行布局，其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。本公开解决绝对布局下自适应不足、视觉效果兼容性差等问题，提高在动态内容页面场景下的灵活性和可扩展性。

附图说明

为了更清楚地说明本公开实施例技术方案，下面将对实施例和现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，还可以根据这些附图获得其它的附图。

图1是根据一示例性实施例示出的一种页面布局方法的步骤流程图；

图2是根据另一示例性实施例示出的一种页面布局方法的步骤流程图；

图3是根据一示例性实施例示出的一种页面布局方法的示意图；

图4是根据一示例性实施例示出的一种页面布局装置的结构框图；

图5是根据一示例性实施例示出的一种电子设备的结构框图；

图6是根据一示例性实施例示出的一种页面布局装置的结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本公开的技术方案，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行描述，显然，所描述的实施例仅仅是本公开一部分的实施例，而不是全部的实施例。基于本公开中的实施例，都应当属于本公开保护的范围。

视觉设计是以增强设计或交互的方式实现文本、颜色和图像等设计内容，它与用户界面(UI)设计与平面设计等领域具有关联性。设计师在绘制好视觉设计稿后，前端需要将视觉设计稿还原成可交互的页面。随着互联网产品的用户体验重视度越来越高，对视觉设计稿还原提出了更高的要求，一方面要提升还原效果的精确度，另一方面需要保证产出代码的可读性。

目前，在视觉设计稿还原代码领域，生成的前端代码直接使用的是绝对布局体系。绝对布局的程序代码在页面尺寸上布局自适应不足，不能同时兼容多屏幕终端下的视觉还原效果。而且元素的布局和尺寸固定，程序的扩展性不足，动态增加、删除内容元素或者修改元素的尺寸都会降低视觉的还原度，无法在动态内容的页面场景下使用。

下面结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。

图1是根据一示例性实施例示出的一种页面布局方法的步骤流程图。本公开提供了一种视觉设计稿元素的程序化自动转成弹性布局的实现方式，解决绝对布局下自适应不足、视觉效果兼容性差等问题，提高在动态内容页面场景下的灵活性和可扩展性。如图1所示，该方法可以包括以下步骤：

步骤101，获取待布局页面，将待布局页面页面确定为主轴为第一方向的父容器。

在本公开的实施例中，父容器包含待布局页面中的元素。

需要说明的是，本发明提出一种视觉设计稿元素的程序化自动转成弹性(又称Flexible Box或Flex)布局的实现方式。弹性布局元素称为弹性容器，容器默认存在两根轴，主轴和副轴(或称为交叉轴)。

在本公开的实施例中，将页面定义为弹性容器，该页面整体作为父容器，定义容器的主轴为第一方向，其中第一方向可以是横向或纵向。副轴方向为与主轴垂直的方向，本公开中称为第二方向。

可以理解的是，容器可理解为元素的集合，父容器与子容器为一对相对概念。

步骤102，根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器。

其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。

需要说明的是，对于元素的坐标属性描述，通常将网页视图左上角作为顶点即坐标原点，用x、y的值表示元素坐标。元素的尺寸属性包括元素的宽度(例如以width表示)和/或元素的高度(例如以height表示)。

在本公开的实施例中，根据页面中各元素的坐标划分备选区块，具体地，在第一方向上按照一定顺序，逐个以每个元素的坐标为标准划分备选区块。每次划分后确定备选区块是否满足预设条件，满足预设条件的则保留作为子容器，不满足预设条件的则以其他标准重新划分，遍历备选区块，直到所有的元素和备选区块被处理完成。

可以理解的是，备选区块为一个临时定义，可以是容器或元素的集合，经过不断地划分筛选，最终保留下来的备选区块作为子容器，其中根据页面中各元素的坐标确定划分标准，具体方式和顺序本公开不予限制。

在本公开的实施例中，预设条件包括以下至少一项：子容器中包括至少两个元素，例如当子容器中包括一个元素时不符合预设条件；子容器中的元素个数小于父容器中的元素个数，例如当子容器的元素个数等于父容器时不符合预设条件。当不满足预设条件时，将消除备选区块。可以理解的是，预设条件包括但不限于以上至少一项。

在本公开的实施例中，确认子容器还包括确认子容器的属性，属性包括主轴方向和起点、子元素在主轴上的对齐方式以及子元素在副轴上的对齐方式等，从而确定子容器的布局属性，布局属性被配置为生成布局源文件。

步骤103，基于子容器生成布局源文件。

在本公开的实施例中，保留上述步骤102遍历备选区块的层级结构，利用符合条件的子容器生成布局源文件，拼接符合条件的子容器中元素的布局样式属性，生成布局源文件，即页面代码，以对待布局页面进行布局。

结合上述示例，本公开将视觉设计稿元素的程序化自动转成弹性布局，上述步骤实现将元素的绝对布局弹性化，确定子容器及其属性，进而生成页面的布局代码。

综上，根据本公开的一种页面布局方法，通过获取待布局页面，将待布局页面确定为主轴为第一方向的父容器，其中父容器包含待布局页面中的元素，根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器，基于子容器生成页面的布局代码源文件，布局源文件被配置为对待布局页面进行布局，其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。本公开提供了一种视觉设计稿元素的程序化自动转成弹性布局的实现方式，解决绝对布局下自适应不足、视觉效果兼容性差等问题，提高在动态内容页面场景下的灵活性和可扩展性。

图2是根据另一示例性实施例示出的一种页面布局方法的步骤流程图，基于图1所示的实施例，如图2所示，包括步骤201-206，其中步骤102包括下述步骤202-205。为了便于理解，图3是根据一示例性实施例示出的一种页面布局方法的示意图。

步骤201，获取待布局页面，将待布局页面确定为主轴为第一方向的父容器。

上述步骤201的原理与图1所述步骤101的原理相同，在此不再赘述。元素步骤202，根据待布局页面中各元素在第一方向上的顶端坐标和各元素在第一方向上的长度，确定各元素在第一方向上的尾端坐标。

需要说明的是，对于元素的坐标属性描述，通常将网页视图左上角作为顶点即坐标原点，用x、y的值表示元素坐标。

在本公开的实施例中，假设第一方向为纵向，通过步骤201定义页面为一个主轴为纵向的弹性容器作为父容器，在主轴方向上页面中的元素顶点坐标值为y，加上在主轴方向上的长度，可以得到元素在主轴方向上的尾端坐标(y+元素高度)。假设第一方向为横向，在主轴方向上页面中的元素顶点坐标值为x，加上在主轴方向上的宽度，可以得到元素在主轴方向上的尾端坐标(x+元素宽度)。

步骤203，根据各元素的尾端坐标，对各元素在第一方向上进行排序。

在本公开的实施例中，需要遍历页面中所有的区块和元素，第一层遍历页面父容器的直接子元素，遍历后如果划分出的备选区块被确定为子容器，将该备选区块作为第二层遍历的父容器，确定第一方向为垂直于页面父容器主轴的方向，遍历第二层父容器的直接子元素，重复步骤202-205。

其中，第一层遍历和第二层遍历是为了举例说明遍历关系，在实际实施的过程中，在经过第二层遍历可能还有第三层、第四层等，根据具体情况，遍历完页面所有的区块和元素时结束。

在本公开的一种实施例中，假若第一方向为纵向，第一层遍历将页面中的所有直接子元素集按元素的尾端坐标(y+元素高度)从上到下排序，如图3所示，排序后循序为顶部导航、面包屑A/B、内容区A、内容区B、内容区C、左侧菜单。假若第一层遍历筛选出区块A作为子容器，在第二层遍历时以区块A为父容器，此时第一方向变为横向，区块A的所有直接子元素集按元素的尾端坐标(x+元素宽度)从上到下排序，排序后循序为左侧菜单、面包屑A/B以及内容区A、内容区B、内容区C。

需要说明的是，在遍历过程中，需要重复执行该步骤，执行时，可能页面中已经有确定的子容器，此时父容器中的子元素包括了子容器中的元素，而该方法不对已经确定子容器的元素再做排序划分，因此定义了直接子元素，直接子元素不包括已划分在确定的子容器中的元素。

步骤204，将各元素的尾端坐标所在直线确定为基准线，其中基准线垂直于第一方向，在基准线未穿过任何元素的情况下，将尾端坐标在基准线以上的所有元素划分至备选区块中。

本公开的实施例中，按照步骤203的排序结果，依次以各元素的尾端坐标为标准确定基准线。

在本公开的实施例中，备选区块为一个临时定义，可以是容器或元素的集合，经过依次以各元素的尾端坐标为标准划分，以及预设条件的筛选，最终保留下来的备选区块作为子容器。

在本公开的实施例中，如果该标准未经过任何元素内容区，则将尚未划分为任何区块集的元素且尾端坐标在标准以上的所有元素划分为一个新的区块，否则以下一个元素的尾端坐标为标准重复尝试。

举例而言，第一方向为纵向，如图3所示，第一层遍历，页面为父容器，首先以顶部导航的尾端坐标为标准，在横向上确定基准线，没有穿过任何元素，因此将尾端坐标在基准线以上的所有元素划分为备选区块；接着以面包屑A/B的尾端坐标为标准，在横向上确定基准线，穿过了左侧菜单，因此不能划分备选区块，类似的，接着依次以内容区A、内容区B、内容区C的尾端坐标为标准，均穿过了左侧菜单，因此不能划分备选区块；最后以左侧菜单的尾端坐标为标准，在横向上确定基准线，没有穿过任何元素，因此将除顶部导航外尾端坐标在基准线以上的所有元素划分为备选区块，包括面包屑A/B、内容区A、内容区B、内容区C以及左侧菜单，最终划分出包括顶部导航的备选区块以及图示中框选的区块A。

在本公开的实施例中，根据遍历页面中所有的区块和元素的原则，如果划分出的备选区块被确定为子容器，将该备选区块作为第二层遍历的父容器；如果划分出的备选区块未被确定为子容器，需要将该备选区块中不满足条件的子元素重新进行遍历，这些元素划分为一个新的区块作为第二层遍历的父容器。第二层遍历的第一方向垂直于第一层的第一方向。

举例而言，如图3所示，第二层遍历，区块A为父容器，确定第一方向为横向，依次以左侧菜单、面包屑A/B以及内容区A、内容区B、内容区C的尾端坐标为标准划分。首先以左侧菜单的尾端坐标为标准，没有穿过，可以划分出备选区块；其次以面包屑A/B的尾端坐标为标准，穿过了内容区A、内容区B、内容区C，因此不能划分备选区块；最后以内容区A的尾端坐标为标准，内容区A、B、C的尾端坐标相同，故尾端坐标互相没有穿过，可以划分为备选区块，最终划分出包括左侧菜单的备选区块以及图示中框选的区块B。

步骤205，在备选区块包括至少两个元素和/或备选区块中的元素个数小于父容器中的元素个数的情况下，将备选区块确定为子容器。

在本公开的实施例中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。当不满足预设条件时，将备选区块内的元素划入该备选区块的父容器内，同时清除该区块。

可以理解的是，预设条件包括但不限于以上至少一项。

本公开的一些可选实施例中，确定满足预设条件的子容器包括：在备选区块包括一个元素、或者备选区块中的元素个数等于页面内所有元素个数的情况下，将备选区块中的元素划入父容器中；清除备选区块。

具体地，如果某个子容器内只有一个元素，则无需单独划分子容器，可将子容器内的元素划入该子容器的父容器内，同时清除该子容器，从而简化布局程序。例如图3，第一层遍历中，划分出只包括顶部导航的备选区块，将顶部导航划入页面父容器内，同时清除该备选区块；第二层遍历中，划分出只包括左侧菜单的的备选区块，将左侧菜单划入区块A父容器内，同时清除该备选区块。

在本公开的实施例中，确认子容器还包括确认子容器的属性，属性包括主轴方向和起点、子元素在主轴上的对齐方式以及子元素在副轴上的对齐方式等。

举例而言，满足预设条件的备选区块作为一个弹性容器保留，且将区块的主轴方向设为该备选区块父容器的副轴方向，例如横向。备选区块内的元素集均作为该容器的子元素，备选区块的新坐标为元素集中最小的左上角坐标值，宽高为元素集中最大的尾端坐标减去最小的左上角坐标值。

在本公开的实施例中，子容器为相对父容器的一个定义，举例而言对于页面父容器，子容器可能有区块A，而对于区块A作为父容器，子容器可能有区块B。

根据本公开的方案，通过将视觉设计稿元素自动转成弹性布局的实现方式，智能生成前端代码节点，定义弹性容器的主轴方向，解决绝对布局下自适应不足、视觉效果兼容性差等问题，提高在动态内容页面场景下的灵活性和可扩展性。

本公开的一些实施例中，将备选区块确定为子容器之后，该方法还包括：

在垂直于第一方向的第二方向上，确定子容器中各个元素之间的间距；

在子容器中各个元素之间的间距均大于或等于零的情况下，保留子容器；

在子容器中各个元素的任一间距小于零的情况下，将所有间距为负的元素重新划分为新区块，新区块作为所述子容器的子容器元素，并设置新区块的主轴方向为子容器的副轴方向。

应当理解的是，以第二方向的正方向为前，反方向为后，在前的元素的尾端坐标与在后的元素的顶端坐标之差为该两个元素之间的间距。

在本公开中，父容器的主轴方向为第一方向，副轴方向为第二方向；子容器的主轴方向为父容器的副轴方向(第二方向)，副轴方向为父容器的主轴方向(第一方向)；新区块的主轴方向为子容器的副轴方向(第一方向)；副轴方向为子容器的主轴方向(第二方向)。

在本公开的实施例中，在垂直于第一方向的第二方向上，例如第一方向为纵向y轴方向，第二方向为横向x轴方向，通过元素之间横向的坐标轴值x计算各个元素之间的间距，例如元素A和元素B在横向到顶点的距离排序，为元素A、元素B，那么它们之间的间距为元素B的x值减去元素A的x值加上元素宽度。

在本公开的实施例中，当元素的中间有重合的部分例如元素之间有z字组合排列等情况，此时元素之间的间距为负值，将其中间距为负值的所有元素划分为一个新的区块，作为父容器的子元素，确定区块一方向为垂直于原本父容器的主轴方向，重新执行步骤202-205。

本公开的一些可选实施例中，在第一方向上未确定出满足预设条件的子容器的情况下，确定垂直于第一方向的第二方向上是否存在子容器；在所述第二方向上存在满足预设条件的子容器的情况下，基于满足预设条件的子容器生成所述布局源文件；在所述第二方向上不存在满足预设条件的子容器的情况下，基于所述父容器生成所述布局源文件。

具体地，例如图3所示，如果第一方向为横轴，满足预设条件的子容器不存在，那么确定垂直于第一方向的第二方向即纵轴是否存在子容器。

本公开的一些可选实施例中，子容器为至少两个，该方法还包括：

将垂直于第一方向的第二方向确定为子容器的主轴，将第一方向确定为子容器的副轴；

分别确定至少两个子容器之间在主轴和副轴上的间距；

根据间距设置子容器的布局属性。

在本公开中，确定子容器之间的间距，并根据间距设置子容器的布局属性可以优化显示效果。本公开的方案利用具有非负间距的子容器进行页面布局，能够避免存在负值的元素布局属性现象，防止出现元素或区块重叠。

在本公开的一种实施例中，若备选区块满足预设条件作为子容器，确定第一方向例如纵向作为子容器的副轴，垂直于第一方向的第二方向如横向作为子容器的主轴。计算主轴方向上子容器的彼此间距，如果所有的间距值相等，设置父元素主轴方向的排列属性样式“内容调整”表示子容器的对齐方式，否则间距被设为区块元素的“边界”值。计算子容器中元素对于父容器副轴的间距，若前后两个间距值相同，则设置子容器元素沿容器副轴方向的排列样式“自对齐”属性为“居中”表示子容器中子元素居中对齐，否则设置子容器的前间距值。统计已设置“自对齐”属性的子容器，取最多数的“自对齐”值设置为父容器的“对齐项”属性。

步骤206，基于子容器生成布局源文件。

在本公开的可选实施例中，基于所述布局属性为非负间距的子容器，生成所述布局源文件。

在本公开的实施例中，保留上述遍历备选区块的层级结构，拼接所有区块和元素的布局样式属性，生成页面代码。

综上，根据本公开的一种页面布局方法，通过获取待布局页面，将待布局页面确定为主轴为第一方向的父容器，其中父容器包含待布局页面中的元素，根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器，基于子容器生成页面的布局代码源文件，布局源文件被配置为对待布局页面进行布局，其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。本公开提供了一种视觉设计稿元素的程序化自动转成弹性布局的实现方式，解决绝对布局下自适应不足、视觉效果兼容性差等问题，提高在动态内容页面场景下的灵活性和可扩展性。本公开避免存在负值的元素布局属性现象，本公开的方案基于遍历备选区块的层级结构智能生成前端代码节点，定义弹性容器的主轴方向，当一个方向上没有符合条件的子容器生成时，可以更换另一方向为主轴方向再次判断，并基于当前符合条件的子容器生成页面布局源文件，完整遍历全部页面元素，确定可能的布局方案。相对现有技术，本公开能同时兼容多屏幕终端下的视觉还原效果，提升代码可复用性、可扩展性。

本公开能够实现如下有益技术效果：

1、本公开的方案实现将视觉设计稿中元素的绝对定位布局弹性化；

2、本公开的方案可以避免存在负值的元素布局属性现象；

3、本公开的方案智能生成前端代码节点，定义弹性容器的主轴方向，当一个方向上没有符合条件的子容器生成时，可以更换另一方向为主轴方向再次判断，并基于当前符合条件的子容器生成页面布局源文件，完整遍历全部页面元素，确定可能的布局方案；

4、本公开的方案能同时兼容多屏幕终端下的视觉还原效果，提升代码可复用性、可扩展性。

图4是根据一示例性实施例示出的一种页面布局装置的结构框图，装置400可以包括：

获取单元410，被配置为执行获取待布局页面；

第一确定单元420，被配置为执行将所述待布局页面确定为主轴为第一方向的父容器，所述父容器包含所述待布局页面中的元素；

第二确定单元430，被配置为执行根据所述待布局页面中各元素的坐标，在第一方向上从所述父容器中确定满足预设条件的子容器；

生成单元440，被配置为执行基于所述子容器生成布局源文件，所述布局源文件被配置为对所述待布局页面进行布局，

其中，所述预设条件包括以下至少一项：所述子容器中包括至少两个元素、所述子容器中的元素个数小于所述父容器中的元素个数。

根据本公开实施例所提供的页面布局方案，将页面确定为主轴为第一方向的父容器，根据页面中各元素的坐标，确定满足预设条件的子容器，基于子容器生成页面的布局代码，其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数，提供了一种视觉设计稿元素的程序化自动转成弹性布局的实现方式，能同时兼容多屏幕终端下的视觉还原效果，提升代码可复用性、可扩展性。

在本公开的一些实施例中，第一确定单元420具体被配置为执行：

根据所述待布局页面中各元素在所述第一方向上的顶端坐标和各元素在所述第一方向上的长度，确定各元素在所述第一方向上的尾端坐标；

根据各元素的尾端坐标，对各元素在所述第一方向上进行排序；

将各元素的尾端坐标所在直线确定为基准线，其中所述基准线垂直于所述第一方向，在所述基准线未穿过任何元素的情况下，将尾端坐标在所述基准线以上的所有元素划分至备选区块中；

在所述备选区块包括至少两个元素和/或所述备选区块中的元素个数小于所述父容器中的元素个数的情况下，将所述备选区块确定为所述子容器。

在本公开的一些实施例中，该装置还包括更新单元，具体被配置为执行：

在垂直于所述第一方向的第二方向上，确定所述子容器中各个元素之间的间距；

在所述子容器中各个元素之间的间距均大于或等于零的情况下，保留所述子容器；

在所述子容器中各个元素之间的任一间距小于零的情况下，将所有间距为负的元素重新划分为新区块，所述新区块作为所述子容器的子容器元素，并设置所述新区块的主轴方向为所述子容器的副轴方向。

在本公开的一些实施例中，第二确定单元430被配置为执行：

在所述备选区块包括一个元素、或者所述备选区块中的元素个数等于所述待布局页面内所有元素个数的情况下，将所述备选区块中的元素划入所述父容器中；清除所述备选区块。

在本公开的一些实施例中，该装置还包括换向单元，被配置为执行在所述第一方向上未确定出满足预设条件的子容器的情况下，确定垂直于所述第一方向的第二方向上是否存在所述子容器；在所述第二方向上存在满足预设条件的子容器的情况下，基于满足预设条件的子容器生成所述布局源文件；在所述第二方向上不存在满足预设条件的子容器的情况下，基于所述父容器生成所述布局源文件。

在本公开的一些实施例中，子容器为至少两个，该装置还包括布局属性设置单元，被配置为执行：

将垂直于所述第一方向的第二方向确定为所述子容器的主轴，将所述第一方向确定为所述子容器的副轴；

分别确定至少两个所述子容器之间在所述主轴和副轴上的间距；

根据所述间距设置所述子容器的布局属性，其中，布局属性被配置为生成所述布局源文件。

在本公开的一些实施例中，布局属性包括至少两个所述子容器之间在所述主轴和副轴上的非负间距，生成单元440被配置为执行：

基于所述布局属性为非负间距的子容器，生成所述布局源文件。

综上，根据本公开的一种页面布局装置，通过获取待布局页面，将待布局页面确定为主轴为第一方向的父容器，其中父容器包含待布局页面中的元素，根据待布局页面中各元素的坐标，在第一方向上从父容器中确定满足预设条件的子容器，基于子容器生成页面的布局代码源文件，布局源文件被配置为对待布局页面进行布局，其中，预设条件包括以下至少一项：子容器中包括至少两个元素、子容器中的元素个数小于父容器中的元素个数。本公开提供了一种视觉设计稿元素的程序化自动转成弹性布局的实现方式，解决绝对布局下自适应不足、视觉效果兼容性差等问题，提高在动态内容页面场景下的灵活性和可扩展性。本公开避免存在负值的元素布局属性现象，本公开的方案基于遍历备选区块的层级结构智能生成前端代码节点，定义弹性容器的主轴方向，当一个方向上没有符合条件的子容器生成时，可以更换另一方向为主轴方向再次判断，并基于当前符合条件的子容器生成页面布局源文件，完整遍历全部页面元素，确定可能的布局方案。相对现有技术，本公开能同时兼容多屏幕终端下的视觉还原效果，提升代码可复用性、可扩展性。

图5是根据一示例性实施例示出的一种电子设备的结构框图，电子设备500可以包括：

处理器501；

被配置为存储处理器501可执行指令的存储器502；

其中，处理器501被配置为执行图1、图2所示实施例中的方法。

在示例性实施例中，还提供了一种非临时性计算机可读存储介质，当存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行图1、图2所示的任一实施例的方法。

在示例性实施例中，还提供了一种包含指令的计算机程序产品，当其在电子设备上运行时，使得电子设备能够执行图1、图2、图3或图4所示的任一实施例的方法。

图6是根据一示例性实施例示出的另一种页面布局装置的结构框图，装置600可以包括以下一个或多个组件：处理组件602，存储器604，电源组件606，多媒体组件608，音频组件610，输入/输出(I/O)的接口613，传感器组件614，以及通信组件616。

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

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

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

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

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

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

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

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

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

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

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。

计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本公开实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘Solid StateDisk(SSD))等。

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

在本公开所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

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

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

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

获取待布局页面；

将所述待布局页面确定为主轴为第一方向的父容器，所述父容器包含所述待布局页面中的元素；

根据所述待布局页面中各元素的坐标，在所述第一方向上从所述父容器中确定满足预设条件的子容器；

基于所述子容器生成布局源文件；所述布局源文件被配置为对所述待布局页面进行布局，

其中，所述预设条件包括以下至少一项：所述子容器中包括至少两个元素、所述子容器中的元素个数小于所述父容器中的元素个数。

2.根据权利要求1所述的方法，其特征在于，所述根据所述待布局页面中各元素的坐标，在所述第一方向上从所述父容器中确定满足预设条件的子容器包括：

根据所述待布局页面中各元素在所述第一方向上的顶端坐标和各元素在所述第一方向上的长度，确定各元素在所述第一方向上的尾端坐标；

根据各元素的尾端坐标，对各元素在所述第一方向上进行排序；

将各元素的尾端坐标所在直线确定为基准线；其中，所述基准线垂直于所述第一方向；

在所述基准线未穿过任何元素的情况下，将尾端坐标在所述基准线以上的所有元素划分至备选区块中；

在所述备选区块包括至少两个元素和/或所述备选区块中的元素个数小于所述父容器中的元素个数的情况下，将所述备选区块确定为所述子容器。

3.根据权利要求2所述的方法，其特征在于，所述将所述备选区块确定为所述子容器之后，所述方法还包括：

在垂直于所述第一方向的第二方向上，确定所述子容器中各个元素之间的间距；

在所述子容器中各个元素之间的间距均大于或等于零的情况下，保留所述子容器；

在所述子容器中各个元素之间的任一间距小于零的情况下，将间距小于零的元素重新划分至新区块；

确定所述新区块为所述子容器的子容器元素，并设置所述新区块的主轴方向为所述子容器的副轴方向。

4.根据权利要求2所述的方法，其特征在于，所述方法还包括：

在所述备选区块包括一个元素、或者所述备选区块中的元素个数等于所述待布局页面中的所有元素个数的情况下，将所述备选区块中的元素划分至所述父容器中；

清除所述备选区块。

5.根据权利要求1至3中任一项所述的方法，其特征在于，所述方法还包括：

在所述第一方向上未确定出满足预设条件的子容器的情况下，确定垂直于所述第一方向的第二方向上是否存在满足预设条件的子容器；

在所述第二方向上存在满足预设条件的子容器的情况下，基于满足预设条件的子容器生成所述布局源文件；

在所述第二方向上不存在满足预设条件的子容器的情况下，基于所述父容器生成所述布局源文件。

6.根据权利要求1至3中任一项所述的方法，其特征在于，所述子容器为至少两个，所述方法还包括：

将垂直于所述第一方向的第二方向确定为所述子容器的主轴，将所述第一方向确定为所述子容器的副轴；

分别确定至少两个所述子容器之间在所述主轴和副轴上的间距；

根据所述间距设置所述子容器的布局属性；所述布局属性被配置为生成所述布局源文件。

7.根据权利要求6所述的方法，其特征在于，所述布局属性包括至少两个所述子容器之间在所述主轴和副轴上的非负间距，所述基于所述子容器生成所述布局源文件包括：

基于所述布局属性为非负间距的子容器，生成所述布局源文件。

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

获取单元，被配置为执行获取待布局页面；

第一确定单元，被配置为执行将所述待布局页面确定为主轴为第一方向的父容器，所述父容器包含所述待布局页面中的元素；

第二确定单元，被配置为执行根据所述待布局页面中各元素的坐标，在所述第一方向上从所述父容器中确定满足预设条件的子容器；

生成单元，被配置为执行基于所述子容器生成布局源文件，所述布局源文件被配置为对所述待布局页面进行布局，

其中，所述预设条件包括以下至少一项：所述子容器中包括至少两个元素、所述子容器中的元素个数小于所述父容器中的元素个数。

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

处理器；

被配置为存储所述处理器可执行指令的存储器；

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

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