步骤 2 - 创建和修改内容

在此步骤中,您将学习如何使用 Node Tree 窗口创建内容,以及使用 Properties 窗口修改 Kanzi Studio 项目中的内容。

在 Node Tree 窗口中创建内容。

您可以在 Node Tree 窗口中创建 Kanzi 应用程序的结构。您可以在 Kanzi Studio 界面的左上角找到 Node Tree 窗口。

在 Node Tree 窗口中,Screen 包含应用程序的节点树。在设备上启动 Kanzi 应用程序时,Kanzi 会将节点树中的所有节点加载到设备内存中。

节点树由显示内容的节点(例如,Image 节点)和实现逻辑的节点(例如,Button 2D 节点)构建而成。相同的节点树支持2D和3D节点,并提供连接它们的方法。

当您在 Kanzi Studio 中处理项目时,您可以在 Preview 窗口中查看节点树的内容。

../../_images/project-screen.png

要在 Node Tree 窗口中创建内容:

  1. 在 Node Tree 窗口中,按 Alt 并右键单击 RootPage 节点并选择 Text Block 2D。

    小技巧

    当您按住 Alt 键并右键单击一个项目时,您将访问创建菜单,该菜单显示您可以在所选上下文中创建的项目类型。

    使用 Text Block 节点在应用程序中显示少量文本。

    ../../_images/project-create-text-block-node.png
  2. 命名节点并单击 OK。在您在节点树中创建节点后,您可以在 Preview 窗口中看到该节点,该窗口位于 Properties 窗口旁边。

    ../../_images/text-block-name.png ../../_images/text-block-node.png ../../_images/text-block-in-preview.png

    小技巧

    当您想要重命名一个节点时,在 Node Tree 窗口中选择它,按下 F2 键,然后输入一个新名称。

  3. 在 Node Tree 窗口中 按 Alt 并右键单击 RootPage 节点并选择 Image。

    使用 Image 节点显示位图图像。

    ../../_images/project-create-image-node.png
  4. 在 Node Tree 窗口中删除 Viewport 2D 节点。

    ../../_images/remove-viewport.png

    小技巧

    在节点树中只保留需要在应用程序的特定状态下显示的节点。这样可以确保您的应用程序不会使用超过必要的资源。

移动节点树中的节点

节点树中节点之间的关系非常重要,并定义了多个 Kanzi 核心技术的工作方式。渲染顺序、布局、属性和资源继承,以及输入和消息传播都依赖于节点树中父节点和子节点之间的关系。

例如,节点树中节点的位置定义了 Kanzi 如何渲染应用程序的内容。Kanzi 使用画家算法来渲染内容:它将节点树中的最后一个节点渲染在节点树中所有其他节点的顶部。

在上一节中,您首先在 RootPage 节点中创建了一个 Text Block 2D 节点,然后创建了一个 Image 节点。由于在节点树中 Image 节点位于 Text Block 2D 节点之后,并且两个节点都位于 RootPage 节点的左上角,因此 Image 节点覆盖了 Text Block 2D 节点。

../../_images/image-node.png ../../_images/image-on-top.png

要移动节点树中的节点:

  • 在 Node Tree 窗口中,拖动一个节点并将其放到节点树中的新位置。

  • 在 Node Tree 窗口中选择一个节点,按住 Ctrl 键,并使用 ↑ 和 ↓ 键在节点树中上下移动节点。

例如,选择 Image 节点并将其移动到 Text Block 2D 节点上方。

../../_images/image-node-on-top.png ../../_images/text-block-on-top.png

在 Properties 窗口中修改内容。

属性定义了您的 Kanzi 应用程序中内容的特征。您可以在 Properties 窗口中添加、删除和修改属性。

您可以在 Node Tree 窗口的右侧找到 Properties 窗口。

../../_images/properties-window.png

要在 Properties 窗口中修改内容:

  1. 在 Node Tree 窗口中,选择 Image 节点并按 Ctrl H 键,以在 Preview 窗口中隐藏节点。

    节点图标 image0 顶部的橙色图标表示节点被隐藏。

    ../../_images/hide-node.png

    小技巧

    当您只想在 Preview 窗口中查看您想要专注的内容时,可以隐藏一个节点。要显示隐藏的节点,请在 Node Tree 窗口中选择它,然后再次按下 Ctrl H 键。

  2. 在 Node Tree 窗口中,选择 Text Block 2D 节点。

    ../../_images/project-text-block.png
  3. 在 Properties 窗口中:

    1. 点击 Horizontal Alignment 属性旁的 add-property,将该属性添加到您在上一步选定的节点。

      使用 Horizontal Alignment 属性在水平方向上相对于其父节点对齐节点。

      ../../_images/properties-add-property.png ../../_images/properties-property-added.png
    2. Set the Horizontal Alignment property to Center. This way you place the Text Block 2D node to the center of the RootPage node, which is the parent node of the Text Block 2D node.

      小技巧

      当您需要关于属性作用的简要说明时,在 Properties 窗口中将鼠标指针移动到该属性的名称上。

      ../../_images/properties-property-set.png ../../_images/preview-text-block-horizontal-align.png
  4. 在 Properties 窗口中,添加并设置这些属性:

    • Font Size 到 30

    • Vertical Alignment 到 Center

    • Text 到 Hello Kanzi!

      使用 Text 属性设置您希望 Text Block 节点显示的文本。

    ../../_images/properties-text-block.png

当您完成此步骤时,这就是 Preview 窗口显示的内容。

../../_images/step-2.png

小技巧

点击 add-property 只能添加常用属性。

要添加任何其他属性:

  • 在 Properties 中右键单击,选择 Add Property,然后选择您要添加的属性。

    ../../_images/properties-right-click-to-add.png
  • 在 Properties 的右下角点击 add-properties-window,在搜索字段中输入属性名称,然后双击您要添加的属性。

    ../../_images/add-properties-window.gif

另请参阅

要了解如何在 Kanzi Studio 中使用属性,请参阅 在 Kanzi Studio 中使用属性。

要了解有关节点树和 Kanzi 节点的更多信息,请参阅 布置。

要了解有关预设的更多信息,请参阅 使用节点预设。

要了解有关属性的更多信息,请参阅 属性系统。