组件的布局方法、装置、设备、存储介质及程序产品与流程

1.本公开涉及图像处理技术中的应用程序页面显示技术，尤其涉及一种组件的布局方法、装置、设备、存储介质及程序产品。


背景技术：

2.移动终端中可以设置应用程序，在对应用程序进行实测时，存在丢帧的现象。比如，滑动界面时，界面中显示的页面会出现卡顿情况，这是由于丢帧导致的视觉上的卡顿情况。尤其是功能复杂的应用软件，更易出现卡顿的情况。
3.其中，界面的布局和光栅化过程分为多个阶段，其中的一部分发生在cpu中，另一部发生在gpu中。移动终端的屏幕刷新率一般是60帧/秒，也就是在1秒内要有60个合成好的画面可以提供给屏幕显示，这样才能保证界面的流畅性。这就意味着，布局和光栅化过程的多个阶段必须在16.6ms内完成，如果其中任何一个过程耗时过多都会导致整帧的合成超时。
4.为了解决该技术问题，现有技术中在屏幕显示区域下设置一个隐藏区域，当任一个组件进入隐藏区域后，就对他进行布局，当该组件进入屏幕显示区域后，对其进行光栅化处理，由于组件的布局和光栅过程不会发生在同一帧中，因此一帧的耗时不会过高。
5.但是，这种方式存在一定的局限性。比如，当一个组件进入隐藏区域时，另一个组件恰好进入屏幕显示区域，这种情况下，就会导致在同一帧进行布局和光栅化的处理过程，进而可能导致该帧被超时处理，进而发生卡顿的情况。


技术实现要素：

6.本公开提供了一种组件的布局方法、装置、设备、存储介质及程序产品，以解决现有技术中对一帧画面进行布局和光栅化处理的耗时过长，导致帧丢失的问题。
7.根据本公开的第一方面，提供了一种组件的布局方法，包括：
8.在加载组件时，获取所述组件的分帧优先级；其中，所述组件是基于flutter技术开发的应用程序的页面中的组件；
9.若根据所述分帧优先级确定对所述组件进行分帧处理，则根据所述分帧优先级在多帧画面中布局所述组件；
10.根据每一帧画面的布局信息在界面中显示所述组件。
11.根据本公开的第二方面，提供了一种组件的布局装置，包括：
12.获取单元，用于在加载组件时，获取所述组件的分帧优先级；其中，所述组件是基于flutter技术开发的应用程序的页面中的组件；
13.分帧单元，用于若根据所述分帧优先级确定对所述组件进行分帧处理，则根据所述分帧优先级在多帧画面中布局所述组件；
14.显示单元，用于根据每一帧画面的布局信息在界面中显示所述组件。
15.根据本公开的第三方面，提供了一种电子设备，包括：
16.至少一个处理器；以及
17.与所述至少一个处理器通信连接的存储器；其中，
18.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如第一方面所述的方法。
19.根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行如第一方面所述的方法。
20.根据本公开的第五方面，提供了一种计算机程序产品，所述计算机程序产品包括：计算机程序，所述计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从所述可读存储介质读取所述计算机程序，所述至少一个处理器执行所述计算机程序使得电子设备执行第一方面所述的方法。
21.本公开提供的组件的布局方法、装置、设备、存储介质及程序产品，包括：在加载组件时，获取组件的分帧优先级；其中，组件是基于flutter技术开发的应用程序的页面中的组件；若根据分帧优先级确定对组件进行分帧处理，则根据分帧优先级在多帧画面中布局组件；根据每一帧画面的布局信息在界面中显示组件。本公开提供的布局方法、装置、设备、存储介质及程序产品中，可以预先设置组件的处理方式，若需要分帧处理组件，则移动终端可以将该组件的加载过程分配到多帧画面中进行处理，从而降低每一帧画面的处理时长，以避免移动终端显示app界面时发生丢帧现象。
22.应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。
附图说明
23.附图用于更好地理解本方案，不构成对本公开的限定。其中：
24.图1为一示例性实施例示出的flutter界面的布局和光栅化过程示意图；
25.图2为一示例性实施例示出的对布局和光栅化过程的优化处理示意图；
26.图3为一示例性实施例示出的基于图2所示的方式对界面进行处理的示意图；
27.图4为本公开一示例性实施例示出的组件的布局方法的流程示意图；
28.图5为本公开一示例性实施例示出的app的界面示意图；
29.图6为本公开一示例性实施例示出的界面示意图；
30.图7为本公开一示例性实施例示出的方案效果对比示意图；
31.图8为本公开另一示例性实施例示出的组件的布局方法的流程示意图；
32.图9为本公开一示例性实施例示出的组件的完整元素树的示意图；
33.图10为本公开一示例性实施例示出的组件的主元素树的示意图；
34.图11为本公开一示例性实施例示出的组件的一个子元素树的示意图；
35.图12为本公开又一示例性实施例示出的app页面的示意图；
36.图13为本公开又一示例性实施例示出的组件的布局方法的流程示意图；
37.图14为本公开一示例性实施例示出的组件的布局流程图；
38.图15为本公开一示例性实施例示出的组件的布局装置的结构示意图；
39.图16为本公开另一示例性实施例示出的组件的布局装置的结构示意图；
40.图17是用来实现本公开实施例的方法的电子设备的框图。
具体实施方式
41.以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
42.flutter是一种跨平台开发技术，其已经在主流应用程序(application，app)上得到广泛应用。使用flutter做app开发，开发的人力成本和时间成本都有比较可观的收益。flutter一直以高性能著称。
43.目前在对基于flutter技术发开的app进行实测时，有时会出现丢帧的现象，尤其对于功能复杂的app，其丢帧现象出现的更频繁。比如，滑动界面时，界面中显示的app页面会出现卡顿情况，这是由于丢帧导致的视觉上的卡顿情况。
44.图1为一示例性实施例示出的flutter界面的布局和光栅化过程示意图。
45.如图1所示，对基于flutter技术发开的app的界面进行布局和光栅化时，需要经过构建控件树widget tree、构建元素树element tree、构建渲染对象树renderobject tree、布局layout、绘制paint、构建图层树layer tree、光栅化raster、渲染compositor的过程。
46.其中，第1
‑
6个过程发生在中央处理器(central processing unit，cpu)中，而第7
‑
8个过程发生在图形处理器(graphics processing unit，gpu)中。
47.具体的，移动终端的屏幕刷新率一般是60帧/秒，也就是在1秒内要有60个合成好的画面可以提供给屏幕显示，这样才能保证界面的流畅性。因此，留给一帧的处理时间是1s/60＝16.6
…
ms。这就意味着，如图1中所示的整个过程必须在16.6ms内完成，如果其中任何一个过程耗时过多都会导致整帧的处理过程超时。
48.进一步的，在布局和光栅化过程中的layout和raster通常耗时较高，因此若能够在一帧画面的处理过程中减少这两个步骤的耗时，就能够避免一帧画面的处理时长超时。
49.图2为一示例性实施例示出的对布局和光栅化过程的优化处理示意图。
50.如图2所示，页面21中设置有多个组件(item1、item2
…
)，在移动终端的屏幕可视窗口22中可以展示页面21，可以滑动页面21，从而在屏幕可视窗口22展示页面21的不同区域。
51.其中，还设置有一个扩展区域23，该扩展区域23设置在屏幕可视窗口22下方，比如，可以在flutter的listview组件中设置扩展区域，并将其位置设置在屏幕可视窗口22下方。
52.具体的，在页面21滚动过程中，当任何页面21中的一个item进入扩展区域后，立即对它进行布局处理，但由于该item并未进入屏幕可视窗口22，因此不会进行光栅化。由于只有一个item进入屏幕可视窗口22时才会光栅化，而它的布局过程已经在进入扩展区域时进行过。因此，通常情况下，布局和光栅化的过程不会在同一帧的处理过程中进行处理，进而能够降低一帧画面的处理过程的耗时时间。
53.但是，这种解决方案具有一定的局限性。
54.图3为一示例性实施例示出的基于图2所示的方式对界面进行处理的示意图。
55.如图3所示，在某一时刻，若页面21中的一个组件211进入扩展区域23，且另一组件212进入屏幕可视窗口22时，移动终端需要对组件211进行布局处理，对组件212进行光栅化
处理，这种情况下，仍然需要在同一帧画面的处理过程中进行布局和光栅化的处理，进而可能引起该帧画面的处理时间过长，导致丢帧现象。因此，现有技术中的解决方案在特定的应用场景中，无法有效避免一帧画面的处理时长超时的问题。
56.为了解决上述技术问题，本公开提供的方案中，移动终端加载组件时，可以将该组件的布局过程分配到多帧画面中进行处理，从而减少每一帧画面的处理时长，以避免发生丢帧现象。
57.图4为本公开一示例性实施例示出的组件的布局方法的流程示意图。
58.如图4所示，本公开一示例性实施例示出的组件的布局方法，包括：
59.步骤401，在加载组件时，获取组件的分帧优先级；其中，组件是基于flutter技术开发的应用程序的页面中的组件。
60.其中，本公开提供的方案可以由移动终端执行，该移动终端中可以设置有app，该app可以是基于flutter技术开发的。
61.用户可以操作移动终端，使其运行基于flutter技术开发的app。
62.图5为本公开一示例性实施例示出的app的界面示意图。
63.通过用户的操作，移动终端可以显示如图5所示的界面，该界面中包括组件51、52、53、54。在移动终端加载其中的任一组件时，都可以基于本公开提供的方案对这些组件进行布局，从而避免移动终端对一帧画面的处理时间过长而引起丢帧的问题。
64.具体的，移动终端在加载组件时可以获取该组件的分帧优先级。可以预先设置组件的分帧优先级。比如，开发人员在开发代码时，可以在代码中设置组件的分帧优先级。例如，可以设置变量priority，该priority的默认值为0，用户可以设置各组件的priority。
65.进一步的，移动终端在加载组件时，可以获取该组件的分帧优先级，从而根据组件的分帧优先级确定是否需要对组件进行分帧处理。
66.在一种可选的实施方式中，可以根据分帧优先级确定对组件分帧处理时的帧数量，比如分帧优先级为0，则表征不对组件进行分帧处理，若分帧优先级为1，则表征需要分2帧画面处理该组件。
67.步骤402，若根据分帧优先级确定对组件进行分帧处理，则根据分帧优先级在多帧画面中布局组件。
68.实际应用时，若移动终端根据分帧优先级确定需要对组件进行分帧处理，则移动终端可以在多帧画面中布局该组件。例如，若组件的分帧优先级为1，则移动终端可以在2帧画面中布局该组件。
69.其中，在多帧画面的处理过程中布局一个组件时，可以生成与每一帧画面对应的布局信息，进而可以根据每一帧画面的布局信息在界面中显示组件。
70.具体的，可以将组件拆分为多个部分，从而在多帧画面中分别布局组件的各部分。例如，在2帧画面中布局一个组件时，可以在第一帧画面中布局该组件在界面中的位置、大小等信息，在第二帧布局该组件中的具体内容，例如可以布局组件中的按钮、图片、文字等。
71.进一步的，移动终端在多帧画面中布局组件时，可以生成每一帧画面的布局信息。比如，在第一帧画面的处理过程中，可以对组件进行第一次布局，此时可以得到第一帧布局信息。在第二帧画面的处理过程中，可以对组件进行第二次布局，此时可以得到第二帧布局信息
72.具体的，若加载的页面中还具有其他需要展示的信息，则上述布局信息中还包括其他需要展示的信息对应的布局信息，而不仅仅包括需要分帧处理的组件的布局信息。
73.步骤403，根据每一帧画面的布局信息在界面中显示组件。
74.进一步的，移动终端每生成一帧画面的布局信息后，可以根据该布局信息在界面中进行显示，从而显示组件。
75.实际应用时，可以根据一帧画面的布局信息执行paint、layer tree、raster、compositor的步骤，从而使移动终端显示与该布局信息对应的画面，进而显示被加载的组件。
76.图6为本公开一示例性实施例示出的界面示意图。
77.如图6所示，本实施例以在3帧画面中对一个组件进行布局为例进行说明。
78.在第一帧画面中，移动终端可以对组件进行第一次布局处理，生成第一帧画面的第一布局信息，并在界面中渲染出与该第一布局信息对应的画面61。
79.在第二帧画面中，移动终端可以对组件进行第二次布局处理，生成第二帧画面的第二布局信息，并在界面中渲染出与该第二布局信息对应的画面62。
80.在第三帧画面中，移动终端可以对组件进行第三次布局处理，生成第三帧画面的第三布局信息，并在界面中渲染出与该第三布局信息对应的画面63。
81.图7为本公开一示例性实施例示出的方案效果对比示意图。
82.如图7所示，基于现有技术的方案对一个组件进行加载的耗时情况为71所示。基于本公开提供的方案，对该组件进行加载时分为4帧画面进行处理，各帧画面的耗时情况如72
‑
75所示。
83.从图中可以看出，本公开提供的方案中将组件的加载过程拆分到多帧画面进行处理，每帧的耗时均较短，因此，不会引起丢帧的问题。
84.本公开提供的组件的布局方法，包括：在加载组件时，获取组件的分帧优先级；其中，组件是基于flutter技术开发的应用程序的页面中的组件；若根据分帧优先级确定对组件进行分帧处理，则根据分帧优先级在多帧画面中布局组件；根据每一帧画面的布局信息在界面中显示组件。本公开提供的方法中，可以预先设置组件的处理方式，若需要分帧处理组件，则移动终端可以将该组件的加载过程分配到多帧画面中进行处理，从而降低每一帧画面的处理时长，以避免移动终端显示app界面时发生丢帧现象。
85.图8为本公开另一示例性实施例示出的组件的布局方法的流程示意图。
86.如图8所示，本公开一示例性实施例示出的组件的布局方法，包括：
87.步骤801，监听对屏幕的滚动操作。
88.其中，本公开提供的方案可以由移动终端执行，该移动终端中可以设置有app，该app可以是基于flutter技术开发的。
89.具体的，移动终端可以监听用户对屏幕的操作，若用户对移动终端的屏幕进行了滚动操作，则可以对组件进行分帧处理。若用户没有对移动终端进行滚动操作，则可以不对组件进行分帧处理。
90.进一步的，app的页面若没有发生滚动，那么即使一帧画面的处理时长较长，发生了丢帧的情况也不会被用户感知到。因此，可以通过监听屏幕滚动的方式，确定是否需要对组件进行分帧处理。在无需分帧处理时可以在一帧画面中完成对组件的布局处理，以降低
移动终端的算力消耗。
91.步骤802，在加载组件时，若监听到对屏幕的滚动操作，则获取组件的分帧优先级；其中，组件是基于flutter技术开发的应用程序的页面中的组件。
92.实际应用时，若移动终端监听到了对屏幕的滚动操作，则可以获取组件的分帧优先级，进而根据该分帧优先级对组件进行分帧处理。若没监听到对屏幕的滚动操作，则移动终端可以在一帧画面的处理过程中完成对组件的处理。
93.获取组件的分帧优先级的方式与步骤401的执行方式类似，不再赘述。
94.步骤803，若根据分帧优先级确定对组件进行分帧处理，则根据分帧优先级确定多帧画面的数量。
95.其中，移动终端可以根据获取的分帧优先级确定是否需要对组件进行分帧处理。比如，若组件的分帧优先级为0，则确定不需要对该组件进行分帧处理。若组件的分帧优先级大于0，则确定需要对该组件进行分帧处理。
96.具体的，若根据分帧优先级确定对组件进行分帧处理，则移动终端根据分帧优先级确定多帧画面的数量。也就是确定需要在几帧画面中处理完该组件。
97.进一步的，可以在分帧优先级的基础上添加1，将结果作为多帧画面的数量。比如，若分帧优先级为1，则需要在2帧画面中处理完组件，若分帧优先级为2，则需要在3帧画面中处理完组件。
98.步骤804，在多帧画面中的第一帧画面的处理过程中，根据组件的信息对组件进行占位布局。
99.实际应用时，占位布局是对组件的轮廓结构进行布局，比如，布局组件在页面中所占的位置、组件的尺寸等。
100.其中，移动终端可以在多帧画面中的第一帧中对组件进行占位布局。
101.具体的，在占位布局时，移动终端可以在多帧画面中的第一帧画面的处理过程中，根据组件的信息生成主元素树；其中，主元素树的各节点的属性为与节点对应的占位信息。
102.进一步的，一个组件中可以包括多种元素，比如可以具有文字显示区域、按钮、图片显示区域等，每一元素还可以具有其他属性信息，比如颜色、大小、位置等，因此，组件完整的元素树中可能包括多个层次的节点。
103.图9为本公开一示例性实施例示出的组件的完整元素树的示意图。
104.如图9所示，元素树中包括第一层子节点91、92、93。还包括第二层子节点，比如子节点91具有子节点94、95，子节点92具有子节点96。还可以包括第三层子节点，比如子节点95具有子节点97、98，子节点96具有子节点99。
105.实际应用时，若移动终端在一帧画面的处理过程中构建完整元素树，并完成相应的布局，则耗时会很长。因此，本公开提供的方案中在第一帧画面中仅生成主元素树；其中，主元素树的各节点的属性为与节点对应的占位信息，且各节点不具有子节点。
106.图10为本公开一示例性实施例示出的组件的主元素树的示意图。
107.图10为一组件的主元素树，该组件的完整元素树如图9所示。如图10所示，该主元素树中设置有三个节点，且各节点不具有子节点。
108.其中，各节点的属性为与节点对应的占位信息，该占位信息具体可以包括元素的位置、大小等信息。
109.具体的，移动终端可以根据主元素树，对组件进行布局处理，得到第一帧画面的布局信息。移动终端可以根据主元素树进行布局处理，从而确定出第一帧画面的布局信息。
110.这种实施方式中，由于在第一帧画面中对该组件进行布局处理时，仅对组件进行占位布局的处理，而不对组件内各元素的详细信息进行布局处理，能够降低第一帧画面中对该组件进行布局所消耗的时间，从而避免发生丢帧的情况。
111.进一步的，移动终端生成了第一帧画面的布局信息后，可以执行步骤805。
112.步骤805，根据第一帧画面的布局信息在界面中显示组件。
113.步骤805的实现方式与步骤403的实现方式类似，具体可以基于第一帧画面的布局信息执行步骤403，因此不再赘述。
114.根据第一帧画面的布局信息展示组件时，界面中显示的为该组件的占位信息，比如在界面中用于展示该组件的区域为空白内容。
115.步骤806，在多帧画面中除第一帧画面的其他帧画面的处理过程中，根据组件的信息对组件进行局部布局。
116.实际应用时，局部布局是对组件中的各元素进行详细布局，比如，组件中存在一个图片显示区域，则可以对该图片显示区域进行布局处理。
117.其中，移动终端可以在多帧画面中的第一帧以后的其他帧中分别进行局部布局。例如在处理第二帧画面时对组件中的第一个元素进行布局处理，在处理第三帧画面时对组件中的第二个元素进行布局处理。
118.具体的，在进行局部处理时，可以在多帧画面中除第一帧画面的其他任一帧画面的处理过程中，根据组件的信息生成子元素树；其中，每一个子元素树与第一帧画面的主元素树中的每一个节点具有对应关系。
119.例如，可以在多帧画面的第二帧画面的处理过程中，生成一子元素树，该子元素树与主元素树中的一个节点具有对应关系。子元素树用于记录组件中的一个元素的具体布局信息，比如颜色、字体、文字内容、图片内容等信息。
120.子元素树中可以包括多个节点，节点间可以具有父子关系。
121.移动终端可以根据生成的子元素树进行布局处理，得到当前处理的帧画面的布局信息，比如得到第二帧画面的布局信息。
122.实际应用时，针对多帧画面中除第一帧画面的其他任一帧画面，都可以进行如上述第二帧画面的处理过程。
123.图11为本公开一示例性实施例示出的组件的一个子元素树的示意图。
124.如图11所示，该子元素树中可以包括节点91，91具有子节点94、95，节点95具有子节点97、98。该子元素树与图10中左边的节点具有对应关系。
125.移动终端可以根据该子元素树进行布局处理，得到当前帧画面的布局信息。
126.这种实施方式中，在多帧画面中除第一帧画面的其他帧画面的处理过程中，只需要根据子元素树对组件进行局部布局即可，而不需要对完整的组件进行布局，因此，多帧画面中除第一帧画面的其他帧画面的处理时长也不会超时。
127.在生成子元素树，具体可以：
128.步骤a，在任一帧画面的处理过程中获取组件的布局次数；
129.步骤b，若布局次数不大于分帧优先级，则根据组件的信息生成子元素树；
130.步骤c，在布局次数的基础上添加1。
131.其中，移动终端可以记录组件的布局次数，从而基于该布局次数确定组件是否布局完毕。比如，可以设置一个变量buildcount，用于记录组件的布局次数。
132.具体的，在对组件进行分帧处理时，移动终端在每一帧画面的处理过程中，都可以先获取该组件的布局次数，若布局次数小于或等于分帧优先级，则表征组件没有布局完毕，则可以根据组件的信息生成子元素树。
133.进一步的，移动终端可以根据该子元素树进行布局处理生成布局信息。
134.实际应用时，生成子元素树后移动终端还可以在组件的布局次数的基础上添加1，从而在对下一帧画面进行处理时，移动终端可以获取更新后的布局次数。
135.其中，移动终端对组件进行占位布局时，也算作一次布局次数，因此，移动终端可以在对组件进行占位布局时初始化组件的布局次数，并在占位布局后，将布局次数置为1。
136.具体的，这种实施方式中，将分帧优先级作为分帧处理的帧数量，并通过布局次数确定是否对组件布局完毕，从而避免对组件布局时缺失部分布局内容的问题。
137.进一步的，若布局次数等于分帧优先级，则表征需要在当前帧画面中对组件完成布局处理，因此，可以在组件的布局信息中确定未被处理的布局信息，并根据未被处理的布局信息生成子元素树。
138.实际应用时，移动终端可以确定该组件还没有被处理的布局信息，进而根据未被处理的布局信息生成子元素树，此后，移动终端可以在该帧画面的处理过程中继续根据该子元素树进行布局处理，得到该帧画面的布局信息，进而在根据布局信息显示组件时，能够显示完整的组件。
139.这种实施方式中，能够保证移动终端在多帧画面中的最后一帧完成组件的全部布局流程，进而使得移动终端能够显示完整的组件。
140.步骤807，根据多帧画面中除第一帧画面的其他帧画面的布局信息在界面中显示组件。
141.步骤807的实现方式与步骤403的实现方式类似，具体可以基于其他帧画面的布局信息执行步骤403，因此不再赘述。
142.根据其他帧画面的布局信息展示组件时，可以用具体的信息替换界面中该组件的空白内容，进而展示真实的组件。
143.可以在得到每一帧画面的布局信息，根据该帧的布局信息显示组件，在得到另一帧画面的布局信息，再根据另一帧的布局信息显示组件。
144.其中，移动终端可以根据子元素树与主元素树中节点的对应关系，使用该子元素树对应的布局信息在界面中替换相应节点的占位信息。
145.在一种可选的实施方式中，移动终端可以根据组件的信息，确定多帧画面中除第一帧画面的其他帧画面中需要布局的内容。比如，在第二帧画面中布局组件的两个元素，在第三帧画面中布局组件的三个元素等。
146.本实施例提供的方案中，通过在第一帧画面中对组件占位布局，在其他帧画面中对组件进行局部布局，能够将组件的布局过程拆分到多帧画面中，从而降低各帧画面的处理时长。同时，在第一帧画面中占位布局，能够在页面中保留组件的显示区域，在其他帧进行局部布局时，界面的各区域相对位置不会发生改变，从而既能够降低各帧画面的处理时
长，还不会产生不利的视觉效果。
147.图12为本公开又一示例性实施例示出的app页面的示意图。
148.如图12所示，页面中存在三个组件121、122、123。例如组件121的分帧优先级为1，组件122的分帧优先级为2，组件123的分帧优先级为3。
149.则在这个页面第一次布局时，只会构建这个页面中各组件的轮廓以及三个组件所在区域的占位内宽。而三个部分的真实内容分别会在此后的第一、二和三帧中进行布局。
150.图13为本公开又一示例性实施例示出的组件的布局方法的流程示意图。
151.如图13所示，本公开一示例性实施例示出的组件的布局方法，包括：
152.步骤1301，在加载组件时，获取组件的分帧优先级；其中，组件是基于flutter技术开发的应用程序的页面中的组件。
153.步骤1302，若根据分帧优先级确定对组件进行分帧处理，则根据分帧优先级确定多帧画面的数量。
154.步骤1303，在多帧画面中的第一帧画面的处理过程中，根据组件的信息对组件进行占位布局。
155.步骤1301与步骤401的实现方式类似，步骤1302、1303与步骤803、804的实现方式类似，不再赘述。
156.步骤1304，若在多帧画面中的第一帧画面的处理过程中，根据组件的信息进行占位布局的时长小于预设值，则在第一帧画面的处理过程中进行局部布局。
157.其中，移动终端在多帧画面中的第一帧画面中对组件进行占位布局，若进行占位布局的时长较短，例如，占位布局时长小于预设值，则移动终端可以不对该组件进行分帧处理，而是在第一帧画面的处理过程中完成需要在后续画面帧中处理的局部布局。
158.具体的，比如根据分帧优先级确定需要在三帧画面中完成对一个组件的处理过程。若在第一帧中对组件进行占位布局时，占位布局时长短于预设值，则移动终端继续对该组件进行局部布局，从而在一帧画面中处理完毕该组件。
159.这种实施方式中，若占位布局的时长小于预设值，则可以认为移动终端可以在第一帧画面中完成该组件的全部布局流程，且不会超时，因此，将该组件的布局过程合并到第一帧进行处理。移动终端的屏幕在展示该组件时，不会存在从占位布局的显示效果切换到局部布局的展示效果的过程，因此，能够进一步的提高组件展示时的视觉效果。
160.步骤1305，若在第一帧画面的处理过程中进行局部布局后，第一帧画面的处理时长超时，则对该组件进行再次加载时对其进行分帧处理。
161.实际应用时，若移动终端将原本应当被分帧处理的组件，在第一帧画面中处理完毕，则移动终端还可以获取该第一帧画面的处理时长，若第一帧画面的处理时长超时，则说明该组件不适宜被合并到一帧处理，此后再对该组件进行加载时，移动终端可以根据分帧优先级对其进行分帧处理，即使对其进行占位布局时时长较短，也对其进行分帧处理。
162.例如，一个组件的主元素树较简单，移动终端能够快速的构建主元素树并根据其进行布局，但是该组件具有较为复杂的子元素树，那么将该组件合并到一帧进行处理，可能会导致帧画面超时。
163.其中，还可以再次加载与该组件类似的组件时，也对其进行分帧处理。比如，若存在结构与该组件相同的其他组件，则再加载该其他组件时，也对其进行分帧处理。
164.这种实施方式中，能够使移动终端具备自学习功能，使其能够根据帧画面的处理时长对组件的处理方式进行动态的调整，以达到组件显示效果和帧画面处理时长之间的平衡。
165.本实施例提供的方案还可以与上述任一种实施例相结合。
166.在以上任一种实施方式中，若根据分帧优先级确定不对组件进行分帧处理，则方法还包括：
167.在一帧画面中布局组件。
168.其中，根据分帧优先级确定不对组件进行分帧处理，则表明可以在一帧画面中完成对该组件的布局处理，具体可以生成该组件完整的元素树，并根据元素树进行布局得到布局信息，再进行渲染。
169.这种实施方式中，移动终端可以根据用户设置的分帧优先级对组件进行不同的处理，从而提高方案的灵活性。
170.图14为本公开一示例性实施例示出的组件的布局流程图。
171.如图14所示，需要对组件进行布局时，移动终端可以初始化该组件的布局次数buildcount，将其设置为0。
172.移动终端可以获取该组件的分帧优先级，若分帧优先级等于0，则不对组件进行分帧处理，直接进行布局全部内容。
173.若分帧优先级大于0，则可以判断移动终端的屏幕是否被滚动操作，若不存在滚动操作，则直接布局全部内容。
174.若分帧优先级大于0，且移动终端的屏幕被滚动操作，则判断该组件的buildcount是否与分帧优先级相等，若相等，则直接布局剩余的全部内容，还可以将buildcount设置为0；若不相等，则对组件进行局部布局，并在组件的buildcount基础上添加1。
175.此后，进入下一帧的处理过程，具体可以进入获取该组件的分帧优先级的步骤。
176.图15为本公开一示例性实施例示出的组件的布局装置的结构示意图。
177.如图15所示，本公开提供的组件的布局装置1500，包括：
178.获取单元1510，用于在加载组件时，获取所述组件的分帧优先级；其中，所述组件是基于flutter技术开发的应用程序的页面中的组件；
179.分帧单元1520，用于若根据所述分帧优先级确定对所述组件进行分帧处理，则根据所述分帧优先级在多帧画面中布局所述组件；
180.显示单元1530，用于根据每一帧画面的布局信息在界面中显示所述组件。
181.本公开提供的组件的布局装置与图4所示实施例类似，不再赘述。
182.图16为本公开另一示例性实施例示出的组件的布局装置的结构示意图。
183.如图16所示，本公开提供的组件的布局装置1600中，获取单元1610与图15中的获取单元1510类似，分帧单元1620与图15中的分帧单元1520类似，显示单元1630与图15中的显示单元1530类似。
184.其中，所述分帧单元1620，包括：
185.帧确定模块1621，用于根据所述分帧优先级确定多帧画面的数量；
186.占位布局模块1622，用于在所述多帧画面中的第一帧画面的处理过程中，根据所述组件的信息对所述组件进行占位布局；
187.局部布局模块1623，用于在所述多帧画面中除第一帧画面的其他帧画面的处理过程中，根据所述组件的信息对所述组件进行局部布局。
188.一种可选的实施方式中，所述占位布局模块1622，包括：
189.主树构建子模块16221，用于在所述多帧画面中的第一帧画面的处理过程中，根据所述组件的信息生成主元素树；其中，所述主元素树的各节点的属性为与所述节点对应的占位信息，且各节点不具有子节点；
190.第一布局子模块16222，用于根据所述主元素树，对所述组件进行布局处理，得到所述第一帧画面的布局信息。
191.一种可选的实施方式中，所述局部布局模块1623，包括：
192.子树构建子模块16231，用于在所述多帧画面中除第一帧画面的其他任一帧画面的处理过程中，根据所述组件的信息生成子元素树；其中，每一个所述子元素树与所述第一帧画面的主元素树中的每一个节点具有对应关系；
193.第二布局子模块16232，用于根据所述子元素树进行布局处理，得到其他任一帧画面的布局信息。
194.一种可选的实施方式中，所述子树构建子模块16231具体用于：
195.在任一帧画面的处理过程中获取所述组件的布局次数，若所述布局次数不大于所述分帧优先级，则根据所述组件的信息生成子元素树；
196.在所述布局次数的基础上添加1。
197.一种可选的实施方式中，所述子树构建子模块16231具体用于：
198.在所述组件的布局信息中确定未被处理的布局信息，并根据所述未被处理的布局信息生成子元素树。
199.一种可选的实施方式中，还包括合并单元1640，用于若在所述多帧画面中的第一帧画面的处理过程中，根据所述组件的信息进行占位布局的时长小于预设值，则在所述第一帧画面的处理过程中进行局部布局。
200.一种可选的实施方式中，所述分帧单元1620还用于：
201.若所述合并单元在所述第一帧画面的处理过程中进行局部布局后，所述第一帧画面的处理时长超时，则再次对所述组件进行加载时所述分帧单元对其进行分帧处理。
202.一种可选的实施方式中，还包括监听单元1650，用于监听对屏幕的滚动操作；
203.若监听到对所述屏幕的滚动操作，则所述获取单元执行所述获取所述组件的分帧优先级的步骤。
204.一种可选的实施方式中，还包括布局单元1660，用于：
205.若根据所述分帧优先级确定不对所述组件进行分帧处理，则在一帧画面中布局所述组件。
206.本公开提供一种组件的布局方法、装置、设备、存储介质及程序产品，应用于图像处理技术中的应用程序页面显示技术，以解决现有技术中对一帧画面进行布局和光栅化处理的耗时过长，导致帧丢失的问题。
207.本公开的技术方案中，所涉及的用户个人信息的获取，存储和应用等，均符合相关法律法规的规定，且不违背公序良俗。
208.根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种
计算机程序产品。
209.根据本公开的实施例，本公开还提供了一种计算机程序产品，计算机程序产品包括：计算机程序，计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得电子设备执行上述任一实施例提供的方案。
210.图17示出了可以用来实施本公开的实施例的示例电子设备1700的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。
211.如图17所示，设备1700包括计算单元1701，其可以根据存储在只读存储器(rom)1702中的计算机程序或者从存储单元1708加载到随机访问存储器(ram)1703中的计算机程序，来执行各种适当的动作和处理。在ram 1703中，还可存储设备1700操作所需的各种程序和数据。计算单元1701、rom 1702以及ram 1703通过总线1704彼此相连。输入/输出(i/o)接口1705也连接至总线1704。
212.设备1700中的多个部件连接至i/o接口1705，包括：输入单元1706，例如键盘、鼠标等；输出单元1707，例如各种类型的显示器、扬声器等；存储单元1708，例如磁盘、光盘等；以及通信单元1709，例如网卡、调制解调器、无线通信收发机等。通信单元1709允许设备1700通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
213.计算单元1701可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1701的一些示例包括但不限于中央处理单元(cpu)、图形处理单元(gpu)、各种专用的人工智能(ai)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(dsp)、以及任何适当的处理器、控制器、微控制器等。计算单元1701执行上文所描述的各个方法和处理，例如组件的布局方法。例如，在一些实施例中，组件的布局方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1708。在一些实施例中，计算机程序的部分或者全部可以经由rom 1702和/或通信单元1709而被载入和/或安装到设备1700上。当计算机程序加载到ram 1703并由计算单元1701执行时，可以执行上文描述的组件的布局方法的一个或多个步骤。备选地，在其他实施例中，计算单元1701可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行组件的布局方法。
214.本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(fpga)、专用集成电路(asic)、专用标准产品(assp)、芯片上系统的系统(soc)、负载可编程逻辑设备(cpld)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
215.用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来
编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
216.在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦除可编程只读存储器(eprom或快闪存储器)、光纤、便捷式紧凑盘只读存储器(cd
‑
rom)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
217.为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，crt(阴极射线管)或者lcd(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
218.可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(lan)、广域网(wan)和互联网。
219.计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端
‑
服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品，以解决了传统物理主机与vps服务("virtual private server"，或简称"vps")中，存在的管理难度大，业务扩展性弱的缺陷。服务器也可以为分布式系统的服务器，或者是结合了区块链的服务器。
220.应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。
221.上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。