界面编辑器的界面显示方法及装置、电子设备、存储介质与流程

1.本技术涉及计算机技术领域，特别是涉及界面编辑器的界面显示方法及装置、电子设备、存储介质。


背景技术：

2.界面编辑器可以是一种用于设计ui(user interface，用户界面)的编辑器。界面编辑器中对控件的可视性属性设置有两种，一种是设计时的可视性属性设置，该可视性属性设置用于决定控件在设计时预览视图中的可视性；另一种是运行时的可视性属性设置，该可视性属性设置用于决定控件在项目运行时的可视性。
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.目标可视性属性展示模块，用于在所述层级区内展示所述控件的目标可视性属性。
33.可选地，所述目标可视性属性展示模块，包括：
34.目标颜色确定模块，用于确定所述目标可视性属性对应的目标颜色；
35.目标颜色显示模块，用于根据所述目标颜色确定所述层级区内的所述控件的控件标识的颜色；或者，用于根据所述目标颜色确定所述层级区内的所述控件的背景颜色。
36.可选地，所述装置还包括：
37.颜色设置模块，用于响应于针对所述第二可视性选项的各个可视性属性对应的颜色的设置操作，确定所述目标可视性属性的目标颜色。
38.可选地，所述目标可视性属性展示模块，包括：
39.目标属性标识确定模块，用于确定所述目标可视性属性对应的目标属性标识；
40.新控件标识确定模块，用于根据所述目标属性标识和所述控件的控件标识，生成所述控件的新控件标识；
41.新控件标识展示模块，用于将所述新控件标识作为所述层级区内显示的所述控件的控件标识。
42.可选地，所述新控件标识确定模块，用于在所述控件的控件标识之前或之后，添加所述目标属性标识，以生成所述控件的新控件标识。
43.可选地，所述目标可视性属性展示模块，包括：
44.第一确定模块，用于确定所述目标可视性属性对应的目标属性标识；
45.第二确定模块，用于根据所述目标属性标识和所述控件的控件标识，生成所述控件的新控件标识；
46.第一展示模块，用于将所述新控件标识作为所述层级区内显示的所述控件的控件标识；
47.第三确定模块，用于确定所述目标可视性属性对应的目标颜色；
48.第二展示模块，用于根据所述目标颜色确定所述层级区内显示的所述控件的新控件标识中的目标属性标识的颜色。
49.可选地，所述装置还包括：
50.目标可视性属性更新模块，用于响应于针对所述控件的第二可视性选项选中的目标可视性属性的修改操作，更新所述层级区内展示的所述控件的目标可视性属性。
51.一种电子设备，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上所述的界面编辑器的界面显示方法的步骤。
52.一种计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上所述的界面编辑器的界面显示方法的步骤。
53.本技术具有以下优点：
54.在本技术实施例中，通过获取控件的第二可视性选项选中的目标可视性属性，在层级区内展示控件的目标可视性属性；其中，第二可视性选项选中的目标可视性属性是指控件的运行时的可视性属性，层级区内还展示有控件的设计时的可视性属性，使得用户可以直接在层级区中获知各个控件的设计时的可视性属性和运行时的可视性属性，与现有技术中，当用户需要查看所有控件的运行时的可视性属性时，需要挨个选中控件进行查看相比，本技术实施例可以方便用户获知所有控件的运行时的可视性属性，进而提高用户的工作效率；并且，本技术实施例中，层级区同时展示了控件的运行时的可视性属性和设计时的可视性属性，可以有效避免用户漏设或错设控件的运行时的可视性属性，提高项目设计的准确性。
附图说明
55.为了更清楚地说明本技术的技术方案，下面将对本技术的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
56.图1为本技术实施例的一种界面编辑器的界面显示方法的步骤流程图；
57.图2为现有技术中一种界面编辑器的界面示意图；
58.图3为本技术实施例的一种界面编辑器的界面显示方法处理得到的界面编辑器的界面示意图；
59.图4为本技术实施例的一种界面编辑器的界面显示方法处理得到的界面编辑器的界面示意图；
60.图5为本技术实施例的一种界面编辑器的界面显示方法处理得到的界面编辑器的界面示意图；
61.图6为本技术实施例的一种界面编辑器的界面显示方法处理得到的界面编辑器的界面示意图；
62.图7为本技术实施例的一种界面编辑器的界面显示方法处理得到的界面编辑器的界面示意图；
63.图8为本技术实施例的一种界面编辑器的界面显示方法中修改第二可视性选项的可视性属性对应的颜色的示意图；
64.图9为本技术实施例的一种界面编辑器的界面显示装置的结构框图。
具体实施方式
65.为使本技术的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本技术作进一步详细的说明。显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
66.界面编辑器可以是一种用于设计ui的编辑器。如umg(unreal motion graphics ui designer，虚幻运动图形界面设计器)，umg是一款视觉ui创作工具，可用于创作想要呈现给用户的ui元素，比如游戏内的hud(head-up display，抬头显示设备)、菜单或与界面相关的其他图形元素。
67.界面编辑器具有层级区、设计视图区和详情区。其中，层级区用于显示设计视图区中存在的所有控件的控件标识(如控件名称、控件编号等)，以及控件之间的层级关系；设计视图区可以接收用户对其内显示的控件进行操作，实时对其内显示的控件的布局进行视觉呈现；详情区用于显示层级区内被选中的控件的详情信息。
68.层级区内的每个控件具有对应的可视性选项，该可视性选项用于决定对应控件在设计视图区中的可视性属性，不会对该控件在项目运行中的可视性造成影响。也就是说，真正作用于项目运行时的可视性属性是由控件对应的详情区中的可视性选项决定。
69.具体地，请参照图2，图2为现有技术中的一种界面编辑器的界面示意图，层级区内的可视性选项包括可见属性和不可见属性这两种可视性属性，当一个控件在层级区内的可视性选项选中的的可视性属性为可见属性时(即类似眼睛图案的控件呈现睁眼状态)，该控件可以在设计视图区中显示，用户可以对设计视图区中显示的该控件进行移动等操作，以控制该控件在设计视图区中的布局，如图2中的控件1。当一个控件在层级区内的可视性选项选中的可视性属性为不可见属性时(即类似眼睛图案的控件呈现闭眼状态)，则该控件在设计视图区中处于隐藏状态，用户不能对设计视图区中的该控件进行任何操作，也无法看到设计视图区中的该控件，如图2中的控件2。当用户想要查看控件在运行中的可视性属性时，无论控件是否显示在设计视图区中，都需要选中层级区中的想要查看的控件，并在详情
区的行为栏中查看选中的控件的运行时的可视性属性。如图2中，选中层级区中的控件2，可以在详情区中查看该控件2的运行时的可视性属性。
70.因此，当用户想要获知各个控件的运行时的可视性属性时，需要挨个选中层级区中的控件，然后在详情区中看，该过程较为繁琐；另外，在实际工作中，由于控件的设计时的可视性属性会直接决定预览视图中显示的控件，而运行时的可视性属性不能直观地在预览视图中显示，因此，用户经常只记得设置层级区中各控件设计时的可视性属性，而忘记设置详情区中的控件运行时的可视性属性，最终导致项目运行的效果与用户预期的效果不同。
71.鉴于此，本技术实施例提供了一种界面编辑器的界面显示方法，通过获取控件的运行时的可视性属性，在层级区内展示控件的运行时的可视性属性；使得用户可以直接在层级区中获知各个控件的设计时的可视性属性和运行时的可视性属性，进而提高用户的工作效率，同时可以有效避免用户漏设或错设控件的运行时的可视性属性，提高项目设计的准确性。
72.参照图1，示出了本技术一实施例提供的一种界面编辑器的界面显示方法的步骤流程图，该界面编辑器的界面显示方法可以应用于界面编辑器中，使得用户在使用该界面编辑器设计ui时，可以更方便地获取各个控件的运行时的可视性属性。该界面编辑器具有层级区、设计视图区和详情区，一般地，为了方便用户控制设计视图区内显示的控件，层级区和设计视图区会同时展示在界面中，而详情区可以隐藏不显示，也可以调出显示，所述层级区内显示有所述设计视图区中存在的各个控件的控件标识，以及各个控件的第一可视性选项，所述第一可视性选项用于选择对应的控件在所述设计视图区内的可视性属性；所述详情区内显示有所述层级区内被选中的控件的第二可视性选项，所述第二可视性选项用于选择对应的控件在运行时的可视性属性。
73.在本技术实施例中，该方法可以包括如下步骤：
74.步骤101，获取所述控件的第二可视性选项选中的目标可视性属性；
75.步骤102，在所述层级区内展示所述控件的目标可视性属性。
76.本技术实施例通过获取控件的第二可视性选项选中的目标可视性属性，在层级区内展示控件的目标可视性属性；其中，第二可视性选项选中的目标可视性属性是指控件的运行时的可视性属性，层级区内还展示有控件的设计时的可视性属性，使得用户可以直接在层级区中获知各个控件的设计时的可视性属性和运行时的可视性属性，与现有技术中，当用户需要查看所有控件的运行时的可视性属性时，需要挨个选中控件进行查看相比，本技术实施例可以方便用户获知所有控件的运行时的可视性属性，进而提高用户的工作效率；并且，本技术实施例中，层级区同时展示了控件的运行时的可视性属性和设计时的可视性属性，可以有效避免用户漏设或错设控件的运行时的可视性属性，提高项目设计的准确性。
77.下面，将对本示例性实施例中界面编辑器的界面显示方法作进一步地说明。
78.在步骤101中，获取所述控件的第二可视性选项选中的目标可视性属性。
79.在本技术实施例中，每一个存在于设计视图区中的控件(包括设计视图区中隐藏的控件)的控件标识都会显示在层级区中，其中，控件标识可以是控件的名称或控件编号等，可以唯一确定控件的标识。示例性地，如图3所示，层级区中显示的控件1、控件2均为控件标识。由于层级区中，控件1的第一可视性选项选中的可视性属性为可见属性(类似眼睛
图案呈现睁眼状态)，因此，控件1显示在设计视图区中；控件2的第一可视性选项选中的可视性属性为不可见属性(类似眼睛图案呈现闭眼状态)，因此，控件2在设计视图区中不可见。
80.每一个存在于设计视图中的控件都具有对应的第二可视性选项，由于控件在运行时的可视性情况存在多种，因此，第二可视性选项存在多种可选的、与控件运行时的可视性相关的可视性属性，但第二可视性选项中只能选中一种可视性属性，以决定控件的运行时的可视性情况。本实施例中，将第二可视性选项选中的可视性属性记为目标可视性属性。
81.为方便本领域技术人员理解，下面以umg为例，第二可视性选项存在五种可视性属性，具体包括visible(控件可视)属性、collapsed(控件将被折叠，此时控件不可视切不占据容器控件的空间，不会参与命中测试)属性、hidden(控件不可视，但仍会占据容器控件的控件，不会参与命中测试)属性、hit test invisible(控件可视，但它本身和它的所有子控件都不会参与命中测试)属性、set hit test visible(控件可视，它本身不会参与命中测试但它的子控件会)属性这五个属性；其中，命中测试是指，在项目运行中，用户对控件进行点击或触摸时，只有参与命中测试的控件才会对点击和触摸做出响应。用户在设计项目时，对于每个控件，只能从上述五种可视性属性中选择其中一种可视性属性以控制对应控件在运行时的可视性情况，被选中的可视性属性即为目标可视性属性。
82.在步骤102中，在所述层级区内展示所述控件的目标可视性属性。
83.在确定每个控件的第二可视性选项选中的目标可视性属性之后，将目标可视性属性展示在层级区内的相应位置，以使得层级区在原有展示各个控件的控件标识以及第一可视性选项选中的可视性属性的基础上，增加展示各个控件第二可视性选项选中的目标可视性属性，使得用户可以直接在层级区中获知各个控件的设计时的可视性属性和运行时的可视性属性，进而提高用户的工作效率，同时可以有效避免用户漏设或错设控件的运行时的可视性属性，提高项目设计的准确性。
84.在本技术一些可选实施例中，上述在所述层级区内展示所述控件的目标可视性属性，可以包括：
85.确定所述目标可视性属性对应的目标颜色；
86.根据所述目标颜色确定所述层级区内的所述控件的控件标识的颜色。
87.在本实施例中，第二可视性选项的每个可视性属性都具有对应的颜色，不同可视性属性对应的颜色是不同的。因此，在获取到控件的第二可视性选项选中的目标可视性属性之后，可以进一步确定目标可视性属性对应的目标颜色，进而根据目标颜色确定层级区内的该控件的控件标识的颜色，也就是说，在确定目标可视性属性对应的目标颜色之后，可以将层级区内的对应控件的控件标识的字体颜色调整为目标颜色。
88.继续以umg为例，本示例中，预先设置各个可视性属性对应的颜色，例如，visible属性对应第一颜色，collapsed属性对应第二颜色，hidden属性对应第三颜色，hit test invisible属性对应第四颜色，set hit test visible属性对应第五颜色；当某个控件的目标可视性属性为hit test invisible属性时，则将该控件在层级区内的控件标识的文本颜色改为第四颜色。按照相同的方式对所有控件进行处理，使得层级区内的所有控件的控件标识添加对应的目标颜色，以便通过控件标识的颜色，即可获知控件第二可视性选项选中的目标可视性属性。
89.如图3所示，经步骤102处理之后，第一个控件的控件标识为控件1，并且控件1的文本颜色为第一颜色；第二个控件的控件标识为控件2，并且控件2的文本颜色为第二颜色；因此，可以直观地看到层级区中展示的控件标识的文本颜色，不需要选中层级区中的控件，就可以通过层级区展示的各个控件标识的文本颜色确定各个控件的运行时的可视性属性。即控件1的运行时的可视性属性为visible属性，控件2的运行时的可视性属性为collapsed属性。
90.在本技术一些可选实施例中，上述在所述层级区内展示所述控件的目标可视性属性，可以包括：
91.确定所述目标可视性属性对应的目标颜色；
92.根据所述目标颜色确定所述层级区内的所述控件的背景颜色。
93.在本实施例中，第二可视性选项的每个可视性属性都具有对应的颜色，不同可视性属性对应的颜色是不同的。因此，在获取到控件的第二可视性选项选中的目标可视性属性之后，可以进一步确定目标可视性属性对应的目标颜色，进而根据目标颜色确定层级区内的该控件的背景颜色，也就是说，在确定目标可视性属性对应的目标颜色之后，可以将层级区内的对应控件的背景颜色调整为目标颜色。
94.继续以umg为例，本示例中，预先设置各个可视性属性对应的颜色，例如，visible属性对应第一颜色，collapsed属性对应第二颜色，hidden属性对应第三颜色，hit test invisible属性对应第四颜色，set hit test visible属性对应第五颜色；当某个控件的目标可视性属性为hit test invisible属性时，则将该控件在层级区内的背景颜色改为第四颜色。按照相同的方式对所有控件进行处理，使得层级区内的所有控件的背景颜色调整为对应的目标颜色，以便通过背景颜色，即可获知控件第二可视性选项选中的目标可视性属性。
95.如图4所示，经步骤102处理之后，第一个控件的控件标识为控件1，并且控件1的背景颜色为第一颜色；第二个控件的控件标识为控件2，并且控件2的背景颜色为第二颜色；因此，可以直观地看到层级区中展示的控件标识的背景颜色，不需要选中层级区中的控件，就可以通过层级区展示的各个控件标识的背景颜色确定各个控件的运行时的可视性属性。即控件1的运行时的可视性属性为visible属性，控件2的运行时的可视性属性为collapsed属性。
96.在本技术一些可选实施例中，上述在所述层级区内展示所述控件的目标可视性属性，可以包括：
97.确定所述目标可视性属性对应的目标属性标识；
98.根据所述目标属性标识和所述控件的控件标识，生成所述控件的新控件标识；
99.将所述新控件标识作为所述层级区内显示的所述控件的控件标识。
100.在本实施例中，第二可视性选项的每个可视性属性都具有对应的属性标识，该属性标识可以是名称、简称或编号等可以唯一确定可视性属性的标识。在获取到控件的第二可视性选项选中的目标可视性属性之后，可以进一步确定目标可视性属性对应的目标属性标识，进而根据目标属性标识和控件的控件标识，生成控件的新控件标识，将新控件标识作为层级区内显示的控件的控件标识，为了便于区分，将更新前的控件标识记为原始控件标识，因此，本实施例是采用新控件标识替换原始控件标识，而新控件标识是根据原始控件标
识和目标属性标识生成的。
101.在一可选实施例中，上述根据所述目标属性标识和所述控件的控件标识，生成所述控件的新控件标识，可以包括：
102.在所述控件的控件标识之前或之后，添加所述目标属性标识，以生成所述控件的新控件标识。
103.在本实施例中，新控件标识由原始控件标识和目标属性标识组成，以便根据层级区内显示的控件标识，即可确定控件的目标可视性属性。
104.继续以umg为例，本示例中，预先设置各个可视性属性对应的属性标识，例如，visible属性对应的属性标识为vis，collapsed属性对应的属性标识为col，hidden属性对应的属性标识为hid，hit test invisible属性对应的属性标识为hti，set hit test visible属性对应的属性标识为sht；当某个控件的原始控件标识为控件1，其目标可视性属性为hit test invisible属性时，则可以得到该控件的新控件标识，新控件标识中包括原始控件标识和目标属性标识，例如，该控件的新控件标识可以表示为：[hti]控件1，或控件1[hti]，或hti控件1，或hti-控件1等。并且，在层级区中显示新控件标识，也就是说，将层级区中控件1对应的控件标识更新为上述生成的新控件标识，以便根据层级区内显示的控件标识，即可获知控件第二可视性选项选中的目标可视性属性。
[0105]
如图5所示，经步骤102处理之后，第一个控件的原始控件标识为控件1，新控件标识为[vis]控件1；第二个控件的原始控件标识为控件2，新控件标识为[col]控件2。因此，可以直观地看到层级区中展示的新控件标识，不需要选中层级区中的控件，就可以通过层级区展示的各个控件的新控件标识确定各个控件的运行时的可视性属性。即控件1的运行时的可视性属性为visible属性，控件2的运行时的可视性属性为collapsed属性。
[0106]
需要说明的是，上述关于在所述层级区内展示所述控件的目标可视性属性的实施例还可以进行合理的组合，均属于本技术的保护范围。例如，可以确定目标可视性属性对应的目标属性标识，根据目标属性标识和控件的控件标识，生成控件的新控件标识，在层级区中显示新控件标识的同时，根据目标可视性属性对应的目标颜色，确定新控件标识的文本颜色或确定新控件标识的背景颜色。
[0107]
如图6所示，经步骤102处理之后，第一个控件的原始控件标识为控件1，新控件标识为[vis]控件1，并且新控件标识中的文本颜色为第一颜色；第二个控件的原始控件标识为控件2，新控件标识为[col]控件2，并且新控件标识中的文本颜色为第二颜色。因此，可以直观地看到层级区中展示的新控件标识，不需要选中层级区中的控件，就可以通过层级区展示的各个控件的新控件标识和/或新控件标识中的文本颜色确定各个控件的运行时的可视性属性。即控件1的运行时的可视性属性为visible属性，控件2的运行时的可视性属性为collapsed属性。
[0108]
在本技术一些可选实施例中，上述在所述层级区内展示所述控件的目标可视性属性，可以包括：
[0109]
确定所述目标可视性属性对应的目标属性标识；
[0110]
根据所述目标属性标识和所述控件的控件标识，生成所述控件的新控件标识；
[0111]
将所述新控件标识作为所述层级区内显示的所述控件的控件标识；
[0112]
确定所述目标可视性属性对应的目标颜色；
[0113]
根据所述目标颜色确定所述层级区内显示的所述控件的新控件标识中的目标属性标识的颜色。
[0114]
在本实施例中，第二可视性选项的每个可视性属性都具有对应的属性标识，该属性标识可以是名称、简称或编号等可以唯一确定可视性属性的标识。在获取到控件的第二可视性选项选中的目标可视性属性之后，可以进一步确定目标可视性属性对应的目标属性标识，进而根据目标属性标识和控件的控件标识，生成控件的新控件标识，将新控件标识作为层级区内显示的控件的控件标识，也就是说，采用新控件标识替换原始控件标识。同时，第二可视性选项的每个可视性属性都具有对应的颜色，不同可视性属性对应的颜色是不同的。因此，在获取到控件的第二可视性选项的目标可视性属性之后，可以进一步确定目标可视性属性对应的目标颜色，进而根据目标颜色确定新控件标识中的目标属性标识的颜色，也就是说，在确定目标可视性属性对应的目标颜色之后，可以将层级区内对应控件的新控件标识中的目标属性标识的文本调整为目标颜色。
[0115]
可选地，在另一示例中，在确定目标可视性属性对应的目标颜色之后，可以将层级区内对应控件的新控件标识中的目标属性标识的背景颜色调整为目标颜色。
[0116]
需要说明的是，本实施例实现在层级区内展示控件的目标可视性属性的过程并不限于上述示例中的步骤顺序，例如，可以确定目标可视性属性对应的目标属性标识以及目标颜色，然后，根据目标颜色确定目标属性标识的颜色，或根据目标颜色确定目标属性标识的背景颜色，然后根据携带目标颜色信息的目标属性标识与控件的原始控件标识，生成控件的新控件标识，并将新控件标识替换层级区中对应的原始控件标识。
[0117]
继续以umg为例，本示例中，预先设置各个可视性属性对应的属性标识，例如，visible属性对应的属性标识为vis，collapsed属性对应的属性标识为col，hidden属性对应的属性标识为hid，hit test invisible属性对应的属性标识为hti，set hit test visible属性对应的属性标识为sht。并且预先设置各个可视性属性对应的颜色，例如，visible属性对应第一颜色，collapsed属性对应第二颜色，hidden属性对应第三颜色，hit test invisible属性对应第四颜色，set hit test visible属性对应第五颜色；当某个控件的原始控件标识为控件1，其目标可视性属性为hit test invisible属性时，则可以得到该控件的新控件标识，新控件标识中包括原始控件标识和目标属性标识，例如，该控件的新控件标识可以表示为：[hti]控件1，或控件1[hti]，或hti控件1，或hti-控件1等。并且，在层级区中显示新控件标识，也就是说，将层级区中控件1对应的控件标识更新为上述生成的新控件标识，同时，将新控件标识中的目标属性标识部分的文本颜色调整为目标颜色。
[0118]
如图7所示，经步骤102处理之后，第一个控件的原始控件标识为控件1，新控件标识为[vis]控件1，并且新控件标识中的vis的文本颜色为第一颜色；第二个控件的原始控件标识为控件2，新控件标识为[col]控件2，并且新控件标识中的col的文本颜色为第二颜色。因此，可以直观地看到层级区中展示的新控件标识，不需要选中层级区中的控件，就可以通过层级区展示的各个控件的新控件标识和/或新控件标识中的文本颜色确定各个控件的运行时的可视性属性。即控件1的运行时的可视性属性为visible属性，控件2的运行时的可视性属性为collapsed属性。
[0119]
可选地，上述在所述层级区内展示所述控件的目标可视性属性，可以包括：确定目标可视性属性对应的目标属性标识以及目标颜色，然后，根据目标颜色确定控件的原始控
件标识的颜色，或根据目标颜色确定原始控件标识的背景颜色，然后根据目标属性标识与携带目标颜色信息的原始控件标识，生成新控件标识，并将新控件标识替换层级区中对应的原始控件标识。
[0120]
进一步地，上述方法还可以包括：
[0121]
响应于针对所述第二可视性选项的各个可视性属性对应的颜色的设置操作，确定所述目标可视性属性的目标颜色。
[0122]
在本实施例中，第二可视性选项各个可视性属性对应的颜色可以由用户自定义设置，以适用不同用户的使用习惯，减少用户适应成本。
[0123]
需要说明的是，本实施例在对任意一个控件的第二可视性选项中各个可视性属性对应的颜色的设置操作，会同步到所有控件的第二可视性选项的各个可视性属性对应的颜色，当任意两个控件的目标可视性属性相同时，对应的目标颜色也相同。
[0124]
示例性地，当用户选中层级区中任意一个控件时，界面编辑器响应于层级区控件的选择操作，可以在详情区展示选中的控件的第二可视性选项。如图8所示，当第二可视性选项被选中时，可以展示多种可选的可视性属性，以及每种可视性属性可选的颜色；用户可以通过可视性属性对应的颜色选择控件调出多个可选的颜色，并从中选择一个作为该可视性属性对应的颜色。同理，可以设置其他可视性属性对应的颜色。当所有可视性属性对应的颜色设置完成后，若符合不同可视性属性对应的颜色不同的条件，则根据当前设置好的颜色确定目标可视性属性的目标颜色；可选地，若不符合不同可视性属性对应的颜色不同的条件，可以生成提示信息，以提示用户对颜色相同的至少两个可视性属性的颜色进行重新设置。
[0125]
进一步地，上述方法还可以包括：
[0126]
响应于针对所述控件的第二可视性选项选中的目标可视性属性的修改操作，更新所述层级区内展示的所述控件的目标可视性属性。
[0127]
在本实施例中，当用户修改了控件的第二可视性选项选中的目标可视性属性时，界面编辑器可以自动更新层级区中展示的该控件的目标可视性属性。
[0128]
示例性地，当用户选中层级区中待修改目标可视性属性的目标控件时，界面编辑器响应于层级区目标控件的选择操作，可以在详情区展示选中的目标控件的第二可视性选项，以及已选的目标可视性属性和其他可选的可视性属性；响应于针对其他可选的可视性属性的选择操作，该选择操作可以认为是对目标可视性属性的修改操作，将修改操作选中的可视性属性确定为该目标控件的新的目标可视性属性，并依据新的目标可视性属性更新层级区内展示的目标控件的目标可视性属性；以确保层级区内展示的目标控件的目标可视性属性的准确性，也即，可以确保层级区内展示的所有控件的目标可视性属性的准确性。
[0129]
本技术实施例通过获取控件的第二可视性选项选中的目标可视性属性，在层级区内展示控件的目标可视性属性；其中，第二可视性选项选中的目标可视性属性是指控件的运行时的可视性属性，层级区内还展示有控件的设计时的可视性属性，使得用户可以直接在层级区中获知各个控件的设计时的可视性属性和运行时的可视性属性，与现有技术中，当用户需要查看所有控件的运行时的可视性属性时，需要挨个选中控件进行查看相比，本技术实施例可以方便用户获知所有控件的运行时的可视性属性，进而提高用户的工作效率；并且，本技术实施例中，层级区同时展示了控件的运行时的可视性属性和设计时的可视
性属性，可以有效避免用户漏设或错设控件的运行时的可视性属性，提高项目设计的准确性。
[0130]
需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术实施例并不受所描述的动作顺序的限制，因为依据本技术实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本技术实施例所必须的。
[0131]
参照图9，示出了本技术的一种界面编辑器的界面显示装置实施例的结构框图，与上述界面编辑器的界面显示方法实施例相对应，该界面编辑器具有层级区、设计视图区和详情区，所述层级区内显示有所述设计视图区中存在的各个控件的控件标识，以及各个控件的第一可视性选项，所述第一可视性选项用于选择对应的控件在所述设计视图区内的可视性属性；所述详情区内显示有所述层级区内被选中的控件的第二可视性选项，所述第二可视性选项用于选择对应的控件在运行时的可视性属性；该界面编辑器的界面显示装置可以包括如下模块：
[0132]
目标可视性属性获取模块901，用于获取所述控件的第二可视性选项选中的目标可视性属性；
[0133]
目标可视性属性展示模块902，用于在所述层级区内展示所述控件的目标可视性属性。
[0134]
可选地，所述目标可视性属性展示模块902，包括：
[0135]
目标颜色确定模块，用于确定所述目标可视性属性对应的目标颜色；
[0136]
目标颜色显示模块，用于根据所述目标颜色确定所述层级区内的所述控件的控件标识的颜色；或者，用于根据所述目标颜色确定所述层级区内的所述控件的背景颜色。
[0137]
可选地，所述装置还包括：
[0138]
颜色设置模块，用于响应于针对所述第二可视性选项的各个可视性属性对应的颜色的设置操作，确定所述目标可视性属性的目标颜色。
[0139]
可选地，所述目标可视性属性展示模块902，包括：
[0140]
目标属性标识确定模块，用于确定所述目标可视性属性对应的目标属性标识；
[0141]
新控件标识确定模块，用于根据所述目标属性标识和所述控件的控件标识，生成所述控件的新控件标识；
[0142]
新控件标识展示模块，用于将所述新控件标识作为所述层级区内显示的所述控件的控件标识。
[0143]
可选地，所述新控件标识确定模块，用于在所述控件的控件标识之前或之后，添加所述目标属性标识，以生成所述控件的新控件标识。
[0144]
可选地，所述目标可视性属性展示模块902，包括：
[0145]
第一确定模块，用于确定所述目标可视性属性对应的目标属性标识；
[0146]
第二确定模块，用于根据所述目标属性标识和所述控件的控件标识，生成所述控件的新控件标识；
[0147]
第一展示模块，用于将所述新控件标识作为所述层级区内显示的所述控件的控件标识；
[0148]
第三确定模块，用于确定所述目标可视性属性对应的目标颜色；
[0149]
第二展示模块，用于根据所述目标颜色确定所述层级区内显示的所述控件的新控件标识中的目标属性标识的颜色。
[0150]
可选地，所述装置还包括：
[0151]
目标可视性属性更新模块，用于响应于针对所述控件的第二可视性选项选中的目标可视性属性的修改操作，更新所述层级区内展示的所述控件的目标可视性属性。
[0152]
对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
[0153]
本技术实施例还公开了电子设备，包括处理器、存储器及存储在所述存储器上并能够在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如上所述的界面编辑器的界面显示方法的步骤。
[0154]
本技术实施例还公开了计算机可读存储介质，所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如上所述的界面编辑器的界面显示方法的步骤。
[0155]
本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。
[0156]
本领域内的技术人员应明白，本技术实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本技术实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本技术实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。
[0157]
本技术实施例是参照根据本技术实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
[0158]
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0159]
这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0160]
尽管已描述了本技术实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本技术实施例范围的所有变更和修改。
[0161]
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。
[0162]
以上对本技术所提供的一种界面编辑器的界面显示方法及装置、电子设备和存储介质，进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想；同时，对于本领域的一般技术人员，依据本技术的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本技术的限制。