步骤 2 - 设置列表项的外观¶

在此步骤中，您使用 List Box Item Container 预设来设置 ContactsList 中联系项的外观。

要设置列表项的外观：

在 Prefabs 按 Alt 并右键单击中创建一个 List Box Item Container 2D 预设。

使用 List Box Item Container 预设来定义 List Box 节点中所有项目的外观和行为。使用 List Box Item Container 2D 与 Grid List Box 2D 节点。List Box Item Container 必须始终是一个预设。
在 Node Tree 中选择 ContactsList 节点，在 Properties 中添加 List Box > Item Container Template 属性，并将其设置为您在上一步中创建的 List Box Item Container 2D 预设。

Item Container Template 属性允许您在 List Box 节点中的项目之间共享功能。当您设置 Item Container Template 属性时，列表框中的每个项目都会继承来自 List Box Item Container 预设的功能。
在 Prefabs 中选择 List Box Item Container 2D 预设，在 Properties 中添加 Horizontal Alignment 和 Vertical Alignment 属性，并将它们设置为 Stretch。

通过这种方式，您可以将 List Box Item Container 2D 预设的大小设置为与 ContactsList 节点中单元格的大小相匹配。
在 List Box Item Container 2D 预设中的 Prefabs 中创建一个 Dock Layout 2D 节点。

使用 Dock Layout 节点可以将节点相对于 Dock Layout 节点的边进行放置。

Dock Layout 节点以减法方式排列其项目：在定位第一个节点后，Dock Layout 节点使用剩余空间定位下一个节点，依此类推。当排列其子节点时，Dock Layout 节点使用其整个大小。
在 Dock Layout 2D 节点中的 Prefabs 中创建一个 Empty Node 2D 节点，将其命名为 Separator，并在 Properties 中添加并设置：
- Background Brush 到 Light Gray Brush
- Layout Height 到 1
- Dock Layout > Side 到 Bottom
  
  通过这种方式，您可以将 Separator 节点置于 Dock Layout 2D 节点的底部。
通过这种方式，您可以在 ContactsList 节点中的联系人项之间创建一个水平分隔线。
在 Prefabs 中选择 List Box Item Container 2D 预设，并在 Properties 中添加并启用 Node 2D > Snap to Pixel 属性。

通过这种方式，当列表项的位置发生变化时，您可以保持其内容的像素完美。例如，Kanzi 在用户滚动联系人列表时，保持将 Separator 节点渲染为清晰的线条。
在 Dock Layout 2D 节点中的 Prefabs 中创建一个 Image 节点，将其命名为 Arrow，并在 Properties 中添加并设置：
- Image 到 ArrowGray
- Layout Height 到 30
- Vertical Alignment 到 Center
- Dock Layout > Side 到 Right
  
  通过这种方式，您将 Arrow 节点放置在 Dock Layout 2D 节点的右侧。Dock Layout 2D 节点将 Arrow 节点定位在放置 Separator 节点后剩余的空间中。
通过这种方式，您可以在 ContactsList 节点的每个项目中创建一个选择箭头的图像。在本教程的后面部分，您将使用 Arrow 节点来显示所选联系人。

Arrow 节点的左侧尚无内容，因此 Dock Layout 2D 节点将 Arrow 节点设置为占据列表项的整个宽度。ContactPhoto 节点覆盖了 Arrow 节点，这就是为什么在 Preview 中尚未看到 Arrow 节点的原因。
在 List Box Item Container 2D 预设中设置列表项的位置：
1. 在 Dock Layout 2D 节点中的 Prefabs 中创建一个 Content Layout 2D 节点。
  
  您将此 Content Layout 2D 节点用作列表项的根节点。
  
  Dock Layout 2D 节点将 Content Layout 2D 节点定位在定位 Arrow 节点后剩余的空间中。
2. 在 Prefabs 中选择 List Box Item Container 预设，在 Dictionaries 窗口中点击 + Add Resource，选择 Create > Alias，并将别名命名为 $layout。
  
  通过这种方式，您可以在 List Box Item Container 2D 预设的资源字典中创建一个 $layout 别名。Kanzi 使用特殊的别名名称 $layout 来告知 List Box Item Container 使用哪个 Content Layout 节点作为列表项的根节点。
3. 将 $layout 别名设置为指向 List Box Item Container > Dock Layout 2D > Content Layout 2D 节点。
  
  通过这种方式，您可以设置 Kanzi 以将 ContactItem 预设放置在 Content Layout 2D 节点中。