步骤 2 - 控制 UI 元素¶
在本教程的这一步骤中，您将向集群UI添加小部件并学习：
如何使用 Activity 节点创建一个结构，以便根据应用程序状态以不同布局显示相同的小部件。
如何使用 Activity 控制器属性来控制在 Activity Host 节点中哪个节点处于活动状态。
为 widgets 创建结构¶
在本节中，您将学习如何使用 Activities 创建一个结构，该结构使您能够根据集群模式以不同布局显示相同的小部件：
在 Drive 模式下最大化的小部件
在 Browse 模式下的最小化小部件
要创建小部件的结构：
在 Activity Browser 中，在 GaugeViewActivityHost 活动主机中：
添加一个 Activity，并将其及其预设命名为 LeftArea。
使用 LeftArea 活动在主仪表的左侧显示小部件。
在 LeftArea 活动中，创建一个名为 MaximizedMinimizedSwitcher 的 Exclusive Activity Host。
使用此独占活动主机可以在 Drive 模式下显示大型小部件或在 Browse 模式下显示小型小部件。
一个独占活动主机一次只能激活其一个子活动。在 Activity Browser 中，独占活动主机是青色的。
在 Activity Browser 中，选择 LeftArea 活动，并在侧面板中将 InitiallyActive 属性设置为启用。
通过这种方式，您可以将左侧区域的小部件设置为始终可见，而不管集群模式如何。
在 Activity Browser 中，创建小部件在最大化时的结构：
在 MaximizedMinimizedSwitcher Activity Host 中，添加一个名为 MaximizedLeft 的 Activity，并在其中添加一个名为 MaximizedWidget 的 Exclusive Activity Host。
您使用 Exclusive Activity Host 是因为您希望在左侧区域一次仅显示一个最大化的小部件。
在 Prefabs 中，选择 MaximizedLeft > MaximizedWidget 节点，并在属性中添加和设置：
将 Horizontal Padding 属性 Left 属性字段设置为 220。
将 Vertical Padding 属性 Top 属性字段设置为 220。
在本教程中，您使用这些属性来设置集群中最大化小部件的绝对位置。在实际项目中，定位此类 UI 元素的最佳方法是使用 Kanzi 布局之一。
在 Activity Browser 中，在 MaximizedWidget 活动主机中添加以下活动：
WidgetBatteryMaximized
WidgetMusicMaximized
WidgetNavigationMaximized
在 Prefabs 中，拖动：
将 WidgetBatteryMaximizedImage 到 WidgetBatteryMaximized 预设。
将 WidgetMusicMaximizedImage 到 WidgetMusicMaximized 预设。
WidgetNavigationMaximizedImage 到 WidgetNavigationMaximized 预设。
小技巧
Activity Browser 模拟应用程序中活动的激活。要在 Preview 中查看活动的内容，可以在 Activity Browser 中激活一个活动。在您要激活的活动中，点击
。在 Activity Browser 中，活动的活动标记为
，其边框为蓝色。
当小部件被最小化时，创建其结构：
在 MaximizedMinimizedSwitcher 活动主机中，添加一个名为 MinimizedLeft 的活动，并在其中添加一个名为 MinimizedWidget 的 Exclusive Activity Host。
使用 Exclusive Activity Host 是因为您希望在左侧区域一次仅显示一个最小化的小部件。
在 Prefabs 中，选择 MinimizedLeft > MinimizedWidget 节点，并在属性中添加和设置：
将 Horizontal Padding 属性 Left 属性字段设置为 200。
将 Vertical Padding 属性 Top 属性字段设置为 610。
在 Activity Browser 中，在 MinimizedWidget 活动主机中添加以下活动：
WidgetBatteryMinimized
WidgetMusicMinimized
WidgetNavigationMinimized
在 Prefabs 中，拖动：
将 WidgetBatteryMinimizedImage 到 WidgetBatteryMinimized 预设。
将 WidgetMusicMinimizedImage 到 WidgetMusicMinimized 预设。
WidgetNavigationMinimizedImage 到 WidgetNavigationMinimized 预设。
要在 Preview 中查看小部件，请在 Activity Browser 中单击您要激活的活动中的 。
使用控制器属性控制节点的激活。¶
在本节中，您将学习如何使用活动控制器属性来控制哪个节点在 Activity Host 中处于活动状态。
要使用控制器属性控制节点的激活：
在 Activity Browser 中，选择 MaximizedMinimizedSwitcher 活动主机，在 Controller Property 的侧面板中点击
，选择 Property，并将 Property 设置为 Activity.ActivityProperty.Cluster.MainView 属性。通过这种方式，您可以设置要使用的属性，以控制 Activity Host 激活哪些活动。
Activity 节点从具有您在该 Activity 节点中设置的相同控制器属性的最近的祖先节点获取控制器属性的值。在这种情况下，这是 Cluster 节点。
小技巧
当您设置控制器属性时，Activity Browser 会将该控制器属性的值分配给该活动主机中子活动的 ControllerValue 属性。在活动节点中，当活动主机激活该活动时，ControllerValue 属性的值会被设置。
如果控制器属性中的值选项数量与子活动的数量不匹配，则必须在每个子活动中手动设置 ControllerValue 属性的值。
在 Library > Property Types > Activity > ActivityProperty 按 Alt 并右键单击 中，选择 Property Type，并在 New Property Type 窗口中设置：
Name 到 Activity.ActivityProperty.LeftWidget
Category 到 Controller Properties
Data Type 到 Enumeration
Enumeration Options 到：
Key
Value
Battery
0
Music
1
Navigation
2
您使用此活动控制器属性来控制在 MaximizedWidget 和 MinimizedWidget 活动主机中哪个活动处于活动状态。
在 Node Tree 中，选择 Cluster 节点，在 Properties 中添加 Controller Properties > Activity.ActivityProperty.LeftWidget 属性。
Activity 节点从具有您在该 Activity 节点中设置的相同控制器属性的最近的祖先节点获取控制器属性的值。在这种情况下，这是 Cluster 节点。
在将控制器属性添加到活动主机后，您可以在侧面板的 Activity Browser 中设置该属性的值。
在 Activity Browser 中，选择 MaximizedWidget 活动主机，在侧面板中点击
，并将 Property 设置为 Activity.ActivityProperty.LeftWidget 属性。通过这种方式，您可以将 MaximizedWidget Exclusive Activity Host 设置为使用 Activity.ActivityProperty.LeftWidget 属性，以便在集群处于 Drive 模式时显示小部件。
Activity Browser 将该控制器属性的值分配给该活动主机中子活动的 ControllerValue 属性。
对 MinimizedWidget 独占活动主机重复上一步。
通过这种方式，您可以将集群设置为在 Browse 模式下显示与 Drive 模式相同的小部件，但为最小化版本。
小技巧
要在 Activity Browser 中查看哪个活动主机设置了控制器属性的值，请选择一个 Exclusive Activity Host，并在侧面板中单击
。
创建一个UI元素来控制小部件活动的激活。
在 Prefabs 中，将 LeftSideMenu Toggle Button Group 预设拖到 Header 预设中。
LeftSideMenu 切换按钮组包含切换按钮，您可以使用这些按钮来控制小部件活动的激活。
在 Prefabs 中，选择 LeftSideMenu 预设。在 Properties 中，点击 + Add Binding，并在 Binding Editor 中设置：
Binding Mode 到 Two way
Property 到 Current Button Index
Expression 到
{#Cluster/Activity.ActivityProperty.LeftWidget}单击 Save。
此绑定使 LeftSideMenu 切换按钮组中的切换按钮能够获取和设置 Cluster 活动主机中 Activity.ActivityProperty.LeftWidget 属性的值。这样，切换按钮就可以控制 MaximizedWidget 和 MinimizedWidget 活动主机中活动的状态。
您现在可以通过以下方式控制左侧哪个小部件处于活动状态：
在 Preview 中，单击 LeftSideMenu 切换按钮组中的切换按钮。
在 Activity Browser 中，选择 Cluster 活动主机，并在侧面板中更改 LeftWidget 属性的值。
接下来该做什么？¶
在本教程中，您学习了如何使用 Kanzi Activity 系统的基础知识。您可以重复本教程的整个步骤，以创建集群 UI 右侧区域的小部件结构。以下是一些创建该结构的有用提示：
为了保持结构的有序性，使用指示该项目用于集群 UI 右侧的名称。
例如，名称：
右侧 RightArea 的顶级活动。
活动控制器属性 RightWidget
在 MaximizedWidget 和 MinimizedWidget 中，当您为小部件创建活动时，使用您在左侧区域为活动创建的相同预设。创建活动时，您可以使用下拉菜单选择现有的预设。
设置小部件的位置：
在 MaximizedRight > MaximizedWidget 节点中，添加并设置：
将 Horizontal Padding 属性 Left 属性字段设置为 1450。
将 Vertical Padding 属性 Top 属性字段设置为 220。
在 MinimizedRight > MinimizedWidget 节点中，添加并设置：
将 Horizontal Padding 属性 Left 属性字段设置为 1340。
将 Vertical Padding 属性 Top 属性字段设置为 610。
在 RightSideMenu 预设中，将 Expression 设置为：
{#Cluster/Activity.ActivityProperty.RightWidget}
完成的教程项目在左右区域都有活动结构。您可以在 <KanziWorkspace>/Tutorials/Activity/Completed 目录中找到完成的 Kanzi Studio 项目。
要继续学习如何使用 Kanzi 活动系统，请完成：
另请参阅¶
要了解有关活动系统的更多信息，请参阅 活动。
要了解有关 Kanzi 布局的更多信息，请参阅 布局控制节点。
要了解有关 Toggle Button Group 的更多信息，请参阅 使用 Toggle Button Group 节点。