为您的应用程序设置主题

主题可让一个 Kanzi Studio 项目用于多个产品变体。

例如：在一个项目中，您可以为不同的汽车模型定义 Kanzi 应用程序，并为每个汽车模型定义不同的视觉主题。

为应用程序创建主题涉及不同资源的创建和使用，例如您要在应用程序中使用的主题文本、纹理、笔刷、材质和样式、布局等。

Theme Group 定义了一组 Themes。每个 Theme 在 Theme Group 中定义了应用程序的外观和感觉。在您的 Kanzi Studio 项目中，您可以定义多个 Theme Group，其中每个包含多个 Themes。在您的 Kanzi 应用程序中，您可以一次应用每个 Theme Group 中的一个 Theme。例如，您可以使用一个 Theme Group 来定义汽车模型，如掀背车、小型货车、皮卡、轿车和 SUV，另一个 Theme Group 来定义每种汽车模型的界面外观，如经典、数字、现代和运动。

Kanzi 间接使用主题资源，使用资源 ID 为每个 Theme 保存一个单独的值。在 Library > Themes 中，您可以看到 Kanzi Studio 项目中的所有 Theme Group 项目。

../../_images/export-example-library-color.png

要为您的应用程序创建主题：

  1. 创建一个 Theme Group，并将您项目中要用 Theme 定义的资源添加到其中。请参阅 将工程中使用的资源添加到 Theme Group。

  2. 创建并导入每个 Theme 使用的资源。请参阅 为 Theme 设置资源。

  3. 在 Preview 中查看 Theme。请参阅 在 Preview 中查看主题。

  4. 将 Theme 使用的资源导出到 kzb 文件。请参阅 导出 Themes。

通过完成教程，了解如何为您的 Kanzi 应用程序设置主题。请参阅 教程：为您的应用程序设置主题。

将工程中使用的资源添加到 Theme Group

通过将您想要主题化的资源添加到 Theme Group，开始为您的 Kanzi 应用程序创建主题。将资源添加到 Theme Group 的最简单方法是在 Node Tree 中的节点上使用 Add Resources to a Theme Group 命令。

使用 Add Resources to a Theme Group 命令在 Node Tree 中，Kanzi Studio 会自动为节点中的每个资源及其树中的节点创建一个资源 ID，并将每个节点设置为使用这些资源 ID。

要将工程中使用的资源添加到 Theme Group：

  1. 在 Node Tree 中，右键单击 Screen 节点，并在上下文菜单中选择 Add Resources to a Theme Group。

    使用 Add Resources to a Theme Group 命令在 Screen 节点上，Kanzi Studio 使您能够将项目中的所有资源添加到 Theme Group 中，并更改它们在每个 Theme 中的外观。要仅从选定的节点或预设及其树中添加到 Theme Group 资源，请右键单击该节点或预设并选择 Add Resources to a Theme Group。

    ../../_images/add-resource-to-theme-group.png

  2. 在 Add Resources to a Theme Group 窗口中设置：

    1. Theme Group 到您要添加资源的 Theme Group。如果您还没有 Theme Group，请选择 <Create New>。

      Theme Group 定义了一组 Themes。

    2. 选择要在 Add Resources to a Theme Group 窗口中显示的资源类型。

      例如，要只显示文本和图像资源，请选择 image0 和 image1。

      ../../_images/show-resource-types.png

    3. 在列出选定类型所有资源的表格中，点击要添加到您所选 Theme Group 的资源旁边的复选框。要更改资源 ID，请双击资源 ID 并输入新名称。

      Kanzi Studio 为使用相同 Text 属性值的 Text Block 节点创建一个资源 ID。这些节点在 Theme Group 中共享同一个条目。

    4. 单击 Add。

      Kanzi Studio 从所有资源创建资源 ID，并将它们添加到您选择的 Theme Group 中。您可以在 Library > Themes 中找到 Theme Group 项。在 Theme Group 中，您现在可以创建 Themes，并设置要为哪个 Theme 使用哪个资源。请参阅 为 Theme 设置资源。

      ../../_images/library-themes.png

为 Theme 设置资源

将您的工程中使用的资源添加到 Theme Group 后，您可以创建一个 Theme 并定义每个 Theme 使用的资源。

要为 Theme 设置资源：

  1. 为每个 Theme 创建并导入您要使用的资源。例如：

    • 在 Library 中创建资源，例如画笔、样式和材料，这些资源为应用程序中的每个主题设置外观。

    • 在 Prefabs 中创建布局，以便为应用程序中的每个主题排列 UI 元素。

    • 在 Assets 中导入您想在 Theme 中使用的 2D 和 3D 资源。

  2. 在 Library > Themes 中双击您要定义 Theme 的 Theme Group。

  3. 在 Theme Editor 中，单击 Create Theme 并命名为 Theme。

    ../../_images/create-theme.png

  4. 在上一步中创建的主题栏中，双击各资源单元格，为该行资源 ID 设置要使用的资源。

    • 如果您没有为 Theme 选择资源或值，Kanzi 将使用该 Theme 的默认资源或值。默认值列在 Default Value 列中。

      黑色单元格标记使用默认值的条目。

    • 要为文本资源使用空字符串，输入值，删除值，然后按下 Enter 键。

      灰色单元格标记使用空字符串的条目。

    • 要使用文件系统的资源，在要设置资源的单元格中选择 < URL >，并输入 file://，后跟文件系统中资源的绝对或相对路径。

    ../../_images/theme-editor-set-resource.png

在 Theme 中为资源使用 kzb 文件 URL。

将您的工程中使用的资源添加到一个 Theme Group 之后，您可以使用一个 kzb 文件 URL 指向另一个 Kanzi Studio 工程中的资源。

要在 Theme 中为资源使用 kzb 文件 URL：

  1. 在 Library > Themes 中双击您要定义 Theme 的 Theme Group。

  2. 在 Theme Editor 中，单击 Create Theme 并命名为 Theme。

    ../../_images/create-theme.png

  3. 在上一步中创建的 Theme 栏中，双击要为其使用 kzb 文件 URL 的资源单元格，并在下拉菜单中选择 < URL >。

    ../../_images/select-url-in-theme-editor.png

  4. 在单元格中，输入要使用的资源的 kzb 文件 URL。

    例如，要使用来自另一个 Kanzi Studio 项目的字体，请输入指向该字体的 kzb 文件 URL。

    ../../_images/set-kzb-url-in-theme-editor.png

在 Preview 中查看主题

当您为应用程序定义 Theme 时，可以设置 Preview 来显示 Theme，而无需为应用程序添加切换 Themes 的控件。

要在 Preview 中查看 Theme：

  • 在 Dictionaries 中，单击 Locales and Themes 以启用查看 Localization Table 和 Theme Group 项目，并且对于每个 Theme Group，在 Preview 中选择您想要查看的 Theme。

    ../../_images/activate-theme-dictionaries.png

  • 在 Library 中选择包含您要查看的 Theme 的 Theme Group，并在 Properties 中将 Selected Theme 属性设置为该 Theme。

    ../../_images/export-example-library-color.png ../../_images/properties-startup-theme.png

另请参阅

教程：为您的应用程序设置主题

导出 Themes

使用 Themes