一种页面生成方法、装置及设备制造方法及图纸

本说明书实施例中公开了一种页面生成方法、装置及设备。该方案可以包括：在获取到用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作后，可以在虚拟画布处的指定区域内展示目标控件，并根据虚拟画布内包含的各个目标控件的展示位置信息，自动确定各个目标控件所属的虚拟容器之间的嵌套关系信息；后续，在获取到用户设置目标控件所需展示的目标内容的第二操作后，就可以根据各个目标控件的展示位置信息，各个目标控件所需展示的目标内容，以及各个目标控件所属的虚拟容器之间的嵌套关系信息，生成展示有各个携带了目标内容的目标控件的目标页面了。内容的目标控件的目标页面了。内容的目标控件的目标页面了。

【技术实现步骤摘要】
一种页面生成方法、装置及设备


[0001]本申请涉及虚拟画布
，尤其涉及一种页面生成方法、装置及设备。

技术介绍

[0002]随着计算机技术的不断发展，人们开始在计算机显示器上呈现的具有栅格布局的虚拟画布处，去部署各种类型的用于构建用户界面(UserInterface,英文缩写UI)的控件，通过在虚拟画布上不断调整各个控件的展示位置，以生成满足实际软件服务或场景需求的页面。目前，虚拟画布处可以设置有容器控件，并且容器控件内部可以支持其他控件的嵌套及自由布局，而容器控件外侧的其他控件的布局不会影响容器控件内部布局，以此可以搭建布局较为复杂的页面。不过，这往往需要用户自行掌握及管理较为复杂的容器嵌套关系，操作难度较大。
[0003]基于此，如何提升生成部署有多个控件的页面时的操作便捷性及灵活性，成为了亟待解决的技术问题。

技术实现思路

[0004]本说明书实施例提供的一种页面生成方法、装置及设备，可以提升生成部署有多个控件的页面时的操作便捷性及灵活性。
[0005]为解决上述技术问题，本说明书实施例是这样实现的：
[0006]本说明书实施例提供的一种页面生成方法，包括：
[0007]获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作；
[0008]响应于所述第一操作，在所述虚拟画布处的所述指定区域内展示所述目标控件；
[0009]根据所述虚拟画布内包含的各个所述目标控件的展示位置信息，确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息；
[0010]获取用户设置所述目标控件所需展示的目标内容的第二操作；
[0011]响应于所述第二操作，根据各个所述目标控件的展示位置信息，各个所述目标控件所需展示的目标内容，以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息，生成目标页面。
[0012]本说明书实施例提供的一种页面生成装置，包括：
[0013]第一获取模块，用于获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作；
[0014]控件展示模块，用于响应于所述第一操作，在所述虚拟画布处的所述指定区域内展示所述目标控件；
[0015]容器嵌套关系确定模块，用于根据所述虚拟画布内包含的各个所述目标控件的展示位置信息，确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息；
[0016]第二获取模块，用于获取用户设置所述目标控件所需展示的目标内容的第二操作；
[0017]页面生成模块，用于响应于所述第二操作，根据各个所述目标控件的展示位置信息，各个所述目标控件所需展示的目标内容，以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息，生成目标页面。
[0018]本说明书实施例提供的一种页面生成设备，包括：
[0019]至少一个处理器；以及，
[0020]与所述至少一个处理器通信连接的存储器；其中，
[0021]所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
[0022]获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作；
[0023]响应于所述第一操作，在所述虚拟画布处的所述指定区域内展示所述目标控件；
[0024]根据所述虚拟画布内包含的各个所述目标控件的展示位置信息，确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息；
[0025]获取用户设置所述目标控件所需展示的目标内容的第二操作；
[0026]响应于所述第二操作，根据各个所述目标控件的展示位置信息，各个所述目标控件所需展示的目标内容，以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息，生成目标页面。
[0027]本说明书中提供的至少一个实施例能够实现以下有益效果：
[0028]通过在用户执行了用于在虚拟画布处的指定区域内设置目标控件的第一操作后，在虚拟画布处的指定区域内展示出该目标控件，并根据虚拟画布内包含的各个目标控件的展示位置信息，自动确定出各个目标控件所属的虚拟容器之间的嵌套关系信息，从而无需用户自行掌握及管理较为复杂的容器嵌套关系，有利于提升用户操作便捷性，降低用户操作难度，以提升用户体验。
[0029]以及，由于在用户添加目标控件后，可以在虚拟画布处的指定区域内展示出该目标控件；还有，在用户设置目标控件所需展示的目标内容后，可以自动根据各个目标控件的展示位置信息，各个目标控件所需展示的目标内容，以及各个目标控件所属的虚拟容器之间的嵌套关系信息，生成展示有各个携带了目标内容的目标控件的目标页面；也有利于提升目标页面生成过程的可视性及直观性。
附图说明
[0030]为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0031]图1为本说明书实施例提供的一种页面生成方法的应用场景示意图；
[0032]图2为本说明书实施例提供的一种页面生成方法的流程示意图；
[0033]图3为本说明书实施例提供的一种控件之间的容器间隔线的示意图；
[0034]图4为本说明书实施例提供的一种目标页面的示意图；
[0035]图5为本说明书实施例提供的另一种目标页面的示意图；
[0036]图6为本说明书实施例提供的又一种目标页面的示意图；
[0037]图7为本说明书实施例提供的再一种目标页面的示意图；
[0038]图8为本说明书实施例提供的对应于图2中的页面生成方法的泳道流程示意图；
[0039]图9为本说明书实施例提供的对应于图2的一种页面生成装置的结构示意图；
[0040]图10为本说明书实施例提供的对应于图2的一种页面生成设备的结构示意图。
具体实施方式
[0041]为使本说明书一个或多个实施例的目的、技术方案和优点更加清楚，下面将结合本说明书具体实施例及相应的附图对本说明书一个或多个实施例的技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本说明书的一部分实施例，而不是全部的实施例。基于本说明书中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本说明书一个或多个实施例保护的范围。
[0042]以下结合附图，详细说明本说明书各实施例提供的技术方案。
[0043]现有技术中，部分用户可能需要搭建出控件布局较为复杂的页面，这种情况下，通常需要这些用户预先掌握一些与容器控件相关的技术概念，然后去通过在虚拟画布处部署多个具有嵌套关系的容器控件，并在各个容器控件内部署其他种类的UI控件，以搭建布局复杂的页面。这种页面生成方式中，不仅需要用户自行掌握及管理较为复杂的容器嵌套关系，使得用户操作便捷性较差，用户本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面生成方法，包括：获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作；响应于所述第一操作，在所述虚拟画布处的所述指定区域内展示所述目标控件；根据所述虚拟画布内包含的各个所述目标控件的展示位置信息，确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息；获取用户设置所述目标控件所需展示的目标内容的第二操作；响应于所述第二操作，根据各个所述目标控件的展示位置信息，各个所述目标控件所需展示的目标内容，以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息，生成目标页面。2.如权利要求1所述的方法，所述获取用户在具有栅格布局的虚拟画布处的指定区域内设置目标控件的第一操作，具体包括：获取用户针对所述虚拟画布以外的预设区域内展示的目标控件的拖动操作；所述拖动操作用于将所述目标控件拖动至所述虚拟画布内的指定区域处；或者，获取用户针对用于在所述虚拟画布内添加控件的预设控件的触发操作；所述触发操作用于指示在所述虚拟画布处的指定区域内添加目标控件；或者，获取用户针对所述虚拟画布内的指定区域的选中操作；获取用户针对所述选中操作所选中的所述指定区域执行的控件添加操作。3.如权利要求2所述的方法，所述在所述虚拟画布处的所述指定区域内展示所述目标控件之前，还包括：获取用户针对所述目标控件执行的展示尺寸设置操作；所述展示尺寸设置操作用于设置所述目标控件的初始展示尺寸；所述在所述虚拟画布处的所述指定区域内展示所述目标控件，具体包括：在所述虚拟画布处的所述指定区域内，展示具有所述初始展示尺寸的所述目标控件。4.如权利要求3所述的方法，所述获取用户针对所述目标控件执行的展示尺寸设置操作，具体包括：获取用户针对所述目标控件执行的初始展示宽度设置操作与初始展示高度设置操作中的至少一种；其中，所述初始展示宽度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的列的数量，或者，指示所述目标控件所在区域包含的所述虚拟画布处的列的数量占比，或者，指示所述目标控件的初始展示宽度为第一预设值；所述初始展示高度设置操作用于指示所述目标控件所在区域包含的所述虚拟画布处的行的数量，或者，指示所述目标控件所在区域包含的所述虚拟画布处的行的数量占比，或者，指示所述目标控件的初始展示高度为第二预设值。5.如权利要求1所述的方法，所述根据所述虚拟画布内包含的各个所述目标控件的展示位置信息，确定各个所述目标控件所属的虚拟容器之间的嵌套关系信息，具体包括：根据所述虚拟画布内包含的各个所述目标控件的展示位置信息，生成各条容器间隔线；其中，所述容器间隔线为将各个所述目标控件的顶边及底边向两侧延伸，直至触及所述虚拟画布的侧边或者其他控件的侧边所构成的线段；根据所述容器间隔线，对各个所述目标控件所属的虚拟容器进行划分，得到各个所述目标控件所属的虚拟容器之间的嵌套关系信息；其中，所述嵌套关系信息用于反映所述目
标控件所属的各个等级的虚拟容器，以及不同等级的所述虚拟容器之间的嵌套关系。6.如权利要求5所述的方法，所述根据所述容器间隔线，对各个所述目标控件所属的虚拟容器进行划分，具体包括：将任意两条相邻的第一容器间隔线之间包含的所述目标控件，划分至同一第一等级的虚拟容器内；所述第一容器间隔线为起始点在所述虚拟画布的任一侧边上，且终止点在所述虚拟画布的另一侧边上的所述容器间隔线；若存在第二容器间隔线，则根据所述第二容器间隔线，对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分，直至遍历所述第二容器间隔线；其中，所述第二容器间隔线为所述第一等级的虚拟容器内包含的所述容器间隔线；所述其他等级的虚拟容器为嵌套于所述第一等级的虚拟容器中的子容器。7.如权利要求6所述的方法，所述根据所述第二容器间隔线，对所述第一等级的虚拟容器中的所述目标控件所属的其他等级的虚拟容器进行划分，具体包括：针对任一所述第一等级的虚拟容器，确定出所述第一等级的虚拟容器内包含的长度最长的所述容器间隔线，得到第三容器间隔线；根据所述第三容器间隔线，将位于所述第一等级的虚拟容器中的所述目标控件划分至各个第二等级的虚拟容器内；其中，任一所述第二等级的虚拟容器中包含有位于所述第三容器间隔线左侧的所述目标控件，或者，包含有位于所述第三容器间隔线右侧的所述目标控件，或者，包含有位于所述第三容器间隔线上侧及下侧中的至少一种位置处的所述目标控件；针对任一所述第二等级的虚拟容器，判断是否所述第二等级的虚拟容器内未包含所述容器间隔线，得到第一判断结果；若所述第一判断结果表示所述第二等级的虚拟容器内未包含所述容器间隔线，则禁止对所述第二等级的虚拟容器内包含的所述目标控件继续进行容器划分。8.如权利要求7所述的方法，还包括：若所述第一判断结果表示所述第二等级的虚拟容器内包含有所述容器间隔线，则确定出所述第二等级的虚拟容器内包含的长度最长的所述容器间隔线，得到第四容器间隔线；根据所述第四容器间隔线，将位于所述第二等级的虚拟容器中的所述目标控件划分至各个第三等级的虚拟容器内；其中，任一所述第三等级的虚拟容器中包含有位于所述第四容器间隔线左侧的所述目标控件，或者，包含有位于所述第四容器间隔线右侧的所述目标控件，或者，包含有位于所述第四容器间隔线上侧及下侧中的至少一种位置处的所述目标控件；所述第三等级的虚拟容器为嵌套于所述第二等级的虚拟容器中的子容器。9.如权利要求1所述的方法，所述响应于所述第二操作，根据各个所述目标控件的展示位置信息，各个所述目标控件所需展示的目标内容，以及各个所述目标控件所属的虚拟容器之间的嵌套关系信息，生成目标页面，具体包括：响应于所述第二操作，获取预先针对所述目标控件设置的控件调整策略；所述控件调整策略用于指示在所述目标控件的当前展示尺寸与所述目标控件所需展示的目标内容的实际展示尺寸不同时，对于所述目标控件的展示尺寸与展示位置中的至少一种的调整策略；根据各个所述目标控件的展示位置信息，各个所述目标控件所需展示的目标内容，各
个所述目标控件所属的虚拟容器之间的嵌套关系信息，以及所述控件调整策略，确定各个所述目标控件的目标展示尺寸及目标展示位置；在所述目标展示位置处按照所述目标展示尺寸展示携带有所述目标内容的所述目标控件，得到目标页面。10.如权利要求9所述的方法，所述根据各个所述目标控件的展示位置信息，各个所述目标控件所需展示的目标内容，各个所述目标控件所属的虚拟容器之间的嵌套关系信息，以及所述控件调整策略，确定各个所述目标控件的目标展示尺寸及目标展示位置，具体包括：针对任一所述目标控件，若所述控件调整策略具体用于指示禁止调整所述任一所述目标控件的展示尺寸，则将所述任一所述目标控件的当前展示尺寸确定为所述任一所述目标控件的目标展示尺寸，以及，将各个所述目标控件的当前展示位置确定为各个所述目标控件的目标展示位置；若所述控件调整策略具体用于指示允许调整所述任一所述目标控件的展示尺寸，则将所述任一所述目标控件所需展示的目标内容的实际展示尺寸确定为所述任一所述目标控件的目标展示尺寸；以及，根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值，各个所述目标控件的当前展示位置，各个所述目标控件所属的虚拟容器之间的嵌套关系信息，以及所述控件调整策略，对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整，得到各个所述目标控件的目标展示位置。11.如权利要求10所述的方法，所述根据所述任一所述目标控件的目标展示尺寸与当前展示尺寸之间的第一差值，各个所述目标控件的当前展示位置，各个所述目标控件所属的虚拟容器之间的嵌套关系信息，以及所述控件调整策略，对至少部分所述目标控件的展示位置与展示尺寸中的至少一种进行调整，得到各个所述目标控件的目标展示位置，具体包括：若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域，且所述任一所述目标控件的目标展示尺寸大于所述当前展示尺寸，则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息，按照容器等级从低到高的顺序，对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值，直至遍历所述任一所述目标控件所属的各级虚拟容器，得到各个所述目标控件的目标展示位置；其中，所述第一控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件；若所述控件调整策略指示允许在各个所述目标控件下方添加展示尺寸可调的预设空白区域，且所述任一所述目标控件的目标展示尺寸小于所述当前展示尺寸，则根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息，按照容器等级从低到高的顺序，对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整，直至遍历所述任一所述目标控件所属的各级虚拟容器，得到各个所述目标控件的目标展示位置；其中，所述第二控件为所述任一所述目标控件所属的任一等级的虚拟容器中位于未被调整高度的列且与所述任一等级的虚拟容器的底边距离最近的控件。
12.如权利要求11所述的方法，所述根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息，按照容器等级从低到高的顺序，对所述任一所述目标控件所属的各级虚拟容器中的第一控件下方的预设空白区域的高度增大所述第一差值，具体包括：判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第三控件，得到第二判断结果；所述第三控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处，且与所述等级最低的虚拟容器的底边距离最近的所述目标控件；若所述第二判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第三控件，则将所述第三控件下方的预设空白区域的高度增大所述第一差值。13.如权利要求12所述的方法，还包括：若存在所述任一所述目标控件所属的等级第二低的虚拟容器，则判断所述等级第二低的虚拟容器中是否包含第四控件，得到第三判断结果；所述第四控件为位于所述等级第二低的虚拟容器中除所述任一所述目标控件以及所述第三控件所在列以外的列处，且与所述等级第二低的虚拟容器的底边距离最近的所述目标控件；所述等级最低的虚拟容器为嵌套于所述等级第二低的虚拟容器内的子容器；若所述第三判断结果表示所述等级第二低的虚拟容器中包含第四控件，则将所述第四控件下方的预设空白区域的高度增大所述第一差值。14.如权利要求11所述的方法，所述根据各个所述目标控件所属的虚拟容器之间的嵌套关系信息，按照容器等级从低到高的顺序，对所述任一所述目标控件所属的各级虚拟容器中的第二控件下方的预设空白区域的高度、所述第二控件的当前展示高度以及所述任一所述目标控件下方的预设空白区域的高度中的至少一种进行调整，具体包括：判断所述任一所述目标控件所属的等级最低的虚拟容器中是否包含第五控件，得到第四判断结果；所述第五控件为位于所述等级最低的虚拟容器中除所述任一所述目标控件所在列以外的列处，且与所述等级最低的虚拟容器的底边距离最近的所述目标控件；若所述第四判断结果表示所述任一所述目标控件所属的等级最低的虚拟容器中包含第五控件，则判断所述第五控件下方的预设空白区域的当前高度是否大于等于所述第一差值，得到第五判断结果；若所述第五判断结果表示所述第五控件下方的预设空白区域的当前高度大于等于所述第一差值，则将所述第五控件下方的预设空白区域的高度减小所述第一差值；若所述第五判断结果表示所述第五控件下方的预...

【专利技术属性】
技术研发人员：吴钊，
申请(专利权)人：支付宝杭州信息技术有限公司，
类型：发明
国别省市：