CN112346812B - 页面的布局方法、装置 - Google Patents

Abstract

本公开关于一种页面的布局方法，包括：获取页面对应的布局树，其中，所述布局树包括多个节点；获取所述布局树之中类型与预设类型对应的节点，并将与所述预设类型对应的节点作为临时配置节点；获取所述临时配置节点的配置信息，并根据所述配置信息生成配置树；根据所述配置树更新所述布局树；以及根据更新之后的所述布局树进行页面布局。通过将预设类型对应的节点之下需要进行弹性形变的节点，单独建立对应的配置树，从而可以根据配置树生成该预设类型节点的空间信息，从而避免递归导致的多次弹性调整，从而提高页面布局速度。

Description

页面的布局方法、装置

技术领域

本公开涉及页面布局技术领域，尤其涉及一种页面的布局方法、装置及存储介质。

背景技术

相关技术中，通常采用递归计算的方式进行页面布局，即对布局树通过递归计算的方式计算布局树之中每个节点的配置信息，例如每个节点的大小，位置等，从而获得页面之中每个元素的布局图，并最终根据布局图进行渲染。

然而，目前的递归计算的方式仅适用于平铺式节点，可以快速高效地计算各个节点的配置信息。然而随着页面技术的不断发展，一些新的页面布局技术也不断涌现，例如Flex（弹性）模型技术等。然而现有递归式不适合flex模型，会导致布局速度大幅降低，严重拖慢渲染速度。每个布局树包括多层节点，每个节点会对下一层节点进行配置限制，如果某个节点是Flex的时候，会导致需要将该Flex节点下层的节点全部布局完之后，在根据剩余的空间对Flex节点进行调整。例如，如果剩余空间过大，则需要对该Flex节点及该Flex节点下级的各个节点进行动态增大；反之，如果空间不够，则需要对Flex节点及下级各个节点进行动态减小，从而实现弹性布局。

因此可以看出，如果此时需要不断地进行多次递归运算才能够完成页面的布局。如果页面之中存在Flex节点相互嵌套的方式，则更加会加剧布局所需的时间，严重拖慢页面的渲染速度。

发明内容

本公开提供一种页面的布局方法、装置及存储介质，以至少解决相关技术中页面布局速度慢的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种页面的布局方法，包括：获取页面对应的布局树，其中，所述布局树包括多个节点；获取所述布局树之中类型与预设类型对应的节点，并将与所述预设类型对应的节点作为临时配置节点；获取所述临时配置节点的配置信息，并根据所述配置信息生成配置树；根据所述配置树更新所述布局树；以及根据更新之后的所述布局树进行页面布局。

在本公开的一个实施例之中，所述获取所述临时配置节点的配置信息，并根据所述配置信息生成配置树，包括：获取所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息；根据所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息生成配置树。

在本公开的一个实施例之中，所述根据所述配置树更新所述布局树，包括：根据所述配置树生成所述临时配置节点的空间信息；将所述临时配置节点的空间信息写入至所述临时配置节点，并更新所述布局树。

在本公开的一个实施例之中，还包括：根据所述配置树生成所述临时配置节点之下的下级节点的空间信息；将所述临时配置节点之下的下级节点的空间信息分别写入至所述临时配置节点之下的下级节点，并更新所述布局树。

在本公开的一个实施例之中，所述根据所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息生成配置树，包括：获取所述临时配置节点之下的下级节点的类型；如果所述下级节点的类型与所述预设类型一致，则将所述下级节点加入至所述配置树；如果所述下级节点为叶子节点，则将所述下级节点加入至所述配置树。

在本公开的一个实施例之中，所述预设类型为弹性Flex类型。

在本公开的一个实施例之中，还包括：为所述配置树配置对应的渲染子线程；通过所述对应的渲染子线程生成所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

在本公开的一个实施例之中，还包括：当所述布局树更新时，判断所述临时配置节点和所述临时配置节点之下的下级节点是否有更新；如果没有更新，则复用所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

根据本公开实施例的第二方面，还提供一种页面的布局装置，包括：布局树获取模块，用于获取页面对应的布局树，其中，所述布局树包括多个节点；临时配置节点生成模块，用于获取所述布局树之中类型与预设类型对应的节点，并将与所述预设类型对应的节点作为临时配置节点；配置树生成模块，用于获取所述临时配置节点的配置信息，并根据所述配置信息生成配置树；更新模块，用于根据所述配置树更新所述布局树；布局模块，用于根据更新之后的所述布局树进行页面布局。

在本公开的一个实施例之中，所述配置树生成模块包括：配置信息获取子模块，用于获取所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息；配置树生成子模块，用于根据所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息生成配置树。

在本公开的一个实施例之中，所述更新模块，包括：空间信息生成子模块，用于根据所述配置树生成所述临时配置节点的空间信息；更新子模块，用于将所述临时配置节点的空间信息写入至所述临时配置节点，并更新所述布局树。

在本公开的一个实施例之中，其中，所述空间信息生成子模块，还用于根据所述配置树生成所述临时配置节点之下的下级节点的空间信息；所述更新子模块，还用于将所述临时配置节点之下的下级节点的空间信息分别写入至所述临时配置节点之下的下级节点，并更新所述布局树。

在本公开的一个实施例之中，所述配置树生成子模块包括：类型获取单元，用于获取所述临时配置节点之下的下级节点的类型；生成单元，用于在所述下级节点的类型与所述预设类型一致时，将所述下级节点加入至所述配置树，并在所述下级节点为叶子节点时，将所述下级节点加入至所述配置树。

在本公开的一个实施例之中，所述预设类型为弹性Flex类型。

在本公开的一个实施例之中，还包括：线程管理模块，用于为所述配置树配置对应的渲染子线程，并通过所述对应的渲染子线程生成所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

在本公开的一个实施例之中，还包括：复用模块，用于在所述布局树更新时，且所述临时配置节点和所述临时配置节点之下的下级节点没有更新时，复用所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

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

根据本公开实施例的第四方面，还提供一种非临时性计算机可读存储介质，当所述存储介质中的指令由处理器执行时，使得处理器能够执行如上所述的页面的布局方法。

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

通过将预设类型对应的节点，从布局树之中抽离出来，单独建立对应的配置树，从而可以根据配置树直接生成该预设类型节点的空间信息，从而避免递归导致的多次弹性调整，从而提高页面布局速度。此外，通过将预设类型节点下面的节点一次进行平铺计算，从而可以根据所有的预设类型节点的下级节点的配置信息，可以一次完成布局计算，极大地提高布局效率。

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

附图说明

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

图1为本公开一个实施例的页面的布局方法流程图；

图2为本公开实施例的一个布局树的结构图；

图3为本公开实施例的配置树的示意图；

图4为本公开另一个实施例的页面的布局方法流程图；

图5为本公开一个实施例的页面的布局装置结构图；

图6为本公开另一个实施例的页面的布局装置结构图；

图7为本公开一个实施例的配置树生成子模块结构图；

图8为根据本公开一示例性实施例示出的一种电子设备框图。

具体实施方式

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

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

随着页面布局技术的不断发展，提出了越来越多的节点模型，例如Flex模型或者Grid模型等等，因此对页面的布局方法也提出了更多的要求。如上所述，为了提升页面的布局速度，本公开的实施例提出了一种页面布局方法和装置，以及相应的存储介质和计算机程序产品。

如图1所示，为本公开一个实施例的页面的布局方法流程图，该方法可用于各种电子设备之中，例如移动终端（如手机）、智能电视等。通过该方法可以提高电子设备显示页面的速度，从而适应于各种类型的页面节点。具体地，该方法包括以下步骤：

步骤S110，获取页面对应的布局树，其中，布局树包括多个节点。

在页面的布局树之中，包括多级节点，上一级节点用于配置归属于该上一级节点的下级节点的配置信息，例如限制下级节点的位置范围等等。如图2所示，为本公开实施例的一个布局树的结构图。该布局图100包括第一级节点110、多个第二级节点120、多个第三级节点130、多个第四级节点140以及多个第五级节点150。多个第二级节点120包括第二级节点121和122；多个第三级节点130包括属于第二级节点121的第三级节点131和132，以及属于第二级节点122的第三级节点133和134；多个第四级节点140包括属于第三级节点131的第四级节点141和142、属于第三级节点132的第四级节点143和144、属于第三级节点133的第四级节点145和146，以及属于第三级节点134的第四级节点147和148。多个第五级节点150包括属于第四级节点146的第五级节点151和152，以及属于第四级节点148的第五级节点153和154。在该布局树之中，上一级节点不仅限定自身节点的配置信息，而且还会限定下一级节点的配置信息，例如，下一级节点的尺寸不能超过上一级节点的尺寸等。

在该实施例之中，上述的节点可以为各种类型，例如Flex类型或者Grid类型等等。

步骤S130，获取布局树之中类型与预设类型对应的节点，并将与预设类型对应的节点作为临时配置节点。

在本公开的实施例之中，从布局树之中抽离类型与预设类型对应的节点，例如，预设类型可以是Flex类型或Grid类型等。

又例如，以图2进行说明，假设预设类型为Flex类型，若第二级节点122为Flex节点，则将该第二级节点122作为临时配置节点。需要说明的是在本公开的实施例之中，以一个Flex节点为例进行说明，仅仅是为了便于理解本公开实施例的方案。然而在实际的产品之中，会存在多个预设类型对应的节点，例如多个Flex节点。

步骤S150，获取临时配置节点的配置信息，并根据配置信息生成配置树。

在本公开的实施例之中，将临时配置节点的配置信息提取出来，单独形成配置树。如图3所示，为本公开实施例的配置树的示意图。在该实施例之中，从图2所示的布局树之中提取临时配置节点相关的节点，例如临时配置节点的下级节点，生成相应的配置树。需要说明的是，图3所示的例子仅是便于说明的示意性例子。

在本公开的实施例之中，配置树的目的是对临时配置节点进行单独的布局，根据临时配置节点对应的配置树生成临时配置节点的空间信息。

在本公开的实施例之中，如果临时配置节点为多个，则每个临时配置节点会生成一个配置树，每个配置树对应一个临时配置节点的空间信息。

S170，根据配置树更新布局树。

在本公开的实施例之中，根据临时配置节点的配置树对布局树进行更新。如果临时配置节点有多个，则根据多个临时配置节点对应的配置树对布局树进行更新。

S190，根据更新之后的布局树进行页面布局。

在本公开的实施例之中，根据配置树对布局树之中特定类型的临时配置节点进行更新，使得临时配置节点从特定类型的节点变为普通节点，从而适于通过递归计算的方式计算相应的布局。

通过本公开的实施例，通过将预设类型对应的节点，从布局树之中抽离出来，单独建立对应的配置树，从而可以根据配置树直接生成该预设类型节点的空间信息，从而避免递归导致的多次弹性调整，从而提高页面布局速度。此外，通过将预设类型节点下面的节点一次进行平铺计算，从而可以根据所有的预设类型节点的下级节点的配置信息，可以一次完成布局计算，极大地提高布局效率。

如图4所示，为本公开另一个实施例的页面的布局方法流程图。该方法包括：

步骤S410，获取页面对应的布局树，其中，布局树包括多个节点。

在页面的布局树之中，包括多级节点，上一级节点用于配置归属于该上一级节点的下级节点的配置信息，例如限制下级节点的位置范围等等。如图2所示，为本公开实施例的一个布局树的结构图。该布局图100包括第一级节点110、多个第二级节点120、多个第三级节点130、多个第四级节点140以及多个第五级节点150。多个第二级节点120包括第二级节点121和122；多个第三级节点130包括属于第二级节点121的第三级节点131和132，以及属于第二级节点122的第三级节点133和134；多个第四级节点140包括属于第三级节点131的第四级节点141和142、属于第三级节点132的第四级节点143和144、属于第三级节点133的第四级节点145和146，以及属于第三级节点134的第四级节点147和148。多个第五级节点150包括属于第四级节点146的第五级节点151和152，以及属于第四级节点148的第五级节点153和154。在该布局树之中，上一级节点不仅限定自身节点的配置信息，而且还会限定下一级节点的配置信息，例如，下一级节点的尺寸不能超过上一级节点的尺寸等。

在该实施例之中，上述的节点可以为各种类型，例如Flex类型或者Grid类型等等。

步骤S420，获取布局树之中类型与预设类型对应的节点，并将与预设类型对应的节点作为临时配置节点。

在本公开的实施例之中，从布局树之中抽离类型与预设类型对应的节点，例如，预设类型可以是Flex类型或Grid类型等。

又例如，以图2进行说明，假设预设类型为Flex类型，若第二级节点122为Flex节点，则将该第二级节点122作为临时配置节点。需要说明的是在本公开的实施例之中，以一个Flex节点为例进行说明，仅仅是为了便于理解本公开实施例的方案。然而在实际的产品之中，会存在多个预设类型对应的节点，例如多个Flex节点。

步骤S430，获取临时配置节点以及临时配置节点之下的下级节点的配置信息。

本公开的一个实施例之中，在布局树之中包括多个等级的节点，其中，上一级节点对应多个下级节点。在本公开的一个实施例之中，上一级节点对应的下级节点如果是叶子节点，则说明该分支结束，如果该上一级节点对应的下级节点如果还有孙子节点，那么这些孙子节点也均是该上一级节点对应的下级节点。因此在本公开的一个实施例之中，临时配置节点的下级节点包括该临时配置节点的下一级节点，以及孙子节点等。

在本公开实施例之中，如上例子所述，获取临时配置节点122，以及临时配置节点122的下级节点，下级节点包括：例如第三级节点133和134，以及第三级节点133和134对应的第四级节点145-148，以及第四级节点146对应的第五级节点151和152，和第四级节点148对应的第五级节点153和154。

在本公开的另一个实施例之中，还需要从下级节点之中选择与临时配置节点的类型一致的下一级节点。在本公开的一个实施例之中，可以从临时配置节点的下级节点之中选择一些下级节点加入配置树，而不是所有的下级节点均加入配置树。具体而言，获取临时配置节点之下的下级节点的类型，如果下级节点的类型与预设类型一致，则将下级节点加入至所述配置树。例如，如果该下级节点也为Flex类型，则应将其加入至配置树，参照图2所示，如果第四级节点146为普通节点，则不将第四级节点146加入至配置树，反之，如果第四级节点148为Flex节点，则将第四级节点148加入到配置树之中。此外，如果下级节点为叶子节点，则将下级节点加入至配置树。例如如果第四级节点148为Flex节点，且第四级节点148的第五级节点153和154为叶子节点，则也将该第五级节点153和154加入到配置树之中。如图3所示，为本公开实施例的临时配置节点对应的配置树的示意图。

在本公开的实施例之中，还需要获取临时配置节点122以及临时配置节点122之下的下级节点的配置信息。

步骤S440，根据临时配置节点以及临时配置节点之下的下级节点的配置信息生成一个配置树。

在本公开的实施例之中，为了提高计算效率，将临时配置节点以及临时配置节点之下的下级节点的配置信息从布局树之中提取出来，为其构建一个配置树。由于该配置树的规模较小，因此可以获知该配置树之下每个节点的节点配置信息，那么即便是在具有Flex节点的情况下，也可以一次进行布局计算，提高布局计算的效率。因为配置树仅由与临时配置节点相关的下级节点构成，因此节点数量相对于布局树来说，会小很多，因此即便是有了Flex节点，也可以获知最底层节点的尺寸信息，从而实现一次布局计算。

在本公开的实施例之中，在渲染总线程之外，可以为该配置树配置独立的渲染子线程。通过该独立的渲染子线程可以独立处理该配置树，从而实现渲染子线程与渲染总线程的并行处理，从而提高处理速度。在本公开的实施例之中，渲染总线程用于对布局树进行布局和渲染，每个渲染子线程用于对对应的临时配置节点的配置树进行渲染。可通过渲染子线程生成临时配置节点和临时配置节点之下的下级节点的空间信息。

示意性地，在本公开的实施例之中，可以将临时配置节点122，以及临时配置节点122的下级节点的配置信息生成配置树。例如第三级节点133和134，以及第三级节点133和134对应的第四级节点145-148，以及第四级节点146对应的第五级节点151和152，和第四级节点148对应的第五级节点153和154的配置信息。

步骤S450，根据配置树生成临时配置节点的空间信息。

在本公开的实施例之中，对配置树进行布局处理从而可以生成临时配置节点的空间信息。

在本公开的实施例之中，如果临时配置节点为多个，则可以同时开启多个渲染子线程对多个临时配置节点的配置树进行布局处理，从而生成多个临时配置节点分别对应的空间信息。在本公开的实施例之中，第二级节点121也可作为临时配置节点，因此第二级节点121的下级节点，例如第三级节点131/132，以及第四级节点141-144。在本公开的一个实施例之中，可以将第二级节点121的全部下级节点均作为下级节点加入到配置树之中。

在本公开的另一个实施例之中，如果第三级节点131和第二级节点121的类型一致，则将第三级节点131以及第三级节点对应的第四级节点141和142均加入到配置树之中。如果第三级节点132和第二级节点121的类型不一致，则不将第三级节点132加入到配置树之中。

步骤S460，将临时配置节点的空间信息写入至临时配置节点，并更新布局树。

由于此时临时配置节点的空间信息已经被计算出来了，因此可以将该临时配置节点的节点属性从Flex类型修改为普通类型，再通过递归方式计算即可，从而避免了由于Flex节点导致需要多次进行递归计算的问题。

同样地，如果布局树之中存在多个临时配置节点，则可以依据多个临时配置节点的空间信息对临时配置节点的属性进行修改，并进一步更新布局树。因此经过上述处理之后，布局树之中的节点均为普通节点，已将预设类型的节点，例如Flex节点或Grid节点等转换为普通节点。因此在本公开的一个实施例之中，更新后的布局树之中的节点已是普通节点。

步骤S470，根据更新之后的所述布局树进行页面布局。

在本公开的实施例之中，由于更新后的布局树之中的节点已是普通节点，因此此时使用递归方式进行布局处理是非常迅速的，从而提高了布局效率。

在本公开的一个实施例之中，还可根据配置树生成临时配置节点之下的下级节点的空间信息，并将临时配置节点之下的下级节点的空间信息分别写入至临时配置节点之下的下级节点，并更新布局树。在该实施例之中，不仅可以更新临时配置节点的空间信息，而且还可以更新临时配置节点之下的下级节点的配置信息。如上例子所述，如果临时配置节点为122，则还会更新第三级节点133和134，以及第三级节点133和134对应的第四级节点145-148，以及第四级节点146对应的第五级节点151和152，和第四级节点148对应的第五级节点153和154的配置信息。

在本公开的一个实施例之中，可以从临时配置节点的下级节点之中选择一些下级节点加入配置树，而不是所有的下级节点均加入配置树。具体而言，获取临时配置节点之下的下级节点的类型，如果下级节点的类型与预设类型一致，则将下级节点加入至所述配置树。例如，如果该下级节点也为Flex类型，则应将其加入至配置树，参照图2所示，如果第四级节点146为普通节点，则不将第四级节点146加入至配置树，反之，如果第四级节点148为Flex节点，则将第四级节点148加入到配置树之中。此外，如果下级节点为叶子节点，则将下级节点加入至配置树。例如如果第四级节点148为Flex节点，且第四级节点148的第五级节点153和154为叶子节点，则也将该第五级节点153和154加入到配置树之中。

在本公开的一个实施例之中，当所述布局树更新时，判断临时配置节点和临时配置节点之下的下级节点是否有更新。如果没有更新，则复用临时配置节点和临时配置节点之下的下级节点的空间信息。例如在布局树更新时，如果该临时配置节点以及下级的节点均未更新，则复用其原有的空间信息即可，无需再次通过配置树进行计算，从而提高了更新的时间。

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

由于现有技术采用递归式布局计算的方式，因此对于预设类型的节点（例如Flex节点），可能会因为需要对节点进行弹性形变，因此可能需要进行多次的递归计算才能完成布局计算。而在本公开的实施例之中，通过将预设类型对应的节点（例如Flex节点）之下需要进行弹性形变的节点，从布局树之中抽离出来，单独建立对应的配置树，从而可以根据配置树直接生成该预设类型节点的空间信息，从而避免递归导致的多次弹性调整，从而提高页面布局速度。此外，通过将预设类型节点下面的节点一次进行平铺计算，从而可以根据所有的预设类型节点的下级节点的配置信息，可以一次完成布局计算，极大地提高布局效率。

如图5所示，为本公开一个实施例的页面的布局装置结构图。该页面的布局装置500包括布局树获取模块510、临时配置节点生成模块520、配置树生成模块530、更新模块540和布局模块550。其中，布局树获取模块510用于获取页面对应的布局树，其中，布局树包括多个节点。临时配置节点生成模块520用于获取布局树之中类型与预设类型对应的节点，并将与预设类型对应的节点作为临时配置节点。配置树生成模块530用于获取临时配置节点的配置信息，并根据配置信息生成配置树。更新模块540用于根据配置树更新布局树。布局模块550用于根据更新之后的布局树进行页面布局。

如图6所示，为本公开另一个实施例的页面的布局装置结构图。该页面的布局装置600包括布局树获取模块610、临时配置节点生成模块620、配置树生成模块630、更新模块640、布局模块650、线程管理模块660和复用模块670。其中，布局树获取模块610用于获取页面对应的布局树，其中，布局树包括多个节点。临时配置节点生成模块620用于获取布局树之中类型与预设类型对应的节点，并将与预设类型对应的节点作为临时配置节点。配置树生成模块630用于获取临时配置节点的配置信息，并根据配置信息生成配置树。更新模块640用于根据配置树更新布局树。布局模块650用于根据更新之后的布局树进行页面布局。

在本公开的实施例之中，线程管理模块660用于为配置树配置对应的渲染子线程，并通过对应的渲染子线程生成临时配置节点和临时配置节点之下的下级节点的空间信息。

在本公开的一个实施例之中，复用模块670用于在布局树更新时，且临时配置节点和临时配置节点之下的下级节点没有更新时，复用临时配置节点和临时配置节点之下的下级节点的空间信息。

在本公开的一个实施例之中，配置树生成模块630包括配置信息获取子模块631和配置树生成子模块632。其中，配置信息获取子模块631用于获取临时配置节点以及临时配置节点之下的下级节点的配置信息。配置树生成子模块632用于根据临时配置节点以及临时配置节点之下的下级节点的配置信息生成配置树。

在本公开的一个实施例之中，更新模块640包括空间信息生成子模块641和更新子模块642。空间信息生成子模块641用于根据配置树生成临时配置节点的空间信息。更新子模块642用于将临时配置节点的空间信息写入至临时配置节点，并更新布局树。

在本公开的一个实施例之中，空间信息生成子模块641还用于根据配置树生成临时配置节点之下的下级节点的空间信息。更新子模块642还用于将临时配置节点之下的下级节点的空间信息分别写入至临时配置节点之下的下级节点，并更新布局树。

如图7所示，为本公开一个实施例的配置树生成子模块结构图。配置树生成子模块632包括类型获取单元6321和生成单元6322。类型获取单元6321用于获取临时配置节点之下的下级节点的类型。生成单元6322用于在下级节点的类型与预设类型一致时，将下级节点加入至配置树，并在下级节点为叶子节点时，将下级节点加入至配置树。

在本公开的一个实施例之中，预设类型为弹性Flex类型。

通过将预设类型对应的节点，从布局树之中抽离出来，单独建立对应的配置树，从而可以根据配置树直接生成该预设类型节点的空间信息，从而避免递归导致的多次弹性调整，从而提高页面布局速度。此外，通过将预设类型节点下面的节点一次进行平铺计算，从而可以根据所有的预设类型节点的下级节点的配置信息，可以一次完成布局计算，极大地提高布局效率。根据本公开实施例的第三方面，还提供一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器，其中，所述处理器被配置为执行所述指令，以实现如上所述的页面的布局方法。

为了实现上述实施例，本公开还提出了一种存储介质。

其中，当存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如上所述的方法。

为了实现上述实施例，本公开还提供一种计算机程序产品。

其中，该计算机程序产品由电子设备的处理器执行时，使得电子设备能够执行如上所述的方法。

图8是根据一示例性实施例示出的一种电子设备框图。图8示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图8所示，电子设备1000包括处理器111，其可以根据存储在只读存储器（ROM，Read Only Memory）112中的程序或者从存储器116加载到随机访问存储器（RAM，RandomAccess Memory）113中的程序而执行各种适当的动作和处理。在RAM 113中，还存储有电子设备1000操作所需的各种程序和数据。处理器111、ROM 112以及RAM 113通过总线114彼此相连。输入/输出（I/O，Input / Output）接口115也连接至总线114。

以下部件连接至I/O接口115：包括硬盘等的存储器116；以及包括诸如LAN（局域网，Local Area Network）卡、调制解调器等的网络接口卡的通信部分117，通信部分117经由诸如因特网的网络执行通信处理；驱动器118也根据需要连接至I/O接口115。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分117从网络上被下载和安装。在该计算机程序被处理器111执行时，执行本公开的方法中限定的上述功能。

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

在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

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

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

Claims (14)

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

获取页面对应的布局树，其中，所述布局树包括多个节点；

获取所述布局树之中类型与预设类型对应的节点，并将与所述预设类型对应的节点作为临时配置节点；

获取所述临时配置节点的配置信息，并根据所述配置信息生成配置树；

根据所述配置树更新所述布局树；以及

根据更新之后的所述布局树进行页面布局；

其中，所述获取所述临时配置节点的配置信息，并根据所述配置信息生成配置树，包括：获取所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息；根据所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息生成配置树；

其中，所述根据所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息生成配置树，包括：获取所述临时配置节点之下的下级节点的类型，如果所述下级节点的类型与所述预设类型一致，将所述下级节点加入至所述配置树；以及，如果所述下级节点为叶子节点，则将所述下级节点加入至配置树。

2.如权利要求1所述的方法，其特征在于，所述根据所述配置树更新所述布局树，包括：

根据所述配置树生成所述临时配置节点的空间信息；

将所述临时配置节点的空间信息写入至所述临时配置节点，并更新所述布局树。

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

根据所述配置树生成所述临时配置节点之下的下级节点的空间信息；

将所述临时配置节点之下的下级节点的空间信息分别写入至所述临时配置节点之下的下级节点，并更新所述布局树。

4.如权利要求1所述的方法，其特征在于，所述预设类型为弹性Flex类型。

5.如权利要求3所述的方法，其特征在于，还包括：

为所述配置树配置对应的渲染子线程；

通过所述对应的渲染子线程生成所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

6.如权利要求1所述的方法，其特征在于，还包括：

当所述布局树更新时，判断所述临时配置节点和所述临时配置节点之下的下级节点是否有更新；

如果没有更新，则复用所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

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

布局树获取模块，用于获取页面对应的布局树，其中，所述布局树包括多个节点；

临时配置节点生成模块，用于获取所述布局树之中类型与预设类型对应的节点，并将与所述预设类型对应的节点作为临时配置节点；

配置树生成模块，用于获取所述临时配置节点的配置信息，并根据所述配置信息生成配置树；更新模块，用于根据所述配置树更新所述布局树；以及

布局模块，用于根据更新之后的所述布局树进行页面布局；

其中，所述配置树生成模块包括：

配置信息获取子模块，用于获取所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息；以及

配置树生成子模块，用于根据所述临时配置节点以及所述临时配置节点之下的下级节点的配置信息生成配置树；

其中，所述配置树生成子模块，还包括：

类型获取单元，用于获取所述临时配置节点之下的下级节点的类型；

生成单元，用于在下级节点的类型与预设类型一致时，将下级节点加入至配置树，并在下级节点为叶子节点时，将下级节点加入至配置树。

8.如权利要求7所述的装置，其特征在于，所述更新模块，包括：

空间信息生成子模块，用于根据所述配置树生成所述临时配置节点的空间信息；

更新子模块，用于将所述临时配置节点的空间信息写入至所述临时配置节点，并更新所述布局树。

9.如权利要求8所述的装置，其特征在于，其中，

所述空间信息生成子模块，还用于根据所述配置树生成所述临时配置节点之下的下级节点的空间信息；

所述更新子模块，还用于将所述临时配置节点之下的下级节点的空间信息分别写入至所述临时配置节点之下的下级节点，并更新所述布局树。

10.如权利要求7所述的装置，其特征在于，所述预设类型为弹性Flex类型。

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

线程管理模块，用于为所述配置树配置对应的渲染子线程，并通过所述对应的渲染子线程生成所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

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

复用模块，用于在所述布局树更新时，且所述临时配置节点和所述临时配置节点之下的下级节点没有更新时，复用所述临时配置节点和所述临时配置节点之下的下级节点的空间信息。

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

处理器；

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

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

14.一种非临时性计算机可读存储介质，当所述存储介质中的指令由处理器执行时，使得处理器能够执行如权利要求1至6中任一项所述的页面的布局方法。

Images