页面布局方法、装置、计算机设备、计算机可读存储介质与流程

1.本技术涉及计算机技术领域，特别是涉及一种页面布局方法、装置、计算机设备、存储介质和计算机程序产品。


背景技术：

2.随着计算机技术的发展，出现了各种类型的显示设备，例如手机、笔记本、电视等。用户通过显示设备呈现的页面获取网络上的信息，或者通过显示设备与其他用户进行信息交流、信息共享等。
3.不同类型的显示设备具有不同的尺寸，并且相同类型的显示设备也具有不同的尺寸。同一页面在不同尺寸的显示设备上显示时，需要调整页面的尺寸，以适合用户所使用的显示设备。传统方式一般是通过检测界面的分辨率的变化事件，根据变化事件和预设的基准值确定界面组件布局对应的目标数值，根据目标数值对界面组件布局的大小进行调整，以实现界面尺寸的自动调整。
4.然而，按照目前的布局调整方式调整界面的尺寸，容易出现界面中的组件发生畸变的情况，例如组件的宽高比例不协调、各组件产生重叠等，严重影响同一界面在不同尺寸的显示设备上的呈现效果。


技术实现要素：

5.基于此，有必要针对上述技术问题，提供一种能够适配不同尺寸的屏幕的页面布局方法、装置、计算机设备、计算机可读存储介质和计算机程序产品。
6.第一方面，本技术提供了一种页面布局方法。所述方法包括：
7.显示组件布局区域，所述组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域；
8.响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息；
9.当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面；
10.其中，所述页面用于在符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相匹配。
11.第二方面，本技术还提供了一种页面布局装置。所述装置包括：
12.显示模块，用于显示组件布局区域，所述组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域；
13.配置模块，用于响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏
幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息；
14.页面获得模块，用于当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面；
15.其中，所述页面用于在符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相匹配。
16.第三方面，本技术还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
17.显示组件布局区域，所述组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域；
18.响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息；
19.当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面；
20.其中，所述页面用于在符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相匹配。
21.第四方面，本技术还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：
22.显示组件布局区域，所述组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域；
23.响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息；
24.当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面；
25.其中，所述页面用于在符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相匹配。
26.第五方面，本技术还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现以下步骤：
27.显示组件布局区域，所述组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域；
28.响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息；
29.当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组
件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面；
30.其中，所述页面用于在符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相匹配。
31.上述页面布局方法、装置、计算机设备、存储介质和计算机程序产品，通过显示组件布局区域，该组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域，使得用户可以根据需求灵活增加更多的条件配置区域。响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息，使得用户可以自主配置满足不同屏幕尺寸的页面中的组件布局信息。当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面，从而能够对页面在不同尺寸的屏幕上展示效果进行定制。并且，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配，使得页面在不同尺寸的屏幕下能够呈现不同的布局，使得屏幕中呈现的页面布局更协调，能够有效适配不同尺寸的屏幕。
附图说明
32.图1为一个实施例中页面布局方法的应用环境图；
33.图2为一个实施例中页面布局方法的流程示意图；
34.图3为一个实施例中在组件布局区域中增加条件配置区域的界面示意图；
35.图4为一个实施例中在组件布局区域中显示移动控件、条件配置区域复制控件和条件配置区域删除控件的界面示意图；
36.图5为一个实施例中在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息的流程示意图；
37.图6为一个实施例中在条件配置区域显示条件配置项和在条件配置项下的至少一个组件配置区域的界面示意图；
38.图7为一个实施例中配置组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息的界面示意图；
39.图8为一个实施例中生成的页面的示意图；
40.图9为一个实施例中不同类型的条件配置项的界面示意图；
41.图10为一个实施例中页面布局方法的整体架构示意图；
42.图11为另一个实施例中页面布局方法的流程示意图；
43.图12为一个实施例中在屏幕尺寸大于16：9且小于28：9时生成的页面的示意图；
44.图13为一个实施例中在屏幕尺寸大于28：9时生成的页面的示意图；
45.图14为一个实施例中页面布局装置的结构框图；
46.图15为一个实施例中计算机设备的内部结构图。
具体实施方式
47.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
48.本技术实施例提供的页面布局方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上，也可以放在云上或其他服务器上。终端102显示组件布局区域，组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域。终端102响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息。当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，终端102响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面。其中，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配。配置在各两个屏幕尺寸条件下的各组件的组件布局信息存储至服务器104。其中，终端102可以但不限于是各种台式计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
49.在一个实施例中，如图2所示，提供了一种页面布局方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：
50.步骤s202，显示组件布局区域，组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域。
51.其中，组件布局区域是指用于配置页面的组件布局的区域。条件配置触发事件是指增加组件布局区域中显示的条件配置区域的事件。条件配置触发事件具体可以是触摸操作、光标操作、按键操作或语音操作等。
52.具体地，显示组件布局区域，该组件布局区域中可显示至少一个条件配置区域，也可以不存在显示的条件配置区域。
53.无论组件布局区域中是否显示有条件配置区域，用户均可在组件布局区域触发条件配置，终端响应于用户在组件布局区域的条件配置触发事件，在组件布局区域中增加条件配置区域并显示。
54.例如，组件布局区域为空白区域，用户在组件布局区域点击任意位置，则在组件布局区域中新增条件配置区域。或者组件布局区域中已显示有条件配置区域，用户在组件布局区域中除已显示的条件配置区域以外的其他任意位置点击，则在组件布局区域中新增条件配置区域。
55.本实施例中，终端响应于条件配置触发事件，显示属性区域，该属性区域中显示条件配置区域增加控件，响应于用户对条件配置区域增加控件的触发操作，在组件布局区域中显示所增加的条件配置区域。例如，用户在组件布局区域点击鼠标右键，显示属性区域，在属性区域中显示“新增条件配置区域”的控件，用于点击该控件，则在组件布局区域中生
成并显示条件配置区域。所新增的条件配置区域的数量可以是一个或多个，具体可根据需求设置。
56.步骤s204，响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息。
57.其中，组件布局信息是表征组件在页面中的布局的信息。组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种维度的信息。组件尺寸信息表征组件的样式。组件状态信息用于表示组件在页面中是处于显示状态还是隐藏状态。
58.具体地，对于组件布局区域中显示的每个条件配置区域，用户可在每个条件配置区域配置屏幕尺寸条件，并在条件配置区域配置在该屏幕尺寸条件下的至少一个组件的组件布局信息。
59.终端响应于用户对组件布局区域中的条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，并显示配置在屏幕尺寸条件下的至少一个组件的组件布局信息。按照相同的处理方式，可在组件布局区域中的每个条件配置区域配置屏幕尺寸条件和在该屏幕尺寸条件下的至少一个组件的组件布局信息。
60.本实施例中，不同的条件配置区域可对应不同维度的信息。例如，组件布局区域包括3个条件配置区域，第一个条件配置区域用于配置各组件的组件位置信息和组件尺寸信息，第二个条件配置区域用于配置各组件的组件状态信息，第三个条件配置区域用于配置各组件的组件缩放信息。这3个条件配置区域中配置的屏幕尺寸条件可以相同，也可以不同。
61.本实施例中，一个条件配置区域可用于配置同一个屏幕尺寸条件下的各组件各自的组件布局信息。例如，在第一个条件配置区域中配置屏幕尺寸条件a，并在第一个条件配置区域中配置组件a的组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息，以及配置组件b的组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息。在第二个条件配置区域中配置屏幕尺寸条件b，并在第二各条件配置区域中配置组件a的组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息，以及配置组件b的组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息。
62.步骤s206，当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面；
63.其中，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配。
64.屏幕尺寸条件是指针对屏幕的尺寸设置的条件。屏幕的尺寸即屏幕的宽高比例，例如16：9、28：9、48：9等。屏幕尺寸条件例如屏幕尺寸小于16：9、屏幕尺寸大于16：9且小于28：9，或者屏幕尺寸大于28：9等，但不限于此。
65.具体地，当组件布局区域中存在至少两个屏幕尺寸条件，且至少两个屏幕尺寸条件中的每个屏幕尺寸条件均配置的组件布局信息，终端响应于组件布局完成事件，生成与
每个屏幕尺寸条件下的组件布局信息相对应的页面。进一步地，所获得的页面可以是预览页面。
66.本实施例中，当组件布局区域中的一个条件配置区域中完成了屏幕尺寸条件配置和在该屏幕尺寸条件下的组件布局信息的配置，响应于在该条件配置区域的组件布局完成事件，显示与该屏幕尺寸条件下的组件布局信息相对应的页面。
67.上述页面布局方法中，显示组件布局区域，组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域，使得用户可以根据需求灵活增加更多的条件配置区域。响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息，使得用户可以自主配置满足不同屏幕尺寸的页面中的组件布局信息。当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面，从而能够对页面在不同尺寸的屏幕上展示效果进行定制。并且，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配，使得页面在不同尺寸的屏幕下能够呈现不同的布局，使得屏幕中呈现的页面布局更协调，能够有效适配不同尺寸的屏幕。
68.在一个实施例中，该方法还包括：
69.在组件布局区域显示条件配置区域增加控件；响应于对条件配置区域增加控件的触发操作，在组件布局区域显示所增加的条件配置区域。
70.具体地，在组件布局区域中显示条件配置区域增加控件，用户触发该条件配置区域增加控件，终端响应于对条件配置区域增加控件的触发操作，在组件布局区域增加条件配置区域并显示。
71.本实施例中，终端响应于在组件布局区域的条件配置触发事件，在组件布局区域中增加条件配置区域并显示。
72.进一步地，响应于在组件布局区域的条件配置触发事件，在组件布局区域中增加条件配置区域并显示，包括：
73.在组件布局区域显示条件配置区域增加控件；响应于对条件配置区域增加控件的触发操作，在组件布局区域显示所增加的条件配置区域。
74.其他实施例中，响应于在组件布局区域的条件配置触发事件，在组件布局区域中增加条件配置区域并显示，包括：
75.响应于对组件布局区域中的条件配置区域的复制事件，获得复制事件所复制的条件配置区域；响应于条件配置区域的粘贴事件，在组件布局区域中，显示增加的组件配置区域。即，对于页面布局区域中已显示有条件配置区域，用户还可以对已显示的条件配置区域进行选择、复制、粘贴，以快速获得新增的条件配置区域。
76.本实施例中，响应于对组件布局区域中的条件配置区域的复制事件，获得复制事件所复制的条件配置区域，包括：
77.在组件布局区域显示条件配置区域复制控件；响应于对条件配置区域复制控件触发的复制事件，获得复制事件所复制的条件配置区域。
78.进一步地，组件布局区域还显示条件配置区域粘贴控件，响应于对条件配置区域
粘贴控件的触发操作，在组件布局区域增加显示所复制的条件配置区域。
79.本实施例中，在组件布局区域显示条件配置区域增加控件，以给用户提供增加条件配置区域的选择控件，使得用户可以根据自己的需求触发控件来增加自己所需要的条件配置区域。
80.如图3所示，组件布局区域300中显示有条件配置区域302，以及显示条件配置区域增加控件304，条件配置区域增加控件304可显示为“新增一条”，用户点击该条件配置区域增加控件304，则在组件布局区域300中新增一个条件配置区域302。
81.在一个实施例中，该方法还包括：
82.响应于在组件布局区域触发的条件配置区域删除事件，删除组件布局区域中的至少一个组件布局区域。进一步地，响应于在组件布局区域触发的条件配置区域选择事件和条件配置区域删除事件，从组件布局区域删除条件配置区域选择事件选中的组件布局区域。
83.本实施例中，响应于在组件布局区域触发的条件配置区域删除事件，删除组件布局区域中的至少一个组件布局区域，包括：
84.在每个条件配置区域显示条件配置区域删除控件；响应于对条件配置区域删除控件的触发操作，从组件布局区域中删除条件配置区域删除控件所属的条件配置区域。
85.在一个实施例，该方法还包括：
86.响应于对组件布局区域中的条件配置区域的移动事件，将响应移动事件的条件配置区域，按照移动事件所指示的移动方向在组件布局区域的多个条件配置区域之间移动，并显示响应移动事件的条件配置区域移动后在组件配置区域中的顺序。
87.本实施例，响应于对组件布局区域中的条件配置区域的移动事件，将响应移动事件的条件配置区域，按照移动事件所指示的移动方向在组件布局区域的多个条件配置区域之间移动，并显示响应移动事件的条件配置区域移动后在组件配置区域中的顺序，包括：
88.在每个组件布局区域中显示表征不同移动方向的移动控件；响应于对移动控件的触发操作，将触发的移动控件所属的条件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的条件配置区域所处的位置。
89.如图4所示，组件布局区域300的每个条件配置区域302中显示表征向上移动和向下移动的移动控件306，显示条件配置区域复制控件308，以及显示条件配置区域删除控件310。用户点击表征向上移动的移动控件306，则该移动控件所属的条件配置区域302向上移动一个顺序。用户点击表征向下移动的移动控件306，则该移动控件所属的条件配置区域302向下移动一个顺序。
90.用户点击条件配置区域复制控件308，则复制了条件配置区域复制控件308所属的条件配置区域302，用户在组件布局区域300中粘贴，即可得到新增加的条件配置区域302。
91.用户点击条件配置区域删除控件310，则从组件布局区域300中删除该条件配置区域删除控件310所属的条件配置区域302。
92.在一个实施例中，如图5所示，响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息，包括：
93.步骤s502，在组件布局区域中的每个条件配置区域，显示条件配置项和在条件配
置项下的至少一个组件配置区域。
94.具体地，条件配置区域包括条件配置项和在该条件配置项下的至少一个组件配置区域。终端在组件布局区域中的每个条件配置区域，显示条件配置项和在条件配置项下的至少一个组件配置区域。
95.步骤s504，响应于对每个条件配置区域中的条件配置项触发的条件配置事件，在响应条件配置事件的条件配置项中，显示条件配置事件生成的屏幕尺寸条件。
96.具体地，对于每个条件配置区域中的条件配置项，用户可在条件配置区域中的条件配置项中配置屏幕尺寸条件，终端响应于用户对条件配置项触发的条件配置事件，在响应条件配置事件的条件配置项中，显示条件配置事件生成的屏幕尺寸条件。
97.进一步地，条件配置事件包括对屏幕尺寸条件的条件选择事件或屏幕尺寸条件的编辑事件中的一种。用户可在条件配置项触发条件配置事件，以从多个候选屏幕尺寸条件中选择屏幕尺寸条件。而终端响应于用户在条件配置项触发的条件选择事件，显示多个候选屏幕尺寸条件，终端响应于用户对多个候选屏幕尺寸条件中屏幕尺寸条件的条件选择事件，在响应条件配置事件的条件配置项中显示条件选择事件选中的屏幕尺寸条件。
98.或者，用户可在条件配置项触发编辑事件，终端响应于编辑事件，在响应编辑事件的条件配置项中显示编辑形成的屏幕尺寸条件。
99.按照相同的处理方式，用户可对每个条件配置区域中的条件配置项配置相应的屏幕尺寸条件。
100.步骤s506，响应于对每个条件配置项下的组件配置区域触发的组件配置事件，在响应组件配置事件的组件配置区域中，显示组件配置事件配置在相应屏幕尺寸条件下的组件的组件布局信息。
101.具体地，每个条件配置区域中的条件配置项关联各自的组件配置区域，用户可在每个条件配置项关联的组件配置区域，配置相应条件配置项下的组件的组件布局信息。
102.对于每个条件配置项关联的组件配置区域，终端响应于用户对组件配置区域触发的组件配置事件，确定响应组件配置事件的组件配置区域，并在响应组件配置事件的组件配置区域中，显示组件配置事件配置在相应屏幕尺寸条件下的组件的组件布局信息。
103.本实施例中，终端可在响应组件配置事件的组件配置区域中，显示组件配置事件配置的在相应屏幕尺寸条件下的至少一个组件和配置的至少一个组件的组件布局信息。
104.如图6所示，每个条件配置区域600，显示条件配置项602和在条件配置项602下的至少一个组件配置区域604。用户在条件配置项602中配置屏幕尺寸条件606，例如屏幕尺寸条件606为“屏幕尺寸为16:9”，或“屏幕尺寸小于16:9”、或“屏幕尺寸大于16:9”、或“屏幕尺寸大于16:9，且小于48：9”。在该条件配置项602下的每个组件配置区域606中配置组件布局信息608。例如，组件布局信息608包括组件1的横坐标x为12，纵坐标为8，还可以包括组件1的位置在页面的右上角，还可以包括组件1的尺寸。
105.本实施例中，在组件布局区域中的每个条件配置区域，显示条件配置项和在条件配置项下的至少一个组件配置区域，使得每个条件配置项关联各自的组件配置区域。响应于对每个条件配置区域中的条件配置项触发的条件配置事件，在响应条件配置事件的条件配置项中，显示条件配置事件生成的屏幕尺寸条件，响应于对每个条件配置项下的组件配置区域触发的组件配置事件，在响应组件配置事件的组件配置区域中，显示组件配置事件
配置在相应屏幕尺寸条件下的组件的组件布局信息，从而能够为每个屏幕尺寸条件配置相关联的组件和组件的组件布局信息，使得每个屏幕尺寸条件下的组件和组件布局信息相互独立。
106.在一个实施例中，组件配置区域包括组件选择项和组件配置项；响应于对每个条件配置项下的组件配置区域触发的组件配置事件，在响应组件配置事件的组件配置区域中，显示组件配置事件配置的在相应屏幕尺寸条件下的组件的组件布局信息，包括：
107.响应于对每个条件配置项下的组件选择项触发的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件；响应于在组件配置项触发的对组件的组件配置事件，在响应组件配置事件的组件配置项中，显示对至少一个组件配置的在相应屏幕尺寸条件下的组件布局信息。
108.具体地，组件配置区域包括组件选择项和该组件选择项关联的组件配置项。组件选择项中可选择或更改组件，组件配置项中可配置所选中的组件的相关布局信息。对于每个条件配置项下的组件选择项，用户可以在组件选择项触发组件选择事件，以选择需要的组件。终端响应于对组件选择项触发的组件选择事件，显示多个候选组件，用户可以选择至少一个组件。终端在响应组件选择事件的组件选择项中，显示该组件选择事件选中的每个组件。
109.对于每个组件选择项下关联的组件配置项，用户可在关联的组件配置项中触发组件配置事件，终端在响应组件配置事件的组件配置项中，显示对组件选择项中显示的组件配置的在相应屏幕尺寸条件下的组件布局信息。
110.本实施例中，用户在组件选择项中的组件选择事件和在组件配置项中的组件配置事件之间的处理顺序不受限制，可先选择组件再配置组件布局信息，也可先配置组件布局信息再选择组件。
111.本实施例中，一个组件配置区域可包括至少一个组件选择项，一个组件选择项下关联至少一个组件配置项。
112.本实施例中，预先设置了供用户选择的多个候选组件，响应于对每个条件配置项下的组件选择项触发的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件，使得用户直接选择即可，操作简单，避免出错。响应于在组件配置项触发的对组件的组件配置事件，在响应组件配置事件的组件配置项中，显示对至少一个组件配置的在相应屏幕尺寸条件下的组件布局信息，使得用户能够为自主各组件配置相关联的组件布局信息，有效实现页面中组件布局的定制。
113.在一个实施例中，响应于对每个条件配置项下的组件选择项触发的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件，包括：
114.响应于在组件配置项触发的对组件的组件配置事件，显示多个候选组件；响应于针对候选组件的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件。
115.具体地，对于每个条件配置项下的组件选择项，用户可以在组件选择项触发组件选择事件，以选择需要的组件。终端响应于对组件选择项触发的组件选择事件，显示多个候选组件，用户可以从多个候选组件中选择至少一个组件。终端在响应组件选择事件的组件选择项中，显示该组件选择事件选中的每个组件。组件选择事件所选择的组件可以是一个
或多个。
116.本实施例中，预先设置了供用户选择的多个候选组件，响应于在组件配置项触发的对组件的组件配置事件，显示多个候选组件，以供用户自足选择，响应于针对候选组件的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件，使得用户无需额外操作即可直接选择，操作更简单更容易上手。
117.在一个实施例中，组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种；组件配置项包括用于配置组件位置信息的位置配置项、用于配置组件尺寸信息的尺寸配置项、用于配置组件状态信息的状态配置项，或用于配置组件缩放信息的缩放配置项中的至少一种。
118.具体地，组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种。组件状态信息用于表示组件是显示状态还是隐藏状态，显示状态表示该组件在页面中显示；隐藏状态表示该组件在页面中隐藏，即在页面中不显示。
119.组件配置事件包括对组件的位置配置事件、尺寸配置事件、状态配置事件，或缩放配置事件中的至少一种。
120.本实施例中，组件配置项包括位置配置项，则响应于在位置配置项触发的对组件的位置配置事件，在响应位置配置事件的位置配置项中，显示对至少一个组件配置的在相应屏幕尺寸条件下的组件位置信息。
121.本实施例中，组件配置项包括尺寸配置项，则响应于在尺寸配置项触发的对组件的尺寸配置事件，在响应尺寸配置事件的尺寸配置项中，显示对至少一个组件配置的在相应屏幕尺寸条件下的组件尺寸信息。
122.本实施例中，组件配置项包括状态配置项，则响应于在状态配置项触发的对组件的状态配置事件，在响应状态配置事件的状态配置项中，显示对至少一个组件配置的在相应屏幕状态条件下的组件状态信息。
123.本实施例中，组件配置项包括缩放配置项，则响应于在缩放配置项触发的对组件的缩放配置事件，在响应缩放配置事件的缩放配置项中，显示对至少一个组件配置的在相应屏幕缩放条件下的组件缩放信息。
124.本实施例中，组件配置项包括用于配置组件位置信息的位置配置项、用于配置组件尺寸信息的尺寸配置项、用于配置组件状态信息的状态配置项，或用于配置组件缩放信息的缩放配置项中的至少一种维度的配置项，则组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种维度的信息，使得用户可以根据自身需求配置至少一个维度的组件信息，使得页面布局的定制更灵活，更能够适配不同的应用场景。
125.如图7所示，每个条件配置区域700中显示条件配置项702和组件配置区域704。组件配置区域704包括组件选择项706，以及在条件配置项702下的位置配置项708、尺寸配置项710、状态配置项712，以及缩放配置项714。用户在条件配置项702中配置的屏幕尺寸条件为“屏幕尺寸大于16:9”。在组件选择项706中选择组件1。在位置配置项708中配置的组件位置信息为(12，8)，该组件位置信息还包括方位，即位于页面的右上角。在尺寸配置项710中配置的组件尺寸信息为宽度为17.44％、在状态配置项712中配置的组件状态信息为“显示”，表示该组件1在页面中显示。在缩放配置项714中配置组件缩放信息。
126.其中，缩放配置项714包括两种类型的组件缩放信息，一种是按条件固定调整，另一种是相较原比例自适应调整。每个组件从两种方式中选择其中一种。
127.如图，第一种缩放配置项716是按条件固定调整，例如在屏幕尺寸为16：9时，组件1的尺寸缩放0.5倍，在屏幕尺寸为48：9时，组件1的尺寸缩放2倍；其他屏幕尺寸不在设置的条件内，则组件1的尺寸不调整。
128.第二种缩放配置项718是相较原比例自适应调整，为每个屏幕尺寸设置了缩放系数，例如在16：9到48：9之内，组件1的尺寸乘以0.5，在大于48：9时，组件1的尺寸乘以0.3，目标组件调整后的尺寸不超过最大缩放值3。
129.本实施例中，所生成的页面如图8所示。
130.在其他实施例中，如图9所示，对于按条件固定调整的类型和相较原比例自适应调整的类型，分别配置条件配置项702和相应类型下的组件选择项706，以及在条件固定调整的类型下的缩放配置项716，在相较原比例自适应调整的类型下的缩放配置项718。
131.在其他实施例中，每个条件配置区域700中显示条件配置项702和组件配置区域704。组件配置区域704包括组件选择项706，每个组件配置区域704中包括位置配置项708、尺寸配置项710、状态配置项712，或缩放配置项714中的一种。
132.在一个实施例中，该方法还包括：
133.在每个条件配置区域中显示组件配置区域增加控件；响应于对组件配置区域增加控件的触发操作，在响应触发操作的条件配置区域中，显示增加的组件配置项。
134.具体地，在每个条件配置区域中显示组件配置区域增加控件，用户可以触发组件配置区域增加控件，以在相应的条件配置区域中中增加组件配置区域。终端响应于对组件配置区域增加控件的触发操作，确定响应触发操作的条件配置区域，并在响应触发操作的条件配置区域中增加组件配置项并显示。
135.在一个实施例中，该方法还包括：响应于在条件配置区域触发的组件配置区域增加事件，在条件配置区域中显示所增加的组件配置区域。
136.具体地，终端显示组件布局区域中的条件配置区域，该条件配置区域中可默认显示至少一个组件配置区域，也可以不存在显示的组件配置区域。无论条件配置区域中是否显示有组件配置区域，用户均可以在组件配置区域触发组件配置区域增加事件，终端响应于用户在条件配置区域触发的组件配置区域增加事件，在条件配置区域中显示所增加的组件配置区域。
137.本实施例中，响应于在条件配置区域触发的组件配置区域增加事件，在条件配置区域中显示所增加的组件配置区域，包括：
138.在每个条件配置区域中显示组件配置区域增加控件；响应于对组件配置区域增加控件的触发操作，在响应触发操作的条件配置区域中，显示增加的组件配置项。
139.本实施例中，响应于在条件配置区域触发的组件配置区域增加事件，在条件配置区域中显示所增加的组件配置区域，包括：
140.响应于对条件配置区域中的组件配置区域的复制事件，获得复制事件所复制的组件配置区域；响应于组件配置区域的粘贴事件，在响应粘贴事件的条件配置区域中，显示增加的组件配置区域。即当条件配置区域中已显示有组件配置区域，用户还可以对已显示的组件配置区域进行选择、复制、粘贴，以快速获得新增的组件配置区域。
141.本实施例中，响应于对条件配置区域中的组件配置区域的复制事件，获得复制事件所复制的组件配置区域，包括：
142.在条件配置区域显示组件配置区域复制控件；响应于对组件配置区域复制控件触发的复制操作，获得复制操作所复制的组件配置区域。
143.进一步地，条件配置区域中还显示组件配置区域粘贴控件，响应于对组件配置区域粘贴控件触发的粘贴操作，在该条件配置区域增加所复制的组件配置区域并显示。
144.本实施例中，在每个条件配置区域中显示，用于添加组件配置区域的控件，使得用户可以根据自己的需求触发控件来增加自己所需要的组件配置区域，增加的组件配置区域的数量能够由用户自己控制，使得组件配置区域的显示更灵活。
145.在一个实施例中，该方法还包括：
146.响应于在条件配置区域触发的组件配置区域删除事件，删除条件配置区域中的至少一个组件配置区域。响应于在条件配置区域触发的组件配置区域选择事件和组件配置区域删除事件，从条件配置区域删除组件配置区域选择事件选中的组件配置区域。
147.在一个实施例，该方法还包括：
148.响应于对条件配置区域中的组件配置区域的移动事件，将响应移动事件的组件配置区域，按照移动事件所指示的移动方向在条件配置区域的多个组件配置区域之间移动，并显示响应移动事件的组件配置区域移动后在条件配置区域中的顺序。
149.本实施例中，响应于对条件配置区域中的组件配置区域的移动事件，将响应移动事件的组件配置区域，按照移动事件所指示的移动方向在条件配置区域的多个组件配置区域之间移动，包括：
150.在每个组件配置区域中显示表征不同移动方向的移动控件；响应于对移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的组件配置区域所处的位置。
151.在一个实施例，该方法还包括：
152.响应于对所述移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，在所述条件配置区域的多个所述组件配置区域之间移动。
153.本实施例中，响应于对所述移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，在所述条件配置区域的多个所述组件配置区域之间移动，包括：在每个组件配置区域中显示表征不同移动方向的移动控件；响应于对移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的组件配置区域所处的位置。
154.其中，不同移动方向的移动控件，例如表征向上移动的控件，向下移动的控件，向左移动的控件，向右移动的控件等。
155.具体地，在每个组件配置区域中显示表征不同移动方向的移动控件，用户可通过触发移动控件来移动相应的组件配置区域。终端响应于对移动控件的触发操作，确定触发的移动控件所属的组件配置区域，并确定触发的移动控件所表征的移动方向，从而按照按照所表征的移动方向，将该组件配置区域移动至在该移动方向上，与该组件配置区域相邻的组件配置区域所处的位置。例如，将组件配置区域向上移动一个位置，即调整该组件配置
区域和相邻的上一个组件配置区域之间的位置。
156.本实施例中，在每个组件配置区域中显示表征不同移动方向的移动控件，响应于对移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的组件配置区域所处的位置，使得用户可以灵活控制各个组件配置区域的移动，以调整至用户满意的位置。
157.在一个实施例中，该方法还包括：
158.在每个组件配置区域中显示组件配置区域删除控件；响应于对组件配置区域删除控件的触发操作，从相应的条件配置区域中删除组件配置区域删除控件所属的组件配置区域。
159.具体地，在每个组件配置区域中显示组件配置区域删除控件，用户可以选择删除多余的组件配置区域。终端响应于对组件配置区域删除控件的触发操作，从相应的条件配置区域中删除组件配置区域删除控件所属的组件配置区域，使得用户在对页面的组件布局中可灵活增删组件配置区域，有效实现对组件布局的针对性定制。
160.在一个实施例，该方法还包括：
161.显示组件选择区域，在组件选择区域显示多个组件；响应于在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，显示组件选择事件选中的组件的组件初始信息；
162.响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息，包括：
163.响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及基于组件初始信息配置在屏幕尺寸条件下的至少一个组件的组件布局信息。
164.其中，组件选择区域是用于展示多个组件的区域。组件初始信息是指组件的默认信息，例如可以包括组件标识、组件尺寸等，但不限于此。
165.具体地，终端显示组件选择区域和组件布局区域。用户可以在组件选择区域选择所需组件，对于用户选择的组件，终端在组件布局区域的每个条件配置区域中自动显示该组件的组件初始信息。即，终端响应于用户在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，显示组件选择事件选中的组件，以及所选中的组件的组件初始信息。
166.终端响应于用户对组件布局区域中的条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件。用户可配置该屏幕尺寸条件下的组件的组件布局信息，该组件布局信息可包括组件的组件初始信息，也可以包括对组件初始信息进行更改后的信息。按照相同的处理方式，可在组件布局区域中的每个条件配置区域配置屏幕尺寸条件和在该屏幕尺寸条件下的至少一个组件的组件布局信息。
167.本实施例中，显示组件选择区域，在组件选择区域显示多个组件供用户选择，使得用户可以从组件选择区域中选择所需要的组件。响应于在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，自动显示组件选择事件选中的组件的组件初
始信息，使得用户可获得所选中的组件的初步信息。响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，以及获得基于组件初始信息配置在屏幕尺寸条件下的至少一个组件的组件布局信息，使得用户可以对组件初始信息进行调整，或者配置除组件初始信息之外的更多信息，以获得定制的组件布局。
168.在一个实施例，响应于在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，显示组件选择事件选中的组件的组件初始信息，包括：
169.响应于在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，显示条件配置项和组件选择事件选中的组件对应的组件配置区域；在组件配置区域中，显示所选中的组件的组件初始信息。
170.具体地，用户在组件选择区域中选择组件后，终端在组件布局区域的每个条件配置区域中，自动显示条件配置项，并自动显示在该条件配置项下的组件配置区域。并且，在组件配置区域中自动显示组件选择事件选中的组件，以及所选中的组件的组件初始信息。
171.本实施例中，将用户在组件选择区域中的组件选择事件作为触发条件配置区域中的条件配置项和组件配置区域的显示条件，使得显示更灵活便捷。并且，能够自动关联所选择的组件的条件配置项和组件配置区域。在组件配置区域中，能够自动显示所选中的组件的组件初始信息，便于用户修改组件初始信息，或者在组件初始信息的基础上，进一步配置其他维度的组件信息，有效提升组件布局信息配置的速度。
172.在一个实施例，该方法还包括：
173.响应于在组件选择区域中的组件选择事件，显示数据绑定区域；响应于在数据绑定区域触发的数据绑定操作，将数据绑定操作所指定的数据与组件选择事件选中的组件绑定；
174.当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面，包括：
175.当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，且至少一个组件存在绑定的数据，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面。
176.具体地，用户在组件选择区域中选择组件后，自动显示数据绑定区域。用户可在数据绑定区域中为选择的组件选择需要绑定的数据，使得数据通过所绑定的组件显示。
177.终端确定用户选中的组件，响应于用户在数据绑定区域触发的数据绑定操作，确定数据绑定操作所指定的数据，将该数据与选中的组件进行绑定。按照相同的处理方式，用户可为每个组件绑定各自的数据。
178.用户对每个组件进行组件布局信息的配置，当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，且所选中的每个组件均存在绑定的数据，终端响应于组件布局完成事件，生成与至少两个屏幕尺寸条件下的组件布局信息相对应的页面。
179.本实施例中，响应于在组件选择区域中的组件选择事件，显示数据绑定区域，以响应于用户在数据绑定区域触发的数据绑定操作，将数据绑定操作所指定的数据与组件选择事件选中的组件绑定，使得用户能够自定义组件的绑定数据，以通过组件显示相应的数据。当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，且至少一个组件存在绑
定的数据，生成与至少两个屏幕尺寸条件下的组件布局信息相对应的页面，从而获得用户定制的组件的布局信息和组件显示的数据的页面。并且，能够为不同的屏幕尺寸条件生成相应的页面，使得在不同尺寸比例的屏幕下呈现不同的布局。
180.在一个实施例，该方法还包括：
181.响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的屏幕；当处于尺寸识别模式的屏幕的尺寸符合至少两个屏幕尺寸条件中任一屏幕尺寸条件，在屏幕中，显示与在所符合的屏幕尺寸条件下配置的组件布局信息相对应的页面。
182.其中，识别触发事件是作用于屏幕尺寸识别控件的预设操作，用于触发屏幕的尺寸识别模式。识别触发事件具体可以是触摸操作、光标操作、按键操作或者语音操作。触摸操作可以是触摸点击操作、触摸按压操作或者触摸滑动操作，触摸操作可以是单点触摸操作或者多点触摸操作；光标操作可以是控制光标进行点击的操作或者控制光标进行按压的操作；按键操作可以是虚拟按键操作或者实体按键操作等。虚拟按键操作可以是对屏幕中显示的虚拟控件的操作。实体按键操作可以是对交互控制器上的实体控件或屏幕上的实体控件的操作，交互控制器能够控制终端的屏幕所显示的可视化元素。例如，交互控制器可以是电视机的遥控器、可以是鼠标等。
183.具体地，用户可触发对屏幕的尺寸的识别，终端响应于针对屏幕的尺寸的识别触发事件，进入尺寸识别模式，并显示处于尺寸识别模式的屏幕。
184.在处于尺寸识别模式的情况下，获取该屏幕的尺寸，并将该屏幕的尺寸与配置的各屏幕尺寸条件进行匹配，当该屏幕的尺寸符合任一屏幕尺寸条件，在该屏幕中，显示与在所符合的屏幕尺寸条件下配置的组件布局信息相对应的页面。
185.进一步地，当该屏幕的尺寸符合任一屏幕尺寸条件，获取与在所符合的屏幕尺寸条件相对应的页面，并在该屏幕中显示。
186.或者，当该屏幕的尺寸符合任一屏幕尺寸条件，获取配置在所符合的屏幕尺寸条件下的组件的组件布局信息，基于所获取的组件的组件布局信息生成相对应的页面。在该屏幕中显示所生成的页面。
187.本实施例中，在处于尺寸识别模式的情况下识别出屏幕的尺寸后，可自动退出尺寸识别模式，也可以响应用户的模式退出操作再退出。
188.本实施例中，通过交互控制器控制屏幕中页面的显示，该交互控制器上设置有指示尺寸识别模式开启或关闭的实体控件。
189.响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的屏幕，包括：响应于通过交互控制器触发的屏幕尺寸识别控件，显示处于尺寸识别模式的屏幕。
190.本实施例中，响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的屏幕，以根据当前屏幕的尺寸自适应调整所要呈现的页面的布局，当处于尺寸识别模式的屏幕的尺寸符合至少两个屏幕尺寸条件中任一屏幕尺寸条件，在屏幕中，显示与在所符合的屏幕尺寸条件下配置的组件布局信息相对应的页面，使得相同的页面能够在不同尺寸比例的屏幕下呈现不同的页面布局，能够有效适配不同尺寸的屏幕。
191.在一个实施例，响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的屏幕，包括：
192.在屏幕中显示屏幕尺寸识别控件；响应于针对屏幕尺寸识别控件的识别触发事
件，显示处于尺寸识别模式的屏幕。
193.其中，屏幕尺寸识别控件是用于识别屏幕尺寸的控件，该控件是一种可视化元素。该屏幕尺寸识别控件是控制否开启对屏幕的尺寸的识别功能的控件。
194.可视化元素是指可以显示出来使人眼可见的、用以传达信息的元素。该屏幕尺寸识别控件可以是屏幕上的实体控件、也可以是屏幕中显示的虚拟控件。虚拟控件可以是虚拟按钮、填空框、单选框或选项组等。
195.具体地，终端在屏幕中显示屏幕尺寸识别控件，以供用户选择是否开启尺寸识别模式。用户可通过触发屏幕尺寸识别控件来触发屏幕尺寸的识别模式，终端响应于用户对屏幕尺寸识别控件的识别触发事件，显示处于尺寸识别模式的屏幕，从而在处于尺寸识别模式的情况下识别出当前的屏幕的尺寸。
196.本实施例中，在处于尺寸识别模式的情况下，响应于针对屏幕尺寸识别控件的识别退出事件，退出该尺寸识别模式。例如可通过再次触发屏幕尺寸识别控件来退出尺寸识别模式。
197.本实施例中，在屏幕中显示屏幕尺寸识别控件，能够给用户提供了进入尺寸识别模式的功能控件，用户可以自由选择是否进入尺寸识别模式。响应于针对屏幕尺寸识别控件的识别触发事件，显示处于尺寸识别模式的屏幕，以识别出当前的屏幕的尺寸，从而生成适配该屏幕的页面。
198.在一个实施例，当处于尺寸识别模式的屏幕的尺寸符合至少两个屏幕尺寸条件中任一屏幕尺寸条件，在屏幕中，显示与在所符合的屏幕尺寸条件下配置的组件布局信息相对应的页面，包括：
199.获取屏幕的尺寸，确定屏幕的尺寸所符合的屏幕尺寸条件；确定在所符合的屏幕尺寸条件下配置的各组件各自的组件布局信息；根据各组件各自的组件布局信息生成与所符合的屏幕尺寸条件相对应的页面，在屏幕中显示页面。
200.具体地，当屏幕处于尺寸识别模式时，终端获取该屏幕的尺寸。终端获取各屏幕尺寸条件，将该屏幕的尺寸和各屏幕尺寸条件进行匹配，以确定该屏幕的尺寸所符合的屏幕尺寸条件。终端获取配置在所符合的屏幕尺寸条件下的每个组件的组件布局信息，根据所获取的每个组件的组件布局信息，生成与所符合的屏幕尺寸条件相对应的页面。在该屏幕中显示所生成的页面。
201.本实施例中，终端获取配置在所符合的屏幕尺寸条件下的每个组件的组件布局信息，并获取与每个组件绑定的数据。终端根据所获取的每个组件的组件布局信息和相绑定的数据，生成与所符合的屏幕尺寸条件相对应的页面。该页面中所显示的数据通过相绑定的组件和组件的组件布局信息呈现。
202.本实施例中，组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种；当组件布局信息包括组件位置信息，终端获取在所符合的屏幕尺寸条件下配置的各组件各自的组件位置信息；当组件布局信息包括组件尺寸信息，终端获取在所符合的屏幕尺寸条件下配置的各组件各自的组件尺寸信息；当组件布局信息包括组件状态信息，终端获取在所符合的屏幕尺寸条件下配置的各组件各自的组件状态信息；当组件布局信息包括组件缩放信息，终端获取在所符合的屏幕尺寸条件下配置的各组件各自的组件缩放信息；终端根据所获取的信息，生成与所符合的屏幕尺寸条件相对应的页面。
203.本实施例中，获取屏幕的尺寸，确定屏幕的尺寸所符合的屏幕尺寸条件，以获得在所符合的屏幕尺寸条件下配置的各组件各自的组件布局信息，从而获得适配在该尺寸下的组件布局信息。根据各组件各自的组件布局信息生成与所符合的屏幕尺寸条件相对应的页面，能够在该屏幕中呈现适配该屏幕尺寸的页面。
204.在一个实施例，组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息；确定在所符合的屏幕尺寸条件下配置的各组件各自的组件布局信息，包括：
205.获取各组件对应的组件位置信息，对各组件的组件位置信息进行轮询，获得各组件在所符合的屏幕尺寸条件下配置的组件位置信息；
206.获取各组件对应的组件尺寸信息，对各组件的组件尺寸信息进行轮询，获得各组件在所符合的屏幕尺寸条件下配置的组件尺寸信息；
207.获取各组件对应的组件状态信息，对各组件的组件状态信息进行轮询，获得各组件在所符合的屏幕尺寸条件下配置的组件状态信息；
208.获取各组件对应的组件缩放信息，对各组件的组件缩放信息进行轮询，获得各组件在所符合的屏幕尺寸条件下配置的组件缩放信息。
209.本实施例中，在配置完成每个屏幕尺寸条件下的组件布局信息后，对组件布局信息的存储方式有多种。例如，按照不同屏幕尺寸条件存储各组件布局信息，即在同一屏幕尺寸条件下配置的组件的组件布局信息关联存储，使得可以按照屏幕尺寸条件直接获得在该屏幕尺寸条件下配置的各组件的组件布局信息。
210.还可以按照每个组件的多个组件布局信息存储，多个组件布局信息是同一组件在不同屏幕尺寸条件下的组件布局信息。将同一组件在各屏幕尺寸条件下的组件布局信息进行关联存储，则获取某个屏幕尺寸条件下的组件布局信息时，需要对每个组件的多个组件布局信息进行轮询，筛选出每个组件在该屏幕尺寸条件下的组件布局信息。
211.其他实施例中，还可以直接存储配置在屏幕尺寸条件下的各组件的组件布局信息所生成的页面。即，将屏幕尺寸条件和相对应的页面关联存储，使得可以直接获取该页面进行展示。
212.在一个实施例，组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息，组件状态信息用于表征组件显示或组件隐藏；根据各组件各自的组件布局信息生成与所符合的屏幕尺寸条件相对应的页面，包括：
213.确定与表征组件显示的组件状态信息相对应的组件；针对与表征组件显示的组件状态信息相对应的组件中每个组件，根据所针对的组件的组件位置信息、组件尺寸和组件缩放信息，对所针对的组件进行位置调整和尺寸调整，得到所针对组件的调整后的组件位置信息信息和组件尺寸信息；
214.根据各调整后的组件位置信息和组件尺寸信息，生成与所符合的屏幕尺寸条件相对应的页面。
215.具体地，组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息，缩放信息用于对组件位置和组件尺寸进行调整。
216.组件状态信息用于表征组件显示或组件隐藏，例如在屏幕尺寸条件a下，为组件a配置的组件状态信息为“隐藏”，为组件b配置的组件状态信息为“显示”，则所生成的页面中会显示组件b而不显示组件a。
217.终端获取在符合的屏幕尺寸条件下配置的各组件的组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息后，筛选出表征组件显示的每个组件状态信息，并确定所筛选出的每个组件状态信息分别对应的组件。针对所确定的每个组件，根据所针对的组件的组件位置信息、组件尺寸和组件缩放信息，对所针对的组件进行位置调整和尺寸调整，得到所针对组件的调整后的组件位置信息信息和组件尺寸信息。按照相同的处理方式，可得到所确定的每个组件分别对应的组件位置信息信息和调整后的组件尺寸信息。终端根据每个组件对应的调整后的组件位置信息，以及调整后的组件尺寸信息，生成与所符合的屏幕尺寸条件相对应的页面。
218.本实施例中，确定与表征组件显示的组件状态信息相对应的组件，针对与表征组件显示的组件状态信息相对应的组件中每个组件，根据所针对的组件的组件位置信息、组件尺寸和组件缩放信息，对所针对的组件进行位置调整和尺寸调整，得到所针对组件的调整后的组件位置信息信息和组件尺寸信息，使得能够获得在所符合的屏幕条件下最终的组件位置信息信息和组件尺寸信息，从而根据最终的组件位置信息和组件尺寸信息，生成与所符合的屏幕尺寸条件相对应的页面，所生成的页面能够有效适配屏幕的尺寸，使得该页面在屏幕中显示时布局更协调。
219.在一个实施例中，页面布局方法的整体架构如图10所示。通过在大屏编辑器平台新建应用进行大屏应用搭建，根据业务场景需要配置该大屏的长屏自适应设置，大屏配置将在30秒内自动调用接口存储于大屏数据库。其中，长屏自适应配置是指在屏幕宽高比达到预设尺寸时，页面针对屏幕宽高比呈现出特定自适应效果的配置方法。
220.已存储的大屏配置将在编辑器平台应用管理页面看到对应的应用，可以对其编辑更新数据库；对其预览查看当前的页面配置是否符合业务场景需求；对其导出可直接生成基于react16+的前端示例代码。
221.在业务项目中安装所需的npm包，可直接对导出的前端示例代码进行集成，可能需要简单的二次开发融入业务逻辑，即可将符合业务场景需求的长屏自适应页面集成在业务项目中。本实施例中，主要处理在于将长屏自适应配置方式集成于starv大屏编辑器平台的配置中，处理流程如图11。
222.生成的大屏通用模板文件，首先判断大屏页面是否开启长屏自适应开关，若打开，才会进入后续长屏自适应设置逻辑；若关闭，进入是否开启通用自适应等其他适配判断逻辑。即判断用户是否触发屏幕尺寸识别控件。
223.其他适配判断逻辑例如，按照传统的按宽度铺满的缩放方式进行设置，即在水平方向上展示完整页面内容，在垂直方向上按比例进行压缩。
224.在开启长屏自适应开关的情况下，检测当前屏幕的尺寸是否存在符合的屏幕尺寸条件，是则获取配置在所符合的屏幕尺寸条件下的组件的组件布局信息。具体地，从所符合的屏幕尺寸条件下的配置中取出组件位置信息数组，对组件位置信息数组中配置的组件位置信息进行轮询。组件位置信息数组包含组件位置信息及组件尺寸信息。从所符合的屏幕尺寸条件下的配置中取出显隐信息数组，即组件状态信息，对显隐信息数组中配置的组件信息进行轮询，获得每个组件的组件状态信息。从所符合的屏幕尺寸条件下的配置中取出缩放信息对象，它包含按照条件固定调整和相较原比例自适应调整两种类型，对按照条件固定调整信息的数组进行轮询，以取出组件的组件缩放信息。对相较原比例自适应调整信
息进行轮询，从中取出组件的组件缩放信息，包括缩放系数和最大缩放值，并计算当前屏幕的尺寸与原始尺寸的差值，将其与缩放系数的乘积与最大缩放值的较小值作为当前缩放的变更值，对目标组件的缩放值进行设置。另外，对于每个组件都提供其百分比自适应能力，在屏幕比例超出原始比例时，根据当前屏幕宽高和组件配置的自适应设置(即位置与尺寸样式)，对每个组件的位置和宽高通过计算进行设置。
225.本实施例的页面布局方法，将长屏自适应配置集成在可视化平台中，使得能通过配置化的方式生成满足更多业务场景的大屏页面，并且仅需简单的二次开发即可集成在业务工程中，能在较大程度上提升研发效率。该可视化平台是基于mvc(模型-视图-控制器)模式，结合数据驱动思想开发的低代码编辑器系统，可由运营、设计或开发人员通过系统配置的方式搭建基于可视化业务场景的大屏页面。
226.并且，传统的页面组件配置，需要填写逻辑判断，这要求用户有一定的前端开发基础。为了降低使用者的学习成本，本实施例中配置为逻辑匹配符选择(如大于、小于、等于)和尺寸输入等方式。而在集成发布的方式上，除了可导出为代码，集成于业务项目中进行发布，也可以在平台提供直接发布的方式，用户通过浏览平台生成的页面链接即可直接进行大屏页面浏览。
227.本实施例中的页面布局方法，能够在屏幕尺寸低于28:9的情况下展示为“u”字型页面布局，在高于28:9的情况下展示为“川”字型页面布局。并且，还能够对更多不同尺寸的屏幕展示不同的页面布局，从而满足更加复杂的业务场景需求。
228.在一个实施例中，提供了一种页面布局方法，应用于终端，包括：
229.显示组件布局区域，在组件布局区域显示条件配置区域增加控件；响应于对条件配置区域增加控件的触发操作，在组件布局区域显示所增加的条件配置区域。
230.接着，在组件布局区域中的每个条件配置区域，显示条件配置项和在条件配置项下的至少一个组件配置区域；组件配置区域包括组件选择项和组件配置项。
231.接着，响应于对每个条件配置区域中的条件配置项触发的条件配置事件，在响应条件配置事件的条件配置项中，显示条件配置事件生成的屏幕尺寸条件。
232.进一步地，响应于对每个条件配置项下的组件选择项触发的组件选择事件，显示多个候选组件；响应于针对候选组件的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件。
233.进一步地，响应于在组件配置项触发的对组件的组件配置事件，在响应组件配置事件的组件配置项中，显示对至少一个组件配置的在相应屏幕尺寸条件下的组件布局信息。
234.进一步地，响应于针对候选组件的组件选择事件，显示数据绑定区域；响应于在数据绑定区域触发的数据绑定操作，将数据绑定操作所指定的数据与组件选择事件选中的组件绑定。
235.可选地，在每个条件配置区域中显示组件配置区域增加控件；响应于对组件配置区域增加控件的触发操作，在响应触发操作的条件配置区域中，显示增加的组件配置项。
236.可选地，在每个组件配置区域中显示表征不同移动方向的移动控件；响应于对移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的组件配置区域所处的位置。
237.接着，当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，且屏幕尺寸条件下的每个组件存在绑定的数据，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面。
238.本实施例中，显示组件布局区域，在组件布局区域能够增加、删除条件配置区域，使得用户可根据场景需求灵活增删条件配置区域。
239.在组件布局区域中的每个条件配置区域，显示条件配置项和在条件配置项下的至少一个组件配置区域，使得每个条件配置项关联各自的组件配置区域。响应于对每个条件配置区域中的条件配置项触发的条件配置事件，在响应条件配置事件的条件配置项中，可自定义生成的屏幕尺寸条件。而组件配置区域中的组件配置项包括用于位置配置项、尺寸配置项、状态配置项和缩放配置项，使得能够配置组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息等多个维度信息形成的布局信息，使得页面布局的定制更灵活，更能够适配不同的应用场景。
240.当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面，从而能够对页面在不同尺寸的屏幕上展示效果进行定制。并且，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配，使得页面在不同尺寸的屏幕下能够呈现不同的布局，使得屏幕中呈现的页面布局更协调，能够有效适配不同尺寸的屏幕。
241.在一个实施例中，提供了一种页面布局方法的应用场景，包括：
242.打开编辑器，在编辑器中显示屏幕面板，在屏幕面板中显示组件选择区域和组件布局区域。组件选择区域中显示多个组件，用户将需要使用的组件从组件选择区域都拖动到屏幕面板中。
243.用户在组件布局区域的每个条件配置区域，设置屏幕尺寸条件，例如在第一个条件配置区域的条件配置项中设置的屏幕尺寸条件为“屏幕尺寸大于16：9且小于28：9”。在第一个条件配置区域的组件配置区域中，用户在组件配置区域的组件选择项中选择组件，并在位置配置项中配置该组件在屏幕面板中的坐标和方位。在组件配置区域的尺寸配置项中配置该组件的组件的宽、高。在组件配置区域的状态配置项中配置该组件为显示状态或者隐藏状态，使得该组件在屏幕尺寸条件为“屏幕尺寸大于16：9且小于28：9”下显示或隐藏。在组件配置区域的缩放配置项中，为组件配置按照条件固定调整和相较原比例自适应调整两种类型中的任一中类型的组件缩放信息。对于按照条件固定调整的类型，则配置组件的缩放倍数。对于相较原比例自适应调整的类型，则配置组件的缩放系数和最大缩放值。按照相同的处理，对第一个条件配置区域中的每个组件均进行配置，配置完成后，在屏幕面板中显示相对应的预览页面。
244.对于第二个条件配置区域，用户在第二个条件配置区域的条件配置项中设置的屏幕尺寸条件为“屏幕尺寸大于28：9”，并按照与第一个条件配置区域中的处理，在第二个条件配置区域中进行配置。
245.组件布局区域中对条件配置区域中设置了“新增一条”的控件，用户点击该控件可新增一个条件配置区域。每个条件配置区域中还设置了条件配置区域移动控件、条件配置区域复制控件和条件配置区域删除控件，以供用户对条件配置区域进行移动、复制和删除。
246.条件配置区域中对组件配置区域中设置了“新增一条”的控件，用户点击该控件可新增一个组件配置区域。在每个组件配置区域中设置了组件配置区域移动控件、组件配置区域复制控件和组件配置区域删除控件，以供用户对组件配置区域进行移动、复制和删除。
247.在每个位置配置项、尺寸配置项、状态配置项和缩放配置项中均可以设置移动控件、复制控件和删除控件，以供用户对位置配置项、尺寸配置项、状态配置项和缩放配置项进行移动、复制和删除。
248.通过在starv系统中预览配置的大屏页面，可以看到具体的长屏自适应适配效果，即页面效果：
249.在屏幕尺寸低于16:9时，大屏页面将按照传统的等比例缩放宽度铺满的方式进行展示。即在保证尺寸16:9的条件下，按宽度铺满页面内容，对高度进行压缩，在垂直方向进行留白，使得所呈现的页面布局符合预期。
250.如图12所示，在屏幕的尺寸大于16：9且小于28：9的情况下，大屏页面整体将按照屏幕尺寸条件为“屏幕尺寸大于16：9且小于28：9”下的组件布局信息的效果呈现，各组件基于左上角顶点位置调整自适应宽度。如图12所示，组件“总览”以横向样式呈现在页面的左上方，组件“告警趋势”显示在页面的右上方，包括a层和b层的组件居中显示，呈现出较为协调的整体效果，适合当前的屏幕尺寸。
251.如图13所示，在屏幕的尺寸大于28：9的情况下，大屏页面整体将按照屏幕尺寸条件为“屏幕尺寸大于28：9”下的组件布局信息的效果呈现，各组件基于左上角顶点位置调整自适应宽度。如图13所示，组件“总览”以纵向样式呈现在页面的左上方，意味着横向样式的组件隐藏了。组件“告警趋势”显示在页面的右下方，包括a层和b层的组件居中显示并放大，呈现出较为协调的整体效果，符合当前的屏幕尺寸。
252.本实施例中，能够实现在不同尺寸的屏幕上展示不同的页面布局和适配效果，所生成的页面可以支持组件布局、组件显隐、组件缩放这几个维度的定制化布局效果。并且，各个功能集成在星图可视化平台中，支持低代码快速配置，一方面能大大降低研发成本、提升研发效率；另一方面可以在配置完成后，通过预览页面即可查看即时配置效果，非常直观高效。
253.应该理解的是，虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
254.基于同样的发明构思，本技术实施例还提供了一种用于实现上述所涉及的页面布局方法的页面布局装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个页面布局装置实施例中的具体限定可以参见上文中对于页面布局方法的限定，在此不再赘述。
255.在一个实施例中，如图14所示，提供了一种页面布局装置1400，包括：显示模块1402、配置模块1404和页面获得模块1406，其中：
256.显示模块1402，用于显示组件布局区域，组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域。
257.配置模块1404，用于响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息。
258.页面获得模块1406，用于当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面。
259.其中，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配。
260.本实施例中，显示组件布局区域，组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域，使得用户可以根据需求灵活增加更多的条件配置区域。响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息，使得用户可以自主配置满足不同屏幕尺寸的页面中的组件布局信息。当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面，从而能够对页面在不同尺寸的屏幕上展示效果进行定制。并且，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配，使得页面在不同尺寸的屏幕下能够呈现不同的布局，使得屏幕中呈现的页面布局更协调，能够有效适配不同尺寸的屏幕。
261.在一个实施例中，显示模块1402，还用于在组件布局区域显示条件配置区域增加控件；
262.增加模块，用于响应于对条件配置区域增加控件的触发操作，在组件布局区域显示所增加的条件配置区域。
263.在一个实施例中，显示模块1402，还用于响应于在组件布局区域触发的条件配置区域增加事件，在组件布局区域中显示所增加的条件配置区域。
264.在一个实施例中，显示模块1402，还用于在组件布局区域显示条件配置区域增加控件；响应于对条件配置区域增加控件的触发操作，在组件布局区域显示所增加的条件配置区域。
265.本实施例中，在组件布局区域显示条件配置区域增加控件，以给用户提供增加条件配置区域的选择控件，使得用户可以根据自己的需求触发控件来增加自己所需要的条件配置区域。
266.在一个实施例中，显示模块1402，还用于响应于对组件布局区域中的条件配置区域的复制事件，获得复制事件所复制的条件配置区域；响应于条件配置区域的粘贴事件，在组件布局区域中，显示增加的组件配置区域。
267.在一个实施例中，该装置还包括删除模块，删除模块用于响应于在组件布局区域触发的条件配置区域删除事件，删除组件布局区域中的至少一个组件布局区域。响应于在
组件布局区域触发的条件配置区域选择事件和条件配置区域删除事件，从组件布局区域删除条件配置区域选择事件选中的组件布局区域。
268.在一个实施例中，删除模块，还用于在每个条件配置区域显示条件配置区域删除控件；响应于对条件配置区域删除控件的触发操作，从组件布局区域中删除条件配置区域删除控件所属的条件配置区域。
269.在一个实施例中，该装置还包括移动模块，移动模块，还用于响应于对组件布局区域中的条件配置区域的移动事件，将响应移动事件的条件配置区域，按照移动事件所指示的移动方向在组件布局区域的多个条件配置区域之间移动，并显示响应移动事件的条件配置区域移动后在组件配置区域中的顺序。
270.在一个实施例，移动模块，还用于在每个组件布局区域中显示表征不同移动方向的移动控件；响应于对移动控件的触发操作，将触发的移动控件所属的条件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的条件配置区域所处的位置。
271.在一个实施例中，配置模块1404，还用于在组件布局区域中的每个条件配置区域，显示条件配置项和在条件配置项下的至少一个组件配置区域；响应于对每个条件配置区域中的条件配置项触发的条件配置事件，在响应条件配置事件的条件配置项中，显示条件配置事件生成的屏幕尺寸条件；响应于对每个条件配置项下的组件配置区域触发的组件配置事件，在响应组件配置事件的组件配置区域中，显示组件配置事件配置在相应屏幕尺寸条件下的组件的组件布局信息。
272.本实施例中，在组件布局区域中的每个条件配置区域，显示条件配置项和在条件配置项下的至少一个组件配置区域，使得每个条件配置项关联各自的组件配置区域。响应于对每个条件配置区域中的条件配置项触发的条件配置事件，在响应条件配置事件的条件配置项中，显示条件配置事件生成的屏幕尺寸条件，响应于对每个条件配置项下的组件配置区域触发的组件配置事件，在响应组件配置事件的组件配置区域中，显示组件配置事件配置在相应屏幕尺寸条件下的组件的组件布局信息，从而能够为每个屏幕尺寸条件配置相关联的组件和组件的组件布局信息，使得每个屏幕尺寸条件下的组件和组件布局信息相互独立。
273.在一个实施例中，配置模块1404，还用于响应于对每个条件配置项下的组件选择项触发的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件；响应于在组件配置项触发的对组件的组件配置事件，在响应组件配置事件的组件配置项中，显示对至少一个组件配置的在相应屏幕尺寸条件下的组件布局信息。
274.本实施例中，预先设置了供用户选择的多个候选组件，响应于对每个条件配置项下的组件选择项触发的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件，使得用户直接选择即可，操作简单，避免出错。响应于在组件配置项触发的对组件的组件配置事件，在响应组件配置事件的组件配置项中，显示对至少一个组件配置的在相应屏幕尺寸条件下的组件布局信息，使得用户能够为自主各组件配置相关联的组件布局信息，有效实现页面中组件布局的定制。
275.在一个实施例中，配置模块1404，还用于响应于在组件配置项触发的对组件的组件配置事件，显示多个候选组件；响应于针对候选组件的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件。
276.本实施例中，预先设置了供用户选择的多个候选组件，响应于在组件配置项触发的对组件的组件配置事件，显示多个候选组件，以供用户自足选择，响应于针对候选组件的组件选择事件，在响应组件选择事件的组件选择项中，显示组件选择事件选中的至少一个组件，使得用户无需额外操作即可直接选择，操作更简单更容易上手。
277.在一个实施例中，组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种；组件配置项包括用于配置组件位置信息的位置配置项、用于配置组件尺寸信息的尺寸配置项、用于配置组件状态信息的状态配置项，或用于配置组件缩放信息的缩放配置项中的至少一种。
278.本实施例中，组件配置项包括用于配置组件位置信息的位置配置项、用于配置组件尺寸信息的尺寸配置项、用于配置组件状态信息的状态配置项，或用于配置组件缩放信息的缩放配置项中的至少一种维度的配置项，则组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种维度的信息，使得用户可以根据自身需求配置至少一个维度的组件信息，使得页面布局的定制更灵活，更能够适配不同的应用场景。
279.在一个实施例中，增加模块，还用于在每个条件配置区域中显示组件配置区域增加控件；响应于对组件配置区域增加控件的触发操作，在响应触发操作的条件配置区域中，显示增加的组件配置项。
280.本实施例中，在每个条件配置区域中显示，用于添加组件配置区域的控件，使得用户可以根据自己的需求触发控件来增加自己所需要的组件配置区域，增加的组件配置区域的数量能够由用户自己控制，使得组件配置区域的显示更灵活。
281.在一个实施例中，增加模块，还用于响应于在条件配置区域触发的组件配置区域增加事件，在条件配置区域中显示所增加的组件配置区域。
282.在一个实施例中，删除模块，还用于响应于在条件配置区域触发的组件配置区域删除事件，删除条件配置区域中的至少一个组件配置区域。响应于在条件配置区域触发的组件配置区域选择事件和组件配置区域删除事件，从条件配置区域删除组件配置区域选择事件选中的组件配置区域。
283.在一个实施例中，删除模块，还用于在每个组件配置区域中显示组件配置区域删除控件；响应于对组件配置区域删除控件的触发操作，从相应的条件配置区域中删除组件配置区域删除控件所属的组件配置区域。
284.在一个实施例中，增加模块，还用于在每个条件配置区域中显示组件配置区域增加控件；响应于对组件配置区域增加控件的触发操作，在响应触发操作的条件配置区域中，显示增加的组件配置项。
285.在一个实施例中，增加模块，还用于响应于对条件配置区域中的组件配置区域的复制事件，获得复制事件所复制的组件配置区域；响应于组件配置区域的粘贴事件，在响应粘贴事件的条件配置区域中，显示增加的组件配置区域。
286.在一个实施例，移动模块还用于响应于对条件配置区域中的组件配置区域的移动事件，将响应移动事件的组件配置区域，按照移动事件所指示的移动方向在条件配置区域的多个组件配置区域之间移动，并显示响应移动事件的组件配置区域移动后在条件配置区域中的顺序。
287.在一个实施例，移动模块还用于在每个组件配置区域中显示表征不同移动方向的移动控件；响应于对移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的组件配置区域所处的位置。
288.本实施例中，在每个组件配置区域中显示表征不同移动方向的移动控件，响应于对移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，移动至相邻的组件配置区域所处的位置，使得用户可以灵活控制各个组件配置区域的移动，以调整至用户满意的位置。
289.在一个实施例，显示模块1402，还用于显示组件选择区域，在组件选择区域显示多个组件；响应于在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，显示组件选择事件选中的组件的组件初始信息；
290.配置模块1404，还用于响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，及基于组件初始信息配置在屏幕尺寸条件下的至少一个组件的组件布局信息。
291.本实施例中，显示组件选择区域，在组件选择区域显示多个组件供用户选择，使得用户可以从组件选择区域中选择所需要的组件。响应于在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，自动显示组件选择事件选中的组件的组件初始信息，使得用户可获得所选中的组件的初步信息。响应于对组件布局区域中的每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中，显示条件配置事件所指示的屏幕尺寸条件，以及获得基于组件初始信息配置在屏幕尺寸条件下的至少一个组件的组件布局信息，使得用户可以对组件初始信息进行调整，或者配置除组件初始信息之外的更多信息，以获得定制的组件布局。
292.在一个实施例，配置模块1404，还用于响应于在组件选择区域中的组件选择事件，在组件布局区域的每个条件配置区域中，显示条件配置项和组件选择事件选中的组件对应的组件配置区域；在组件配置区域中，显示所选中的组件的组件初始信息。
293.本实施例中，将用户在组件选择区域中的组件选择事件作为触发条件配置区域中的条件配置项和组件配置区域的显示条件，使得显示更灵活便捷。并且，能够自动关联所选择的组件的条件配置项和组件配置区域。在组件配置区域中，能够自动显示所选中的组件的组件初始信息，便于用户修改组件初始信息，或者在组件初始信息的基础上，进一步配置其他维度的组件信息，有效提升组件布局信息配置的速度。
294.在一个实施例，显示模块1402，还用于响应于在组件选择区域中的组件选择事件，显示数据绑定区域；
295.绑定模块，用于响应于在数据绑定区域触发的数据绑定操作，将数据绑定操作所指定的数据与组件选择事件选中的组件绑定；
296.页面获得模块1406，还用于当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，且至少一个组件存在绑定的数据，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面。
297.本实施例中，响应于在组件选择区域中的组件选择事件，显示数据绑定区域，以响应于用户在数据绑定区域触发的数据绑定操作，将数据绑定操作所指定的数据与组件选择事件选中的组件绑定，使得用户能够自定义组件的绑定数据，以通过组件显示相应的数据。
当组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，且至少一个组件存在绑定的数据，生成与至少两个屏幕尺寸条件下的组件布局信息相对应的页面，从而获得用户定制的组件的布局信息和组件显示的数据的页面。并且，能够为不同的屏幕尺寸条件生成相应的页面，使得在不同尺寸比例的屏幕下呈现不同的布局。
298.在一个实施例，显示模块1402，用于响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的屏幕；当处于尺寸识别模式的屏幕的尺寸符合至少两个屏幕尺寸条件中任一屏幕尺寸条件，在屏幕中，显示与在所符合的屏幕尺寸条件下配置的组件布局信息相对应的页面。
299.本实施例中，响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的屏幕，以根据当前屏幕的尺寸自适应调整所要呈现的页面的布局，当处于尺寸识别模式的屏幕的尺寸符合至少两个屏幕尺寸条件中任一屏幕尺寸条件，在屏幕中，显示与在所符合的屏幕尺寸条件下配置的组件布局信息相对应的页面，使得相同的页面能够在不同尺寸比例的屏幕下呈现不同的页面布局，能够有效适配不同尺寸的屏幕。
300.在一个实施例，显示模块1402，用于在屏幕中显示屏幕尺寸识别控件；响应于针对屏幕尺寸识别控件的识别触发事件，显示处于尺寸识别模式的屏幕。
301.本实施例中，在屏幕中显示屏幕尺寸识别控件，能够给用户提供了进入尺寸识别模式的功能控件，用户可以自由选择是否进入尺寸识别模式。响应于针对屏幕尺寸识别控件的识别触发事件，显示处于尺寸识别模式的屏幕，以识别出当前的屏幕的尺寸，从而生成适配该屏幕的页面。
302.在一个实施例，该装置还包括：
303.获取模块，用于获取屏幕的尺寸，确定屏幕的尺寸所符合的屏幕尺寸条件；
304.确定模块，用于确定在所符合的屏幕尺寸条件下配置的各组件各自的组件布局信息；
305.生成模块，用于根据各组件各自的组件布局信息生成与所符合的屏幕尺寸条件相对应的页面，在屏幕中显示页面。
306.本实施例中，获取屏幕的尺寸，确定屏幕的尺寸所符合的屏幕尺寸条件，以获得在所符合的屏幕尺寸条件下配置的各组件各自的组件布局信息，从而获得适配在该尺寸下的组件布局信息。根据各组件各自的组件布局信息生成与所符合的屏幕尺寸条件相对应的页面，能够在该屏幕中呈现适配该屏幕尺寸的页面。
307.在一个实施例，生成模块，还用于确定与表征组件显示的组件状态信息相对应的组件；针对与表征组件显示的组件状态信息相对应的组件中每个组件，根据所针对的组件的组件位置信息、组件尺寸和组件缩放信息，对所针对的组件进行位置调整和尺寸调整，得到所针对组件的调整后的组件位置信息信息和组件尺寸信息；根据各调整后的组件位置信息和组件尺寸信息，生成与所符合的屏幕尺寸条件相对应的页面。
308.本实施例中，确定与表征组件显示的组件状态信息相对应的组件，针对与表征组件显示的组件状态信息相对应的组件中每个组件，根据所针对的组件的组件位置信息、组件尺寸和组件缩放信息，对所针对的组件进行位置调整和尺寸调整，得到所针对组件的调整后的组件位置信息信息和组件尺寸信息，使得能够获得在所符合的屏幕条件下最终的组件位置信息信息和组件尺寸信息，从而根据最终的组件位置信息和组件尺寸信息，生成与
所符合的屏幕尺寸条件相对应的页面，所生成的页面能够有效适配屏幕的尺寸，使得该页面在屏幕中显示时布局更协调。
309.上述页面布局装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
310.在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图15所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元和输入装置。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过wifi、移动蜂窝网络、nfc(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面布局方法。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置，显示屏可以是液晶显示屏或电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
311.本领域技术人员可以理解，图15中示出的结构，仅仅是与本技术方案相关的部分结构的框图，并不构成对本技术方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
312.在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
313.在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
314.在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
315.需要说明的是，本技术所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
316.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(read-onlymemory，rom)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(reram)、磁变存储器(magnetoresistiverandomaccessmemory，mram)、铁电存储器(ferroelectricrandomaccessmemory，fram)、相变存储器(phasechange memory，pcm)、石
墨烯存储器等。易失性存储器可包括随机存取存储器(randomaccessmemory，ram)或外部高速缓冲存储器等。作为说明而非局限，ram可以是多种形式，比如静态随机存取存储器(staticrandomaccess memory，sram)或动态随机存取存储器(dynamicrandomaccessmemory，dram)等。本技术所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本技术所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。
317.以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
318.以上所述实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本技术专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。

技术特征：
1.一种页面布局方法，其特征在于，所述方法包括：显示组件布局区域，所述组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域；响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息；当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面；其中，所述页面用于在符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相匹配。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：在所述组件布局区域显示条件配置区域增加控件；响应于对所述条件配置区域增加控件的触发操作，在所述组件布局区域显示所增加的条件配置区域。3.根据权利要求1所述的方法，其特征在于，所述响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息，包括：在所述组件布局区域中的每个条件配置区域，显示条件配置项和在所述条件配置项下的至少一个组件配置区域；响应于对每个所述条件配置区域中的条件配置项触发的条件配置事件，在响应所述条件配置事件的条件配置项中，显示所述条件配置事件生成的屏幕尺寸条件；响应于对每个所述条件配置项下的组件配置区域触发的组件配置事件，在响应所述组件配置事件的组件配置区域中，显示所述组件配置事件配置在相应屏幕尺寸条件下的组件的组件布局信息。4.根据权利要求3所述的方法，其特征在于，所述组件配置区域包括组件选择项和组件配置项；所述响应于对每个所述条件配置项下的组件配置区域触发的组件配置事件，在响应所述组件配置事件的组件配置区域中，显示所述组件配置事件配置的在相应屏幕尺寸条件下的组件的组件布局信息，包括：响应于对每个所述条件配置项下的组件选择项触发的组件选择事件，在响应所述组件选择事件的组件选择项中，显示所述组件选择事件选中的至少一个组件；响应于在所述组件配置项触发的对所述组件的组件配置事件，在响应所述组件配置事件的组件配置项中，显示对所述至少一个组件配置的在相应屏幕尺寸条件下的组件布局信息。5.根据权利要求4所述的方法，其特征在于，所述响应于对每个所述条件配置项下的组件选择项触发的组件选择事件，在响应所述组件选择事件的组件选择项中，显示所述组件选择事件选中的至少一个组件，包括：响应于在所述组件配置项触发的对所述组件的组件配置事件，显示多个候选组件；
响应于针对所述候选组件的组件选择事件，在响应所述组件选择事件的组件选择项中，显示所述组件选择事件选中的至少一个组件。6.根据权利要求4所述的方法，其特征在于，所述组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息或组件缩放信息中的至少一种；所述组件配置项包括用于配置所述组件位置信息的位置配置项、用于配置所述组件尺寸信息的尺寸配置项、用于配置所述组件状态信息的状态配置项，或用于配置所述组件缩放信息的缩放配置项中的至少一种。7.根据权利要求3所述的方法，其特征在于，所述方法还包括：在每个所述条件配置区域中显示组件配置区域增加控件；响应于对所述组件配置区域增加控件的触发操作，在响应所述触发操作的条件配置区域中，显示增加的组件配置项。8.根据权利要求3所述的方法，其特征在于，所述方法还包括：在每个所述组件配置区域中显示表征不同移动方向的移动控件；响应于对所述移动控件的触发操作，将触发的移动控件所属的组件配置区域，按照触发的移动控件所表征的移动方向，在所述条件配置区域的多个所述组件配置区域之间移动。9.根据权利要求3所述的方法，其特征在于，所述方法还包括：在每个所述组件配置区域中显示组件配置区域删除控件；响应于对所述组件配置区域删除控件的触发操作，从相应的条件配置区域中删除触发的组件配置区域删除控件所属的组件配置区域。10.根据权利要求1所述的方法，其特征在于，所述方法还包括：显示组件选择区域，在所述组件选择区域显示多个组件；响应于在所述组件选择区域中的组件选择事件，在所述组件布局区域的每个条件配置区域中，显示所述组件选择事件选中的组件的组件初始信息；所述响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息，包括：响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺寸条件，及基于所述组件初始信息配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息。11.根据权利要求10所述的方法，其特征在于，所述响应于在所述组件选择区域中的组件选择事件，在所述组件布局区域的每个条件配置区域中，显示所述组件选择事件选中的组件的组件初始信息，包括：响应于在所述组件选择区域中的组件选择事件，在所述组件布局区域的每个条件配置区域中，显示条件配置项和所述组件选择事件选中的组件对应的组件配置区域；在所述组件配置区域中，显示所选中的组件的组件初始信息。12.根据权利要求1所述的方法，其特征在于，所述方法还包括：响应于在所述组件选择区域中的组件选择事件，显示数据绑定区域；响应于在所述数据绑定区域触发的数据绑定操作，将所述数据绑定操作所指定的数据
与所述组件选择事件选中的组件绑定；所述当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面，包括：当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，且所述至少一个组件存在绑定的数据，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面。13.根据权利要求1至12任意一项所述的方法，其特征在于，所述方法还包括：响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的所述屏幕；当处于所述尺寸识别模式的所述屏幕的尺寸符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件，在所述屏幕中，显示与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相对应的页面。14.根据权利要求13所述的方法，其特征在于，所述响应于针对屏幕的尺寸的识别触发事件，显示处于尺寸识别模式的所述屏幕，包括：在所述屏幕中显示屏幕尺寸识别控件；响应于针对所述屏幕尺寸识别控件的识别触发事件，显示处于尺寸识别模式的所述屏幕。15.根据权利要求12所述的方法，其特征在于，所述当处于所述尺寸识别模式的所述屏幕的尺寸符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件，在所述屏幕中，显示与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相对应的页面，包括：获取屏幕的尺寸，确定所述屏幕的尺寸所符合的屏幕尺寸条件；确定在所符合的屏幕尺寸条件下配置的各组件各自的组件布局信息；根据所述各组件各自的组件布局信息生成与所符合的屏幕尺寸条件相对应的页面，在所述屏幕中显示所述页面。16.根据权利要求15所述的方法，其特征在于，所述组件布局信息包括组件位置信息、组件尺寸信息、组件状态信息和组件缩放信息，所述组件状态信息用于表征组件显示或组件隐藏；所述根据所述各组件各自的组件布局信息生成与所符合的屏幕尺寸条件相对应的页面，包括：确定与表征组件显示的组件状态信息相对应的组件；针对与表征组件显示的组件状态信息相对应的组件中每个所述组件，根据所针对的组件的所述组件位置信息、所述组件尺寸和所述组件缩放信息，对所针对的组件进行位置调整和尺寸调整，得到所针对组件的调整后的组件位置信息信息和组件尺寸信息；根据各所述调整后的组件位置信息和组件尺寸信息，生成与所符合的屏幕尺寸条件相对应的页面。17.一种页面布局装置，其特征在于，所述装置包括：显示模块，用于显示组件布局区域，所述组件布局区域用于响应于条件配置触发事件以增加所显示的条件配置区域；配置模块，用于响应于对所述组件布局区域中的每个条件配置区域触发的条件配置事件，在响应所述条件配置事件的条件配置区域中，显示所述条件配置事件所指示的屏幕尺
寸条件，及配置在所述屏幕尺寸条件下的至少一个组件的组件布局信息；页面获得模块，用于当所述组件布局区域中存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与所述至少两个屏幕尺寸条件下的组件布局信息相对应的页面；其中，所述页面用于在符合所述至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的所述屏幕尺寸条件下配置的所述组件布局信息相匹配。18.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至16中任一项所述的方法的步骤。19.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至16中任一项所述的方法的步骤。20.一种计算机程序产品，包括计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至16中任一项所述的方法的步骤。

技术总结
一种页面布局方法，包括：显示组件布局区域，组件布局区域用于响应于条件配置触发事件以增加显示的条件配置区域；响应于对组件布局区域中每个条件配置区域触发的条件配置事件，在响应条件配置事件的条件配置区域中显示条件配置事件指示的屏幕尺寸条件，及配置在屏幕尺寸条件下的至少一个组件的组件布局信息；当存在至少两个屏幕尺寸条件下的组件布局信息，响应于组件布局完成事件，获得与至少两个屏幕尺寸条件下的组件布局信息相对应的页面；其中，页面用于在符合至少两个屏幕尺寸条件中任一屏幕尺寸条件的屏幕展示时，所展示页面中的组件的布局，与在所符合的屏幕尺寸条件下配置的组件布局信息相匹配。本方法能够生成适配不同屏幕尺寸的页面。同屏幕尺寸的页面。同屏幕尺寸的页面。


技术研发人员：易江南
受保护的技术使用者：腾讯科技（深圳）有限公司
技术研发日：2023.07.10
技术公布日：2023/10/15