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

技术领域

本申请涉及计算机领域，具体而言，涉及一种页面布局方法、装置、电子设备和存储介质。

背景技术

目前，现有页面布局方式中，为了改变布局控件在页面中的位置、大小，需要用户基于对布局控件的属性的理解，手动设置属性参数，这样一来，就提高了布局控件的操作复杂度。

另一方面，现有布局方式所采用的栅格的尺寸大小固定，进而布局控件的大小只能是固定栅格尺寸的倍数，从而具有设置不灵活的缺点。

发明内容

本申请实施例的目的在于提供一种页面布局方法、装置、电子设备和存储介质，用以在不需要手动设置布局空间的属性参数的前提下，完成布局控件在目标页面上的大小、位置设置，从而具有操作简单的优点。另一方面，本申请的栅格的尺寸大小可设置，进而布局控件的大小可基于多种栅格的尺寸设置，从而布局控件的设置具有更优的配置灵活性。

第一方面，本发明提供一种页面布局方法，所述方法包括：

接收用户输入的栅格划分数；

基于所述用户输入的栅格划分数绘制所述目标页面的栅格层，并生成所述栅格层中每个所述栅格的坐标；

接收用户针对布局控件的新建指令，并基于新建指令创建布局控件，所述布局控件对应一个控件ID；

基于所述目标页面的栅格层将所述布局控件放置在所述目标页面的预设位置，并将所述布局空间的控件ID与一个或多个栅格坐标绑定；

响应所述用户针对布局控件的第一拖拽指令，以在所述目标页面上实时显示所述布局控件的宽高变化；

响应所述用户针对布局控件的第二拖拽指令，以实时显示所述布局空间在所述目标页面中的位置。

在本申请第一方面中，通过接收用户输入的栅格划分数，进而能够基于用户输入的栅格划分数绘制目标页面的栅格层，并生成栅格层中每个栅格的坐标，进而通过接收用户针对布局控件的新建指令，能够基于新建指令创建布局控件，并基于目标页面的栅格层将布局控件放置在目标页面的预设位置，其中，布局控件对应一个控件ID，布局空间的控件ID与一个或多个栅格坐标绑定。另一方，通过响应用户针对布局控件的第一拖拽指令，能够在目标页面上实时显示布局控件的宽高变化；通过响应用户针对布局控件的第二拖拽指令，能够实时显示布局空间在目标页面中的位置。

与现有技术相比，在本申请中，用户可通过输入栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

在可选的实施方式中，所述方法还包括：

基于所述目标页面的宽高计算所述目标页面的最大栅格划分数；

判断所述用户输入的栅格划分数是否小于等于所述目标页面的最大栅格划分数，若所述用户输入的栅格划分数大于所述目标页面的最大栅格划分数，则生成输入错误提示。

在上述可选的实施方式中，通过所述目标页面的宽高可计算所述目标页面的最大栅格划分数，进而能够在所述用户输入的栅格划分数大于所述目标页面的最大栅格划分数时，生成输入错误提示，以提示用户不可以设置大于最大栅格划分数的栅格划分数。

在可选的实施方式中，所述方法还包括：

当所述第一拖拽指令触发完成时，基于所述布局控件最后一次被拖拽时的宽高，和所述栅格的宽高设置确定所述布局控件的当前宽高；

以及，所述方法还包括：

当所述布局控件最后一次被拖拽时的宽不与所述栅格的宽形成整倍数关系时，基于四舍五入对所述布局控件最后一次被拖拽时的宽取整，得到所述布局控件的当前宽，所述布局控件的当前宽与所述栅格的宽形成整倍数关系，所述布局控件最后一次被拖拽时的宽大于所述栅格的宽；

当所述布局控件最后一次被拖拽时的高不与所述栅格的高形成整倍数关系时，基于四舍五入对所述布局控件最后一次被拖拽时的高取整，得到所述布局控件的当前高，其中，所述布局控件的当前高与所述栅格的高形成整倍数关系，所述布局控件最后一次被拖拽时的高大于所述栅格的高。

在上述可选的实施方式中，当布局控件最后一次被拖拽时的宽不与栅格的宽形成整倍数关系时，能够基于四舍五入对布局控件最后一次被拖拽时的宽取整，得到布局控件的当前宽，布局控件的当前宽与栅格的宽形成整倍数关系，布局控件最后一次被拖拽时的宽大于栅格的宽。另一方面，当布局控件最后一次被拖拽时的高不与栅格的高形成整倍数关系时，能够基于四舍五入对布局控件最后一次被拖拽时的高取整，得到布局控件的当前高，其中，布局控件的当前高与栅格的高形成整倍数关系，布局控件最后一次被拖拽时的高大于栅格的高。

在可选的实施方式中，所述方法还包括：

基于所述布局控件的当前宽高更新所述布局空间的控件ID绑定的栅格坐标。

在上述可选的实施方式中，基于所述布局控件的当前宽高能够更新所述布局空间的控件ID绑定的栅格坐标。

在可选的实施方式中，所述方法还包括：

当所述第二拖拽指令触发完成时，基于所述布局控件的当前位置更新所述布局空间的控件ID绑定的栅格坐标。

在上述可选的实施方式中，当所述第二拖拽指令触发完成时，基于所述布局控件的当前位置能够更新所述布局空间的控件ID绑定的栅格坐标。

在可选的实施方式中，所述方法还包括：

响应针对所述布局控件的删除指令，以在所述目标页面中不显示所述布局控件并删除所述布局控件的数据；

或响应针对所述布局控件的隐藏指令，以在所述目标页面中隐藏所述布局控件；

或响应针对所述目标页面的重置指令，以删除所述目标页面中所有所述布局控件及每个所述布局控件的数据。

在上述可选的实施方式，通过响应删除指令、隐藏指令或重置指令，可完成布局控件的删除、隐藏后页面重置操作。

在可选的实施方式中，所述方法还包括：

判断所述目标页面是否存在可放置区域，若存在所述可放置区域且所述可放置区域至少有两个时，则将距离所述栅格层的原点最近的可放置区域作为所述预设位置。

在上述可选的实施方式中，可将距离所述栅格层的原点最近的可放置区域作为所述预设位置。

第二方面，本发明提供一种页面布局装置，所述装置包括：

第一接收模块，用于接收用户输入的栅格划分数；

第一绘制模块，用于基于所述用户输入的栅格划分数绘制所述目标页面的栅格层，并生成所述栅格层中每个所述栅格的坐标；

第二接收模块，用于接收用户针对布局控件的新建指令，并基于新建指令创建布局控件，所述布局控件对应一个控件ID；

第二绘制模块，用于基于所述目标页面的栅格层将所述布局控件放置在所述目标页面的预设位置，并将所述布局空间的控件ID与一个或多个栅格坐标绑定；

第一响应模块，用于响应所述用户针对布局控件的第一拖拽指令，以在所述目标页面上实时显示所述布局控件的宽高变化；

第二响应模块，用于响应所述用户针对布局控件的第二拖拽指令，以实时显示所述布局空间在所述目标页面中的位置。

在本申请第二方面中，通过接收用户输入的栅格划分数，进而能够基于用户输入的栅格划分数绘制目标页面的栅格层，并生成栅格层中每个栅格的坐标，进而通过接收用户针对布局控件的新建指令，能够基于新建指令创建布局控件，并基于目标页面的栅格层将布局控件放置在目标页面的预设位置，其中，布局控件对应一个控件ID，布局空间的控件ID与一个或多个栅格坐标绑定。另一方，通过响应用户针对布局控件的第一拖拽指令，能够在目标页面上实时显示布局控件的宽高变化；通过响应用户针对布局控件的第二拖拽指令，能够实时显示布局空间在目标页面中的位置。

与现有技术相比，在本申请中，用户可通过输入栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

第三方面，本发明提供一种电子设备，包括：

处理器；以及

存储器，配置用于存储机器可读指令，所述指令在由所述处理器执行时，执行如前述实施方式任一项所述的页面布局方法。

本申请第三方面的电子设备通过执行页面布局方法，进而可通过用户输入的栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

第四方面，本发明提供一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行如前述实施方式任一项所述的页面布局方法。

本申请第四方面的存储介质通过执行页面布局方法，进而可通过用户输入的栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1是本申请实施例公开的一种页面布局方法的流程示意图；

图2是本申请实施例公开的一种页面布局装置的结构示意图；

图3是本申请实施例公开的一种电子设备的结构示意图。

具体实施方式

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

实施例一

请参阅图1，图1是本申请实施例公开的一种页面布局方法的流程示意图，如图1所示，本申请实施例的方法包括以下步骤：

101、接收用户输入的栅格划分数；

102、基于用户输入的栅格划分数绘制目标页面的栅格层，并生成栅格层中每个栅格的坐标；

103、接收用户针对布局控件的新建指令，并基于新建指令创建布局控件，布局控件对应一个控件ID；

104、基于目标页面的栅格层将布局控件放置在目标页面的预设位置，并将布局空间的控件ID与一个或多个栅格坐标绑定；

105、响应用户针对布局控件的第一拖拽指令，以在目标页面上实时显示布局控件的宽高变化；

106、响应用户针对布局控件的第二拖拽指令，以实时显示布局空间在目标页面中的位置。

在本申请实施例中，通过接收用户输入的栅格划分数，进而能够基于用户输入的栅格划分数绘制目标页面的栅格层，并生成栅格层中每个栅格的坐标，进而通过接收用户针对布局控件的新建指令，能够基于新建指令创建布局控件，并基于目标页面的栅格层将布局控件放置在目标页面的预设位置，其中，布局控件对应一个控件ID，布局空间的控件ID与一个或多个栅格坐标绑定。另一方，通过响应用户针对布局控件的第一拖拽指令，能够在目标页面上实时显示布局控件的宽高变化；通过响应用户针对布局控件的第二拖拽指令，能够实时显示布局空间在目标页面中的位置。

与现有技术相比，在本申请中，用户可通过输入栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

在本申请实施例中，示例地，假设用户需要在目标页面上增加一个用于响应用户点击操作的布局控件，进而当用户点击新建按钮时，则在目标页面上生成用于响应用户点击操作的布局控件，此时，用于响应用户点击操作的布局控件对应的大小和位置可以是默认，例如该布局控件的宽高为500*720，之后，用户可通过拖拽该布局控件的四个边角或边，沿四周拉伸该部件控件，从而改变该布局控件的宽高。在另一个示例中，通过可通过拖拽该布局控件，将位于预设位置的布局控件，拖拽至其他位置。

在本申请实施例中，栅格的坐标可以是栅格左上角交点坐标。进一步地，栅格层由多个栅格构成，例如，栅格层可以由50*100个栅格构成。

在本申请实施例中，每个布局控件对应一个具有唯一性的控件ID，其中，该控件ID与一个或多个栅格坐标绑定，用于表示布局控件所占的栅格数量。

在本申请实施例中，当用户触发第一拖拽指令过程中，可在目标页面上实时显示布局控件的宽高变化，例如，在目标页面实时显示布局控件在任意时间点下的高度。进一步地，在第一拖拽指令未结束之前，可通过阴影方式显示显示布局控件的宽高，其中，采用阴影方式显示布局控件拖拽后的预期大小。另一方面，当第一拖拽指令结束后，则取消阴影方式显示显示布局控件的宽高，而直接在目标页面上绘制修改的布局控件。

在可选的实施方式中，本申请实施例的方法还包括以下步骤：

基于目标页面的宽高计算目标页面的最大栅格划分数；

判断用户输入的栅格划分数是否小于等于目标页面的最大栅格划分数，若用户输入的栅格划分数大于目标页面的最大栅格划分数，则生成输入错误提示。

在上述可选的实施方式中，通过目标页面的宽高可计算目标页面的最大栅格划分数，进而能够在用户输入的栅格划分数大于目标页面的最大栅格划分数时，生成输入错误提示，以提示用户不可以设置大于最大栅格划分数的栅格划分数。

在上述可选的实施方式中，基于目标页面的宽高计算目标页面的最大栅格划分数的一种具体方式为：

确定栅格最小尺寸；

基于目标页面的宽高和栅格最小尺寸，计算得到最大栅格划分数。

其中，栅格最小尺寸是指能够完整显示布局控件的名称的尺寸，进一步地，栅格最小尺寸可以是8px。

在可选的实施方式中，本申请实施例的方法还包括：

当第一拖拽指令触发完成时，基于布局控件最后一次被拖拽时的宽高，和栅格的宽高设置确定布局控件的当前宽高，相应地，本申请实施例的方法还包括以下步骤：

当布局控件最后一次被拖拽时的宽不与栅格的宽形成整倍数关系时，基于四舍五入对布局控件最后一次被拖拽时的宽取整，得到布局控件的当前宽，布局控件的当前宽与栅格的宽形成整倍数关系，布局控件最后一次被拖拽时的宽大于栅格的宽；

当布局控件最后一次被拖拽时的高不与栅格的高形成整倍数关系时，基于四舍五入对布局控件最后一次被拖拽时的高取整，得到布局控件的当前高，其中，布局控件的当前高与栅格的高形成整倍数关系，布局控件最后一次被拖拽时的高大于栅格的高。

在上述可选的实施方式中，当布局控件最后一次被拖拽时的宽不与栅格的宽形成整倍数关系时，能够基于四舍五入对布局控件最后一次被拖拽时的宽取整，得到布局控件的当前宽，布局控件的当前宽与栅格的宽形成整倍数关系，布局控件最后一次被拖拽时的宽大于栅格的宽。另一方面，当布局控件最后一次被拖拽时的高不与栅格的高形成整倍数关系时，能够基于四舍五入对布局控件最后一次被拖拽时的高取整，得到布局控件的当前高，其中，布局控件的当前高与栅格的高形成整倍数关系，布局控件最后一次被拖拽时的高大于栅格的高。

在上述可选的实施方式中，作为一种示例，假设布局控件最后一次被拖拽时的宽63px，而栅格的宽为8px，此时，63px不是8px的整倍数关系，则由于63除以8所得到的余数为7，7大于5，则在经过拖拽之后，将布局控件的当前宽设置为64px。

在可选的实施方式中，本申请实施例的方法还包括：

基于布局控件的当前宽高更新布局空间的控件ID绑定的栅格坐标。

在上述可选的实施方式中，基于布局控件的当前宽高能够更新布局空间的控件ID绑定的栅格坐标。

在可选的实施方式中，本申请实施例的方法还包括以下步骤：

当第二拖拽指令触发完成时，基于布局控件的当前位置更新布局空间的控件ID绑定的栅格坐标。

在上述可选的实施方式中，当第二拖拽指令触发完成时，基于布局控件的当前位置能够更新布局空间的控件ID绑定的栅格坐标。

在可选的实施方式中，本申请实施例的方法还包括以下步骤：

响应针对布局控件的删除指令，以在目标页面中不显示布局控件并删除布局控件的数据；

或响应针对布局控件的隐藏指令，以在目标页面中隐藏布局控件；

或响应针对目标页面的重置指令，以删除目标页面中所有布局控件及每个布局控件的数据。

在上述可选的实施方式，通过响应删除指令、隐藏指令或重置指令，可完成布局控件的删除、隐藏后页面重置操作。

在可选的实施方式中，本申请实施例方法还包括以下步骤：

判断目标页面是否存在可放置区域，若存在可放置区域且可放置区域至少有两个时，则将距离栅格层的原点最近的可放置区域作为预设位置。

在上述可选的实施方式中，可将距离栅格层的原点最近的可放置区域作为预设位置。

在上述可选的实施方式中，目标页面存在可放置区域表示目标页面存在没有放置其他布局控件的区域，且该区域的大小大于待设置的布局控件的大小。进一步地，由于每个栅格坐标均与控件ID绑定，因此，基于这一绑定关系，可以判断栅格层中是否存在未与控件ID绑定的栅格，从而判断目标页面是否存在可放置区域。

在上述可选的实施方式中，栅格层的原点可以是栅格层左上角的交点坐标。

实施例二

请参阅图2，图2是本申请实施例公开的一种页面布局装置的结构示意图，如图2所示，本申请实施例的装置包括以下功能模块：

第一接收模块201，用于接收用户输入的栅格划分数；

第一绘制模块202，用于基于用户输入的栅格划分数绘制目标页面的栅格层，并生成栅格层中每个栅格的坐标；

第二接收模块203，用于接收用户针对布局控件的新建指令，并基于新建指令创建布局控件，布局控件对应一个控件ID；

第二绘制模块204，用于基于目标页面的栅格层将布局控件放置在目标页面的预设位置，并将布局空间的控件ID与一个或多个栅格坐标绑定；

第一响应模块205，用于响应用户针对布局控件的第一拖拽指令，以在目标页面上实时显示布局控件的宽高变化；

第二响应模块206，用于响应用户针对布局控件的第二拖拽指令，以实时显示布局空间在目标页面中的位置。

在本申请实施例中，通过接收用户输入的栅格划分数，进而能够基于用户输入的栅格划分数绘制目标页面的栅格层，并生成栅格层中每个栅格的坐标，进而通过接收用户针对布局控件的新建指令，能够基于新建指令创建布局控件，并基于目标页面的栅格层将布局控件放置在目标页面的预设位置，其中，布局控件对应一个控件ID，布局空间的控件ID与一个或多个栅格坐标绑定。另一方，通过响应用户针对布局控件的第一拖拽指令，能够在目标页面上实时显示布局控件的宽高变化；通过响应用户针对布局控件的第二拖拽指令，能够实时显示布局空间在目标页面中的位置。

与现有技术相比，在本申请实施例中，用户可通过输入栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

需要说明的是，关于本申请实施例的装置的其他详细说明，请参阅本申请实施例一的相关说明，本申请实施例对此不作赘述。

实施例三

请参阅图3，图3是本申请实施例公开的一种电子设备的结构示意图，如图3所示，本申请实施例的电子设备包括：

处理器301；以及

存储器302，配置用于存储机器可读指令，指令在由处理器301执行时，执行如前述实施方式任一项的页面布局方法。

本申请实施例的电子设备通过执行页面布局方法，进而可通过用户输入的栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

实施例四

本申请实施例公开一种存储介质，存储介质存储有计算机程序，计算机程序被处理器执行如前述实施方式任一项的页面布局方法。

本申请实施例的存储介质通过执行页面布局方法，进而可通过用户输入的栅格划分数，提高布局控件的大小可设置范围。另一方面，通过第一拖拽指令和第二拖拽指令，就能够对布局控件的大小和位置进行修改，而不需要通过修改布局控件的属性参数的方式修改布局控件的大小和位置。故本申请具有操作简单、配置灵活性更高的优点。

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

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

再者，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

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

在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

以上仅为本申请的实施例而已，并不用于限制本申请的保护范围，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。