使用 Grid List Box 节点

使用 Grid List Box 节点可用于创建以网格形式排列的项的可滚动列表。

通过完成教程学习如何使用 Grid List Box 节点。请参阅 教程：使用 Grid List Box 创建联系人列表。。

当您向 Grid List Box 节点添加项目时，Grid List Box 节点会将它们放置在其第一行或第一列中：

• 当 Grid List Box 节点中的项目达到 Grid List Box 节点的设定宽度或高度时，Grid List Box 节点会将项目放置在下一行或列中。

• 当您为网格列表框设置的宽度和高度无法容纳这些项时，当您滚动 Grid List Box 节点时，这些项会变得可见。

要在 Grid List Box 节点中选择一个项目，请单击该项目。

Grid List Box 节点根据您在 Layout Direction 属性中设置的内容排列其项目：

• Right 用于沿 x 轴排列项目。

  当添加项目时，Grid List Box 节点将每个新项目放置在其前一个项目的右侧。当一个项目达到或超过 Grid List Box 节点的宽度时，Grid List Box 节点会将该项目放入新行。

  用户可以在 y 轴上滚动 Grid List Box 节点。

  

• Down 以沿 y 轴排列项目。

  当添加项目时，Grid List Box 节点将每个新项目放置在其前面的项目下方。当一个项目达到或超过 Grid List Box 节点的高度时，Grid List Box 节点会将该项目放入新列中。

  用户可以在 x 轴上滚动 Grid List Box 节点。

  

您可以使用 Grid List Box > Reversed Scrolling 属性来反转滚动方向。

您在 Kanzi Studio 中创建的 Grid List Box 节点是焦点范围，默认情况下处理键焦点和键输入。请参阅 在 List Box 节点中处理键焦点。。

当 Grid List Box 节点具有焦点时，您可以使用这些默认键盘键：

• ↑ 和 ↓ 用于滚动垂直列表框中的列表项。

• → 和 ← 用于滚动水平列表框中的列表项。

• Home 以选择第一个列表项。

• End 以选择最后一个列表项。

• Page Up 和 Page Down 用于移动到列表框可见区域的开头和结尾。

备注

所有列表框节点（Grid List Box 节点和 Trajectory List Box 3D 节点）中的项目都不是其子节点，即使在 Kanzi Studio 中，当您向列表框添加项目时看起来是这样。因为列表框项目不是列表框的子节点，所以您无法使用路径或别名从列表框外部引用这些项目。如果您需要从列表框项目引用列表框外部的对象，请使用绑定和别名。请参阅 绑定到 Grid List Box 节点之外的属性 和 从 Trajectory List Box 3D 节点导航到 Page 节点。。

创建一个 Grid List Box 节点

要创建 Grid List Box 节点：

1. 在 Node Tree 按 Alt 并右键单击 中，选择要创建 Grid List Box 节点的节点，并选择 Grid List Box 3D 或 Grid List Box 2D。

   您只能在 3D 节点中创建 3D 节点，例如 Scene 节点，并且只能在 2D 节点中创建 2D 节点。

   

2. 在 Node Tree 中将项目添加到 Grid List Box 节点。

   使用数据源向 List Box 节点添加项目。请参阅 使用数据源。

   例如，要创建联系人列表，请添加多个代表列表中的联系人的节点。请参阅 使用 List Box Item Container 预设。

   当您添加项目时，Grid List Box 节点会将它们从左上角到右下角排列在 Grid List Box 节点中。请参阅 设置 Grid List Box 节点如何排列其项目。

   要浏览 Grid List Box 节点中的项目，请在 Preview 中单击并拖动 Grid List Box 节点中的项目。

   

3. （可选） 如果您无法看到添加到 Grid List Box 节点的内容或内容不完全适合，请添加并设置 Cell Height 和 Cell Width 属性。

   您需要设置为列表框内的每个元素保留的区域。如果项目不适合单元格，单元格大小会裁剪项目。

   

4. 在 Node Tree 中选择 Grid List Box 节点，并在 Properties 中设置 Layout Height 和 Layout Width 属性。

   您设置了 Grid List Box 节点中项目可见的区域。如果 Grid List Box 节点中的所有项目都不适合该区域，Kanzi 会裁剪那些不适合的项目。用户可以滚动 Grid List Box 节点以访问所有项目。

   

5. （可选） In the Preview click to enter the Analyze mode, right-click , and select Debug objects.

   通过这种方式，您可以可视化 Grid List Box 节点的边界和 Grid List Box 节点中的项目。

   

设置 Grid List Box 节点如何排列其项目

您可以设置 Grid List Box 节点，使其将项目沿 x 轴或 y 轴排列。

要设置 Grid List Box 如何排列其项目：

1. 创建一个 Grid List Box 节点并向其添加项目。请参阅 创建一个 Grid List Box 节点。

2. 在 Properties 中，将 Layout Direction 属性设置为以下任一值：

   • Right 用于沿 x 轴排列项目。

     当添加项目时，Grid List Box 节点将每个新项目放置在其前一个项目的右侧。当一个项目达到或超过 Grid List Box 节点的宽度时，Grid List Box 节点会将该项目放入新行。

     使用 Layout Width 和 Layout Height 属性来设置 Grid List Box 节点区域的大小。

     用户可以在 y 轴上滚动 Grid List Box 节点。

     

   • Down 以沿 y 轴排列项目。

     当添加项目时，Grid List Box 节点将每个新项目放置在其前一个项目的下方。当一个项目达到或超过 Grid List Box 节点的高度时，Grid List Box 节点会将该项目放入新列中。使用 Layout Width 和 Layout Height 属性设置 Grid List Box 节点区域的大小。

     用户可以在 x 轴上滚动 Grid List Box 节点。

     

将选定的项放到 Grid List Box 中心

您可以设置一个 Grid List Box 节点，以便在用户点击该项目时将其带到列表框区域的中心。

要在用户选择项目时将 Grid List Box 节点中的项目设置为居中：

1. 创建一个 Grid List Box 节点并向其添加项目。请参阅 创建一个 Grid List Box 节点。

2. 在 Properties 中添加 Selection Behavior 属性，并将其设置为 Bring Center。

   当用户选择该项目时，您将 Grid List Box 节点设置为将项目滚动到节点区域的中心。Grid List Box 节点根据您在 Layout Direction 属性中设置的值来居中其项目。请参阅 设置 Grid List Box 节点如何排列其项目。

   

3. 在 Properties 中添加并设置：

   • 将 Item Area Begin 设置为您希望 Grid List Box 节点中项目区域开始的偏移量。

     例如，将其设为 0.4。

   • 将 Item Area End 设置为您希望 Grid List Box 节点中项目区域结束的偏移量。

     例如，将其设为 0.6。

   使用 Item Area Begin 和 Item Area End 属性来：

   • Grid List Box 2D。将列表开头和结尾的项目设置为在用户选择其中一个项目时也对齐到列表的中心。例如，如果 Grid List Box 节点一次显示五个项目，则这些项目中的每一个占用 Grid List Box 节点总面积的 0.2。最中心的项目在其上方占用 0.1 的空间，下方占用 0.1 的空间。

   • Grid List Box 3D。设置 Visible Amount In Parent 属性的值。使用 Visible Amount In Parent 属性设置着色器，以根据对象在列表框中的位置更改项目的外观。例如，如果您使用 Visible Amount In Parent 属性逐渐更改项目的可见性，请将项目区域开始属性设置为较大值，将项目区域结束属性设置为较小值。这样，您可以限制该项目的可见区域。

   

嵌套 Grid List Box 节点

您可以嵌套 Grid List Box 节点以在 Grid List Box 节点中创建一个 Grid List Box 节点，每个节点都可以独立滚动。例如，您可以创建：

• 一个专辑列表，其中包含一个可垂直滚动的 Grid List Box 节点的专辑类别，并包含一个嵌套的 Grid List Box 节点，您可以水平滚动以浏览每个类别。

• 一个联系人列表，其中包含一个可垂直滚动的 Grid List Box 节点，其中包含一个嵌套的 Grid List Box 节点，您可以水平滚动以编辑或删除联系人。

在 Grid List Box 节点中，使用 Layout Direction 属性设置 Grid List Box 节点如何排列其项目，并设置用户可以滚动的轴。将 Layout Direction 设置为：

• Right 在 y 轴上滚动列表项。

• Down 用于在 x 轴上滚动列表项。

要嵌套 Grid List Box 节点：

1. 创建一个 Grid List Box 节点。请参阅 创建一个 Grid List Box 节点。

   默认情况下，Layout Direction 属性的值为 Right，您可以在 y 轴上滚动列表项。要在 x 轴上滚动列表项，请将 Layout Direction 属性设置为 Down。

   

2. 为您在上一步中创建的 Grid List Box 节点的每个列表项创建结构。

   例如，如果您想创建几个包含相册的嵌套 Grid List Box 节点，在 Prefabs 中创建一个 Stack Layout 2D 节点，并在其中创建一个 Text Block 2D 节点。

   使用 Stack Layout 2D 节点来定位每个嵌套的 Grid List Box 和专辑类别标题，并使用 Text Block 2D 节点来显示类别标题。请参阅 使用 Stack Layout 节点。

   

3. 创建一个您想嵌套在第一步中创建的 Grid List Box 中的 Grid List Box 节点，并将其设置为在与其父 Grid List Box 节点不同的轴上滚动。如果您将父 Grid List Box 节点的 Layout Direction 属性设置为 Right，则对于嵌套的 Grid List Box 节点，将该属性设置为 Down，以便在 x 轴上滚动该 Grid List Box。

   例如：如果您在上一步中创建了一个 Stack Layout 2D 预设，在该 Stack Layout 2D 中创建一个 Grid List Box 节点，并将多个该预设的实例拖到 Grid List Box 节点的 Node Tree。

   

4. 添加项到各嵌套 Grid List Box 节点。

   例如，要创建一个垂直滚动的 Grid List Box，其中包含水平滚动的 Grid List Box 专辑，在 Prefabs 中创建一个 Image 节点，您用来表示每个专辑，并将该预设的多个实例拖动到每个嵌套的 Grid List Box。

   您可以使用数据源向 Grid List Box 添加项目。请参阅 使用数据源。

   

绑定到 Grid List Box 节点之外的属性

要将列表框项的属性绑定到列表框外的节点的属性，应使用别名。

例如，如果您有一个 Grid List Box 3D 或一个 Trajectory List Box 3D 节点，其中包含一个 Text Block 3D 节点项，并且想要将 Text Block 3D 节点的 Text 属性值设置为不在列表框中的 Empty Node 3D 节点属性的值：

1. 在 Node Tree 按 Alt 并右键单击 中，包含您要绑定的属性的节点并选择 Alias。请参阅 使用别名。

   例如，为 Empty Node 3D 节点创建一个别名。

2. 在 Dictionaries 确保将您创建的别名放在列表框节点可以访问的资源字典中。

   例如，将所有别名放置到 Screen 节点的资源字典中，或者在列表框节点中创建一个资源字典，并将别名放置到该资源字典中。请参阅 使用资源字典。

3. 创建绑定：

   1. 在 Node Tree 中，选择列表框节点内的节点，该节点是您要绑定到列表框节点外部的节点。

   2. 在 Properties 中，点击 + Add Binding，并使用别名创建绑定，以绑定到列表框节点外部节点中的属性。

      例如：在 Text Block 3D 节点中，使用您在第一步中创建的别名创建到 Empty Node 3D 节点的绑定。请参阅 Bindings expressions 参考。

      例如，使用以下绑定表达式：

      {#Empty Node 3D/TextConcept.Text}
      

      Text Block 3D 节点中的 Text 属性获取 Empty Node 3D 节点中的 Text 属性的值。

   3. 单击 Save。

从 Grid List Box 节点导航到 Page 节点。

当您想从列表框节点内的节点导航到 Page 节点时，请使用别名。例如，如果您使用 Grid List Box 或 Trajectory List Box 3D 节点创建地址簿，并希望在 Page 节点中显示地址簿条目的内容。

要从列表框节点导航到 Page 节点：

1. 在 Node Tree 按 Alt 并右键单击 中，导航到每个您要导航到的 Page 节点并选择 Alias。Kanzi Studio 创建一个指向您创建它的节点的别名，并将该别名放置到最近的资源字典中。

   

2. 在 Dictionaries 确保将您创建的别名放在列表框节点可以访问的资源字典中。

   例如，将所有别名放置到 Screen 节点的资源字典中，或者在列表框节点中创建一个资源字典，并将别名放置到该资源字典中。请参阅 使用资源字典。

   

3. 添加并设置 Navigate to Page 操作：

   1. 在 Node Tree 中的列表框节点中，选择包含您要使用的触发器以导航到您在第一步中创建别名的 Page 节点之一的节点。

      

   2. 在 Node Components > Triggers 按 Alt 并右键单击 中，使用您要用于导航到 Page 节点的触发器，并创建一个 Navigate to Page 操作。

      

   3. 在 Navigate to Page 操作中，将 Target Item 属性设置为您要导航到的 Page 节点的别名。

      所有别名都以 ＃ 号开头。

      

在 Preview 中，当您单击包含 Navigate to Page 操作的节点时，您将激活在该操作中选择的 Page 节点。

当用户与 Grid List Box 节点交互时做出反应。

使用 List Box 触发器在用户与 Grid List Box 节点交互时做出反应。例如，您可以在用户滚动该节点时设置 Grid List Box 节点的外观。

您可以将这些 List Box 触发器与 Grid List Box 节点一起使用：

名称 (Name)	描述 (Description)
List Box: Item Hidden	当列表框节点中的项目从工作内存中卸载时，List Box: Item Hidden 触发器被触发。 要设置您想要一次加载多少个项到工作内存，使用 Keep Alive Item Count 属性。
List Box: Item Selected	当用户在列表框中选择一个项目时，List Box: Item Selected 触发器被激活。
List Box: Item Visible	当列表框中的一个项目被创建并加载到工作内存时，List Box: Item Visible 触发器被触发。 要设置您想要一次加载多少个项到工作内存，使用 Keep Alive Item Count 属性。
List Box: Scroll Finished	当列表框滚动结束时，List Box: Scroll Finished 触发器被触发。
List Box: Scroll Started	当列表框开始滚动时，List Box: Scroll Started 触发器被激活。
List Box: Scrolled	每当列表框滚动时，List Box: Scrolled 触发器都会被设置。
List Box: Target Changed	当列表框的滚动目标更改时，List Box: Target Changed 触发器被激活。 例如，当用户选择列表框项时，滚动目标会发生变化，并且列表框会滚动以将该项移至列表框区域的中心。
List Box: User Scroll Finished	当用户停止滚动列表框时，List Box: User Scroll Finished 触发器被激活。
List Box: User Scroll Started	当用户开始滚动列表框时，List Box: User Scroll Started 触发器被激活。

要使用 List Box 触发器与 Grid List Box 节点：

1. 创建一个 Grid List Box 节点并向其添加项目。请参阅 创建一个 Grid List Box 节点。

   例如，创建一个 Grid List Box 2D 节点。

   

2. 定义您想通过 List Box 触发器设置的行为。

   例如，创建一个状态管理器，在其中定义状态，以在 Scroll Started 和 Scroll Finished 触发器被触发时设置 Grid List Box 2D 节点的外观。请参阅 创建状态机。

3. 添加和配置 List Box 触发器：

   1. 在 Node Tree 中，选择您要添加触发器的 List Box 节点，并在 Node Components > Triggers 中添加一个 List Box 触发器。

      例如：在 Node Tree 中，选择您在此过程开始时创建的 Grid List Box 节点，在 Node Components 按 Alt 并右键单击 Triggers 中，选择 Message Trigger > List Box > Scroll Started。

      

   2. 在 Node Components 按 Alt 并右键单击 中，选择您在上一步中创建的触发器，选择一个操作，并进行配置。

      例如，选择 State Manager: Go to State 操作，并在操作中将 State 属性设置为在 List Box: Scroll Started 触发器关闭时设置 Grid List Box 节点外观的状态。

      

4. 重复上一步，以添加并配置更多 List Box 触发器。

   例如，添加 List Box: Scroll Finished 触发器。在触发器的 State Manager: Go to State 操作中，将 State 设置为在触发器被触发时设置节点外观的状态。

在 Preview 中，当您滚动创建的 Grid List Box 节点时，您添加的触发器将被触发。

为 Grid List Box 项目启用双击手势

当您向 List Box 节点添加支持双击手势的项目时，必须在 List Box Item Container 预设中为这些项目启用双击手势。

要了解如何为节点启用双击手势，请参阅 为节点启用多击手势。

要为 List Box 项启用双击手势：

1. 创建一个 List Box Item Container 预设，并将其设置为 List Box 节点的 Item Container Template。请参阅 创建 List Box Item Container 预设。

2. 在 Prefabs 中，选择 List Box Item Container 预设。在 Properties 中，添加并启用 Input > Double-Click Enabled 属性。

   当您启用 Double-Click Enabled 属性时，Kanzi 在 List Box Item Container 预设中安装一个可生成双击消息的多击操纵器。

   

使用滑块滚动 Grid List Box 节点。

您可以使用 Slider 节点滚动 Grid List Box 节点。在此示例中，您使用滑块滚动垂直联系人列表。

要使用滑块滚动 Grid List Box 节点：

1. 创建您想要滚动的 Grid List Box 节点。

   例如：

   1. 在 Node Tree 中创建一个 Stack Layout 2D 节点。

      

   2. 从 Asset Packages > Factory Content 拖动 Contact List 到 Node Tree 并将其放在 Stack Layout 2D 节点上。请参阅 出厂内容资产。

      

2. 创建用于滚动 Grid List Box 节点的 Slider 节点，并设置 Slider 节点的大小和方向以匹配 Grid List Box 节点。

   例如：

   1. 从 Asset Packages > Factory Content 将 Slider 拖到 Node Tree 上，并将其放在 Stack Layout 2D 节点上。

      

   2. 在 Node Tree 中选择 Slider 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：

      • Property 到 Layout Width

      • Expression 到

        {@../Contact List/Node.Height}
        

      这样您可以使滑块轨道的长度匹配 Contact List 节点的高度。

      

   3. 在 Properties 中添加 Transform 2D > Layout Transformation 属性，并将 Rotation 属性字段设置为 90。

      通过这种方式，让滑块垂直。

      

   4. 在 Properties 中，单击 + Add Binding，并在 Binding Editor 中设置：

      • Property 到 Maximum Value

      • Expression 到

        # Get the number of items in the Contact List node.
        itemCount = {@../Contact List/ListBoxConcept.ItemCount}
        
        # Get the height of a cell that hosts a contact item in the Contact List node.
        itemHeight = {@../Contact List/GridListBoxConcept.CellHeight}
        
        # Get the height of the Contact List node.
        listBoxHeight = {@../Contact List/Node.Height}
        
        # Return the height of the invisible area of the Contact List node.
        itemCount * itemHeight - listBoxHeight
        

      您将 Slider 节点的最高值绑定到 Contact List 节点的不可见区域的高度。Slider 节点的最低值默认情况下为 0。通过这种方式，您可以设置滑块中的值范围以匹配联系人列表的长度。

      

3. 在 Node Tree 中选择 Slider 节点，在 Properties 中点击 + Add Binding，并在 Binding Editor 中设置：

   • Binding Mode 到 Two way

   • Property 到 Value

   • 将 Source 到您想要滚动的 Grid List Box 节点的 Scroll Position 属性 X 或 Y 属性字段。

     例如，将其设为：

     {@../Contact List/GridListBoxConcept.ScrollPosition}.Y
     

   您将 Slider 节点的 Value 属性绑定到 Contact List 节点的 Scroll Position 属性 Y 属性字段。这样，您就在滑块旋钮的位置和列表框的垂直滚动位置之间创建了双向连接。

   

在 Preview 中，当您移动滑块旋钮时，联系人列表会滚动，当您滚动联系人列表时，滑块旋钮会移动。

控制 Grid List Box 节点是否在使用中

要控制 Grid List Box 节点是否在使用中，请使用 Input > Enabled 属性。禁用的 Grid List Box 节点不会对用户输入作出反应。当您禁用 Grid List Box 节点时，Kanzi 会停止正在进行的手势，并保留该 Grid List Box 节点的选定项和滚动位置。

当您禁用节点的 Enabled 属性时，您实际上禁用了该节点及其在同一覆盖焦点范围内的子节点。

要观察节点是否有效启用，使用状态管理器或绑定中的 Input > Effectively Enabled 属性。例如，要向用户直观地指示节点是否正在使用，创建一个状态管理器并使用 Effectively Enabled 属性作为其控制器属性。

请参阅 控制节点对输入的反应方式。

设置 Grid List Box 2D 节点的外观

要设置 2D 节点的外观：

• 您可以使用单色、纹理或材质填充 2D 节点。请参阅 调整 2D 节点的外观。

  

• 您可以将后期处理效果应用于2D节点。请参阅 2D 节点的效果。

  

• 您可以围绕所有三个轴旋转 2D 节点，以创建 3D 透视效果。请参阅 为2D节点创建3D透视效果。

  

• 您可以应用自定义渲染到 2D 节点，以创建后处理效果。请参阅 应用自定义渲染到 2D 节点。

  

• 您可以将2D节点渲染为像素完美。请参阅 渲染像素完美的2D节点。

  

使用 API 中的 Grid List Box 3D 节点

要创建 Grid List Box 3D 节点：

// Create a Grid List Box 3D named MyListBox.
GridListBox3DSharedPtr gridListBox = GridListBox3D::create(domain, "MyListBox");

要配置网格区域：

// Make each grid cell be a 1x1x1 cube.
gridListBox->setCellWidth(1.0f);
gridListBox->setCellHeight(1.0f);
gridListBox->setDepth(1.0f);
// Make the grid contain three rows that are filled column by column.
gridListBox->setHeight(3.0f);
gridListBox->setDirection(GridListBoxConcept::GridDirectionDown);
// Make the grid contain 10 columns. Items that are dragged beyond these columns are made invisible.
gridListBox->setWidth(10.0f);
// Change the resting position when the list is scrolled to the beginning or end, so that items are not right at the grid edge.
gridListBox->setItemAreaBegin(0.2f);
gridListBox->setItemAreaEnd(0.8f);

要将项添加到列表框：

// Create cube meshes and add them as items of the list box.
// Items on the grid appear in the order you add them to the list.
Model3DSharedPtr item1 = Model3D::createCube(domain, "item1", 1.0f, ThemeRed);
Model3DSharedPtr item2 = Model3D::createCube(domain, "item2", 1.0f, ThemeGreen);
Model3DSharedPtr item3 = Model3D::createCube(domain, "item3", 1.0f, ThemeBlue);
Model3DSharedPtr item4 = Model3D::createCube(domain, "item4", 1.0f, ThemeOrange);
Model3DSharedPtr item5 = Model3D::createCube(domain, "item5", 1.0f, ThemeYellow);
gridListBox->addItem(item1);
gridListBox->addItem(item2);
gridListBox->addItem(item3);
gridListBox->addItem(item4);
gridListBox->addItem(item5);

有关详细信息，请参阅 GridListBox3D 类。

使用 API 中的 Grid List Box 2D 节点

要创建 Grid List Box 2D 节点：

// Create a Grid List Box 2D named MyListBox.
GridListBox2DSharedPtr gridListBox = GridListBox2D::create(domain, "MyListBox");

要配置网格区域：

// Make each grid cell be a 100x100 square.
gridListBox->setCellWidth(100.0f);
gridListBox->setCellHeight(100.0f);
// Make the grid contain three rows that are filled column by column.
gridListBox->setHeight(300.0f);
gridListBox->setDirection(GridListBoxConcept::GridDirectionDown);
// Make the grid contain 10 columns. Items that are dragged beyond these columns are made invisible.
gridListBox->setWidth(1000.0f);
// Change the resting position when the list is scrolled to the beginning or end, so that items are not right at the grid edge.
gridListBox->setItemAreaBegin(0.2f);
gridListBox->setItemAreaEnd(0.8f);

要将项添加到列表框：

// Create images and add them as items of the list box.
// Items on the grid appear in the order you add them to the list.
for (int i = 0; i < 5; ++i)
{
    Image2DSharedPtr item = Image2D::create(domain, "item" + to_string(i));
    item->setImage(item->acquireResource<Texture>(ResourceID("DefaultTexture")));
    // Make the images shrink to the cell size.
    item->setHorizontalAlignment(Node::HorizontalAlignmentStretch);
    item->setVerticalAlignment(Node::VerticalAlignmentStretch);
    gridListBox->addItem(item);
}

有关详细信息，请参阅 GridListBox2D 类。

Grid List Box 属性类型和消息。

有关 Grid List Box 节点的可用属性类型和消息的列表，请参阅 Grid List Box 2D 和 Grid List Box 3D。

另请参阅

教程：使用 Grid List Box 创建联系人列表。

使用 Trajectory List Box 3D 节点

使用 Grid Layout 节点

使用 List Box Item Container 预设

使用 Kanzi Studio Preview 工具为节点启用点击手势。

出厂内容资产

焦点

使用 Slider 节点