列表框节点 (List Box nodes)

使用 List Box 节点在可滚动列表中排列项目。例如,使用 List Box 节点创建联系人列表、媒体播放器中的专辑列表或汽车设置列表。虽然布局控制节点将其项目排列在静态布局中,但 List Box 节点将其项目排列在一个列表中,用户一次只能看到一定数量的项目。要访问更多项目,用户需要滚动列表框。请参阅 布局控制节点。

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

了解网格列表框节点 (Grid List Box nodes) >

../../_images/grid-list-box.gif

使用 Trajectory List Box 3D 节点可在 3D 空间中创建沿轨迹排列的项的可滚动列表。

了解 3D 轨迹列表框 (Trajectory List Box 3D) 节点 >

../../_images/trajectory-list-box-3d.gif

使用 List Box Item Container 预设更改列表框中当前选定项的外观。

了解列表框项容器 (List Box Item Container) 预设件 >

../../_images/list-box-item-container.gif

设置可见区域的大小

要设置 List Box 节点中项的可见区域的大小,使用以下属性:

  • Layout Height 用于设置 Grid List Box 或 Trajectory List Box 3D 节点的可见区域的高度。

  • Layout Width 用于设置 Grid List Box 或 Trajectory List Box 3D 节点可见区域的宽度。

  • Layout Depth 用于设置 Trajectory List Box 3D 节点可见区域的深度。

选择一个项并定义其选择行为

您可以设置选中 List Box 节点中的哪个项,以及用户选中项时项如何反应。例如,您可以将选中的项移到列表框可见区域的中心。

  • 要设置列表框中哪个项目被选中,使用 Selected Item Index 属性。索引从 0 开始。

    要使用绑定更新 Selected Item Index 属性的值,请使用到源或双向绑定。Kanzi 在内部会覆盖任何针对 Selected Item Index 属性的单向绑定。请参阅 绑定 (Bindings)。

    例如,您可以通过单击该项目或使用滑块来使用户能够在 List Box 节点中选择一个项目。请参阅 创建双向绑定。

  • 要设置列表框,使用户选择某个项目时将其移至列表框区域的中心,请使用 Selection Behavior 属性。请参阅 将选定的项放到 Grid List Box 中心 和 使用 Trajectory List Box 3D 节点。

访问项目的数量和位置

要获取 List Box 节点中项目的数量和位置,请使用这些只读属性:

  • List Box > Item Count 以获取列表框中的项目数量,包括虚拟项目。

    例如,使用 Item Count 属性设置用户可以使用的 Slider 的最大值,以:

  • List Box Item Container > Item Index 以获取列表框中项目的位置。索引从 0 开始。

    例如,使用 Item Index 属性在绑定中设置列表框项的外观,基于其与所选项的距离。使用 List Box > Selected Item Index 属性获取所选项的索引。您可以使用此方法来减小距离所选项较远的项的大小和不透明度。

为 List Box 节点定义项目

您可以定义列表框项的内容来源以及如何呈现这些内容。例如,您可以使用设置每个项目外观的项目模板,并从数据源获取项目的数据。请参阅 使用数据源。

  • 要设置为 List Box 节点中的项目提供数据的数据对象,请使用 Items Source 属性。请参阅 使用列表数据对象。

  • 要设置您希望 List Box 节点为其列表中的项目使用哪个预设模板,请使用 Item Template 属性。请参阅 使用列表数据对象。

  • 要在列表框中的项目之间共享功能,使用 Item Container Template 属性。当您设置 Item Container Template 属性时,列表框中的每个项目都会从 List Box Item Container 预设继承功能。例如,Item Container Template 可以包含一个状态管理器,该管理器会更改列表框中所选项目的缩放比例。这样,您无需为每个项目设置功能。请参阅 使用 List Box Item Container 预设。

  • 要设置您想要一次加载多少个项到工作内存,使用 Keep Alive Item Count 属性。

    在 Keep Alive Item Count 属性中设置的值越小,释放用于其他任务的工作内存就越多。如果快速滚动列表框,这可能会导致项目在列表框中出现延迟。

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

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

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

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

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

在 List Box 节点中处理键焦点。

您在 Kanzi Studio 中创建的 List Box 节点默认情况下将 Focus Scope Type 属性设置为 Group。这意味着 List Box 节点默认情况下是焦点范围,并处理键焦点和键输入。请参阅 焦点。

../../_images/focus-scope-enabled.png

您可以导航每个列表项中的可聚焦列表项和可聚焦节点:

  • 在前进方向上按下 Tab 键。

  • 在向后方向上,通过按下 BackTab 键或 Shift Tab 键。

当您在列表项中的任何节点中启用 Focus > Focusable 属性时,您使这些节点可以聚焦并使其能够接收键输入。

这些节点启用了 Focusable 属性,并且默认情况下可以接收焦点:

  • 您使用 Kanzi Engine API 或 Kanzi Studio 创建的 Button、Toggle Button、Slider 和 Text Box 节点。

  • 使用 Kanzi Studio 创建的 Scroll View 节点。

../../_images/focusable-enabled.png

默认情况下,Kanzi 会同步 List Box 节点中的项目选择和键焦点,以便:

  • 如果应用程序的关键焦点在 List Box 节点中,并且该 List Box 中的一个可聚焦项目被选中,则该项目将获得关键焦点。

    请注意,虚拟化列表项无法获得焦点。

    小技巧

    要将键焦点从应用程序中的任何位置移动到用户按下的节点,可以使用 Focus > Focus On Press 属性。请参阅 将焦点设置到用户按下的节点上。。

  • 当键焦点移动到列表项时,Kanzi 将该列表项设置为选中。

例如,该视频演示了一个示例 Grid List Box 2D 节点,该节点显示了一系列安全控制设置。每个列表项包含一个 Toggle Button 节点和一个 Button 节点,显示信息图标。灰色轮廓可视化具有键焦点的节点。要了解如何更改用户界面元素在获得焦点时的外观,请参阅 表明用户界面元素何时具有焦点。

当用户浏览列表时:

  • 当应用程序的关键焦点在 List Box 节点中,并且用户按下 Tab 键时,Kanzi 会将焦点移动到列表项中的可聚焦节点。 从列表项中的最后一个可聚焦节点,焦点移动到下一个列表项,Kanzi 将其设置为选中。

    如果 List Box 节点的 Selection Behavior 属性设置为 Bring Center,Kanzi 会将选定的项目带到列表框区域的中心。

  • 当用户单击列表项以选择它时,Kanzi 将键焦点设置为该项中第一个可聚焦的节点,用户可以通过键输入与该节点交互。

    例如,用户可以按下 Enter 键来切换 Toggle Button 或按下 Button。

../../_images/preview-sync-selection-focus.gif

列表框触发器

使用 List Box 触发器在用户与 List Box 节点交互时做出反应。例如,您可以在用户滚动该节点时设置 List Box 节点的外观。请参阅 当用户与 Grid List Box 节点交互时做出反应。 和 当用户与 Trajectory List Box 3D 节点交互时做出反应。。

另请参阅

使用 Grid List Box 节点

使用 Trajectory List Box 3D 节点

使用 List Box Item Container 预设

焦点

绑定 (Bindings)