如何使用SDK配置应用程序UI

SDK包含一个UI生成器，可使用它配置应用程序UI的视觉效果。

您可以编辑影响UI元素视觉效果（颜色、纹理及字体）的全局设置来更改UI。这些属性的组合叫做主题。

要替换同一类型的UI元素，可使用小组件包装，即创建的UI元素的容器。

UI生成器包含2个独立部分：

• 负责操作视觉效果的主题。
• 负责操作预制件及完整替换UI元素的小组件管理器。

使用主题

主题是一个XsollaUtilsTheme类型的资源。它包含用于UI元素的颜色、字体和纹理列表。每个列表是一组键值对，其中键是主题参数的唯一名称，值是相应的颜色、字体或纹理。

您可以在Settings > Project Settings > Plugins > Xsolla UIBuilder中对主题进行操作：

• 要设置UI的主题，请在Interface Theme字段中选择主题。
• 要编辑所选主题，请单击Interface Theme字段旁边的🔎按钮。

• 要创建新主题，请单击Interface Theme字段旁边的+图标。
• 要删除选择的主题，请单击Interface Theme字段旁边的×图标。

将UI元素与主题关联

要将UI元素与主题关联：

1. 在UI元素小组件蓝图中，通过以下方法访问主题：
   • GetCurrentTheme — 返回在插件设置中指定的当前主题。
   • GetTheme — 按照在ThemeClass参数中指定的名称返回主题。
2. 使用以下方法通过传入主题参数名称获取相应参数的值：
   • GetColor — 获取颜色值。
   • GetFont — 获取字体。
   • GetBrush — 获取纹理。

在演示项目中，每个支持主题的小组件有一组包含主题参数名称，类型为String的参数。这些参数用于为UI元素设置视觉效果。

要查找支持主题的小组件示例，请前往Content Browser > Xsolla Content > Common > Components > Primitives。

使用小组件管理器

小组件管理器是一个机制，可以让您通过更改UI元素的视觉效果和行为将其替换为同一类型的UI元素。

要创建支持小组件管理器的UI，需满足以下条件：

• 使用指定统一接口为UI元素创建小组件。
• 在小组件库中定义UI元素小组件的类型名称。
• 将UI元素的小组件类型传入包装。包装是用于创建UI元素的容器。小组件类型的名称应与库中的名称相同。
• 创建UI时，请使用包装而不要使用小组件。

小组件包装

包装是一个在包装所在页的区域中创建所需小组件的容器。

创建UI时使用小组件包装可让您自动在整个UI中更改UI元素，只需更改包装中的小组件即可。而使用UI基元的标准流程在此情况中只能手动替换所有小组件。

以下是用于不同小组件类型的包装：

• W_ButtonWrapper — 用于按钮
• W_InputWrapper — 用于输入字段
• W_TextWrapper — 用于文本
• W_RichTextWrapper — 用于富文本
• W_ImageWrapper — 用于图片
• W_CheckBoxWrapper — 用于复选框

在Details面板中，可配置包装创建的小组件的显示参数。在Widget Library Name字段中，应指定小组件类型在当前小组件库中的名称。

可在Content Browser > Xsolla Content > Common > Components > Wrappers中找到小组件包装蓝图。

包装使用小组件管理器方法与小组件交互。

小组件接口

为使UI基元以同普通小组件交互的方式与小组件包装交互，包装使用统一接口。

以下是用于不同小组件类型的包装：

• BPI_PrimitivesButton — 用于按钮
• BPI_PrimitivesInput — 用于输入字段
• BPI_PrimitivesText — 用于文本
• BPI_PrimitivesRichText — 用于富文本
• BPI_PrimitivesImage — 用于图片
• BPI_PrimitivesCheckbox — 用于复选框

可在Details面板的Implemented Interfaces部分配置UI元素小组件的接口。

可在Content Browser > Xsolla Content > Common > Components > Interface中找到小组件接口。

小组件库

小组件库是XsollaUtilsWidgetsLibrary类型的资源，包含一组键值对形式的小组件类。键包含小组件类型的名称，值包含由该键的相应包装创建的小组件类。

小组件库相当于包装和小组件类之间的接口。

BP_DefaultWidgetLibrary默认小组件库包含在SDK中。该库包含演示项目中的一组UI元素。

您可以在Settings > Project Settings > Plugins > Xsolla UIBuilder中对小组件库进行操作：

• 要安装当前小组件库，请在Widgets Library字段中选择该库。
• 要编辑所选小组件库，请单击Widgets Library字段旁边的🔎按钮。

• 要创建新小组件库，请单击Widgets Library字段旁边的+图标。
• 要删除选择的小组件库，请单击Widgets Library字段旁边的×图标。

请使用包装蓝图中的以下方法访问小组件库：

• GetCurrentWidgetsLibrary — 返回插件设置中指定的当前小组件库。
• GetWidgetsLibrary — 按照 WidgetLibraryClass参数中指定的名称返回指定的小组件库。

请使用包装蓝图中的GetWidget方法获取库中的小组件类型。

小组件管理器的方法

包装使用以下方法与小组件交互。创建自己的包装和支持主题的小组件时可使用这些方法。

操作按钮的方法

操作复选框的方法

操作文本或富文本的方法

操作图片的方法

操作输入字段的方法