步骤 3 - 定义所选项目的外观¶

在此步骤中，您定义当前选定列表项的外观。首先更改当前选定联系人的箭头颜色，然后在当前选定联系人的照片旁边显示一个垂直条。

在 List Box Item Container 2D 中定义所选项目的外观。¶

在本节中，您定义当前选定列表项的外观。在 List Box Item Container 2D 预设中，您定义选择箭头的颜色。

要定义 List Box Item Container 2D 中所选项目的外观：

在 Prefabs 中选择 List Box Item Container 2D 预设，并在 State Tools 中单击 Create State Manager。
在 State Tools 中，双击 Create State 以创建两个状态，双击每个状态的名称，并将状态重命名为 NotSelected 和 Selected。

Selected 状态定义了当用户在列表框中选择一个项目时应用程序的状态，NotSelected 状态则定义了该项目未被选择时的状态。
在 State Tools 中，点击 <No Controller Property> 下拉菜单并选择 List Box Item Container > Selected 属性。

在状态管理器中，您选择为 Controller Property 的属性值定义了状态组中每个状态何时处于活动状态的条件。

List Box Item Container > Selected 属性指示列表框项是否被选中。
在 State Tools 中，为每个状态设置控制器属性的值：
- 对于 NotSelected 状态，将值保持为 False。
- 对于 Selected 状态，将值设置为 True。
在 List Box Item Container 2D 预设中的 Prefabs 中，选择 Arrow 节点，在 Properties 中将 Image 属性设置为 ArrowGreen 图像，并在 State Tools 中单击 Selected 状态下的以将当前图像保存到该状态。

您将状态管理器设置为在 Grid List Box 2D 节点中选定的项目中显示一个绿色箭头。
在 State Tools 中，单击 Edit State Manager 以停用 State Tools。
在 State Tools 中，点击 Any -> Any 转换，在 State Transition Settings 中，将 Duration 属性设置为 0，然后点击 Save。

当您将状态转换的持续时间设置为0时，Kanzi 会在选定状态之间瞬间转换。

在 Preview 中，当您选择一个列表项时，该项的箭头会变为绿色。

通过修改项目模板来定义所选项目的外观。¶

在本节中，您定义当前选定列表项的外观。您修改 ContactItem 预设以在当前选定联系人的照片旁边显示一个垂直条。

通过修改项目模板来定义所选项目的外观：

在 ContactItem 预设中的 Prefabs 中创建一个 Empty Node 2D 节点，将其命名为 SelectionBar，并将其拖动到 ContactPhoto 和 ContactName 节点之间。

使用此节点在联系人照片的右侧为所选联系人显示一个垂直条。

您在 ContactItem 预设中创建 SelectionBar 节点，而不是在 List Box Item Container 2D 预设中创建，因为您希望将 SelectionBar 节点放置在 ContactPhoto 和 ContactName 节点之间。
在 Prefabs 中选择 SelectionBar 节点，并在 Properties 中添加并设置：
- Background Brush 到 Green Brush
- Layout Width 到 5
在 Prefabs 按 Alt 并右键单击中，List Box Item Container 2D 预设并选择 Alias。

使用 Alias 来获得对 Kanzi 节点的一致访问。您可以使用别名来访问 Kanzi Studio 中的节点，并使用 Kanzi Engine API。
在 Prefabs 中选择 SelectionBar 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：
- Property 到 Visible
- Expression 到
```
{#List Box Item Container 2D/ListBoxItemContainer.Selected}
```
  您使用在上一步中创建的别名访问 List Box Item Container 2D 预设。
单击 Save。

通过将 SelectionBar 节点的 Visible 属性绑定到 List Box Item Container 2D 预设的 Selected 属性，您可以使 SelectionBar 节点仅在选定的项目中可见。

在 Preview 中，当您选择列表项时，绿色选择栏会出现在该项中。

上一步

接下来该做什么？¶

在本教程中，您学习了如何使用 Grid List Box 节点创建一个可滚动的联系人列表，该列表从数据源接收数据。您还学习了如何使用 List Box Item Container 设置列表项的外观，并更改用户在列表中选择的项的外观。现在您可以：

学习如何定义数据源。请参阅教程：从数据源获取应用程序数据。
了解如何异步加载列表项资源。请参阅教程：异步加载和部署资源。
完成其他教程。请参阅教程。

另请参阅¶

要了解有关使用状态管理器的更多信息，请参阅使用状态机。

要了解有关使用绑定的更多信息，请参阅使用绑定和 Bindings expressions 参考。