风格编辑器

内置的 风格编辑器 是一种综合工具，可以通过结合 代币、设计表、风格规则 和 主题 来创建、管理和应用 Roblox 体验的用户界面风格。

通过 UI 选项卡访问风格编辑器(如果不可见，请从主页选项卡访问)。

打开后，单击 创建设计 按钮来生成基础风格集。

风格代币

风格 代币 ，通过 属性 定义的代币 StyleSheet ，代表可以在不同风格和组件中使用的 UI 属性变量；例如，可能会有一个共同的颜色为 Frame.BackgroundColor3 、 TextLabel.TextColor3 和 UIStroke.Color 。代币与 CSS 变量 相似。

1. 创建新的代币风格表：

   1. 在样式编辑器的左栏中，将鼠标悬停在 代币 上，单击 ⊕ ，然后选择 新代币样式表 。
   2. 将新表重命名为 TokenSheet 。

   

2. 选择了新的代币页，通过单击主面板中的 添加代币… 创建多个代币。这些代币将在本指南的整个过程中用于 both 规则 和 主题。

   代币名称	类型	值
   Gold	Color3	#ffcc00
   Magenta	Color3	#ff0099
   Orange	Color3	#dd6030
   Oswald	Font	Oswald
   Rad20	UDim	0, 20
   RectL	UDim2	0, 300, 0, 160
   SquareL	UDim2	0, 200, 0, 200
   Text24	数字	24
   Text32	数字	32

   

设计表格

设计风格表聚合 风格规则，可以链接到 DataModel 树，以应用风格属性到 UI 实例。只有一个 StyleSheet 可以应用于指定的树，尽管您可以使用 主题 来在整个 UI 交换相关风格，这是本指南中稍后介绍的一个概念。

一个预填充设计表单名为 样式表 的设计表单通过 创建设计 按钮创建。它包含普通 UI 对象的类规则，例如 Frame 和 TextLabel 。它还包含两个StyleDerive，它们从基础样式表中派生(继承)代币和样式，用于在自定义样式配置中使用。

一旦你有了设计图纸，你可以设置一个测试在屏幕上的容器来与风格编辑器一起使用，或者如果需要，设置一个经验内容容器。

1. 将鼠标悬停在 StarterGui 中的 探索器 上，然后插入一个 ScreenGui 。

2. 确认一个新的 StyleLink 实例出现在 ScreenGui 下，其 StyleSheet 属性设置为 样式表 设计书。

   

   

   如果 StyleLink 未创建，您可以快速创建一个，通过选择 ScreenGui 在 浏览器 以及左栏式样表设计表中的 CSS 样式表 来创建。然后，单击编辑器主面板右上角的 插入样式链接 按钮。

风格规则

风格 规则 适用于每个实例，匹配规则的 Selector 定义匹配特性，例如类名、实例标签和层次关系。在高级别上，通过规则的 Selector 定义匹配和修改实例操作通过：

• Roblox 类 选择器，可以选择给定 UI 类别的所有实例，例如 Frame , ImageLabel , TextButton 等。
• 实例 标签 选择器，可选择特定 UI 对象 标记 通过 CollectionService 。
• 实例 修改器 通过幻影 UIComponents 应用于如 UICorner 或 UIStroke 等。
• 状态 选择器，与四个枚举值之一，如 相对应。
• 根据 UI 对象的 Instance.Name 值选择实例名称。

类规则

风格 类别 选择器目标所有给定 UI 类的实例。以下规则设置风格全部Frames 使用统一的背景颜色和尺寸。

1. 在样式编辑器的左栏中，选择 框架 在 用户界面元素 分支。

   

2. 将两个以前创建的 风格代币 链接到两个 Frame 属性：

   属性	风格代币
   BackgroundColor3	$Magenta
   Size	$SquareL

   1. 单击 添加属性… 在主面板中，然后选择必要的属性。请注意，您可以输入关键字以更快地在下拉菜单中找到属性。
   2. 而不是输入静态值，点击 ⋮ 按钮，然后选择 链接代币 。
   3. 单击值字段中出现的 $ ，然后选择正确的关联代币。

   
   

   

3. 将新的 插入到你之前创建并链接的 中。你定义的样式将自动应用于它。

   

标签规则

实例 标签 选择器目标特定 UI 对象 标记 通过 CollectionService 。以下规则设置风格将标有 TextButton 标签的 ButtonPrimary 标签标记为具有自定义背景颜色、字体和文本尺寸。

1. 在样式编辑器的左栏中，将鼠标悬停在 样式表 上，单击 ⋮ 按钮，然后导航到 新标签 。

   

2. 重命名新标签规则 .ButtonPrimary (注意前面的 . )。

   

3. 将三个以前创建的 风格代币 链接到三个 TextButton 属性：

   属性	风格代币
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

   1. 单击 添加属性… 在主面板中，然后选择必要的属性。请记住，您可以输入关键字以更快地在下拉菜单中找到属性。
   2. 而不是输入静态值，点击 ⋮ 按钮，然后选择 链接代币 。
   3. 单击值字段中出现的 $ ，然后选择正确的关联代币。

   
   

   

4. 将新的 插入到你之前创建并链接的 中，并将其标记为 。一个方便的捷径如下：

   1. 确保新的 TextButton 在 浏览器 中被选择。
   2. 在样式编辑器的左栏中选择了 .ButtonPrimary 标签规则，单击主面板中的 应用标签 。你定义的样式应自动应用于按钮。

   
   

   

用户界面修改器

实例修改器选择器可以将幻影 UIComponents 例如 UICorner 或 UIStroke 应用于进一步样式化对象。以下规则设置风格设置一个 TextLabel 具有自定义文本大小和圆角的 。

1. 在样式编辑器的左栏中，选择 文本标签 在 用户界面元素 分支。

   

2. 将以前创建的 风格代币 链接到 TextSize 属性：

   1. 点击 添加属性… 在主面板中，然后选择TextSize。请记住，您可以输入关键字以更快地在下拉菜单中找到属性。
   2. 而不是输入静态值，点击 ⋮ 按钮，然后选择 链接代币 。
   3. 点击值字段中出现的 $ ，然后选择 $Text32 代币。

   
   

   

需要一个 虚拟实例 来配置并应用圆角到其他元素。要创建一个：

1. 在左栏中，将鼠标悬停在 文本标签 上，单击 ⋮ 按钮，然后导航到 新 > 假象实例 > UICorner 。

   

   一个新的 UICorner 虚拟实例出现在左栏的 TextLabel 元素下。

   

2. 在左栏选择了新的 UICorner 实例后，将以前创建的 风格代币 链接到 CornerRadius 属性：

   1. 点击 添加属性… 在主面板中，然后选择CornerRadius。
   2. 而不是输入静态值，点击 ⋮ 按钮，然后选择 链接代币 。
   3. 点击值字段中出现的 $ ，然后选择 $Rad20 代币。

   

3. 将新的 插入到你之前创建并链接的 中。你定义的样式将自动应用于它。

   

状态规则

状态 选择器匹配四个枚举值之一，例如 ,让您自动配置互动状态的样式变更。以下规则配置创建了所有 ImageButtons 的悬停状态为 -4 度旋转的旋转状态。

1. 在样式编辑器的左栏中，选择 图像按钮 在 用户界面元素 分支。

   

2. 点击 ⋮ 按钮，导航到 新 > GuiState > 悬停 。

   

   一个新的 悬停 状态修改器实例出现在左栏的 图像按钮 元素下。

   

3. 在左栏中选择新的 悬停 修改器后，单击主面板中的 添加属性… 并选择 Rotation 。请记住，您可以输入关键字以更快地在下拉菜单中找到属性。

4. 在属性值字段中输入 -4。

   

5. 插入一个新的 到你以前创建并链接的 中。当你将鼠标悬停在窗口上的按钮上时，它应该旋转 4 度顺时针。

   

风格主题

风格 主题 由可交换的特定代币集组成，例如定义“光”和“暗”主题的颜色代币。

主题创建

为了扩展性，主题被组织成文件夹。虽然单个文件夹可以满足大多数用途，但如果需要，你可以在“颜色”或“字体”等文件夹中组织主题。

1. 创建一个新主题文件夹：

   1. 在样式编辑器的左栏中，移动到 主题 ，单击 ⊕ ，然后选择 新主题 。
   2. 将新的 文件夹 项重命名为 一般 。

   

2. 创建一个新的主题风格表：

   1. 将鼠标悬停在新的 一般 文件夹上，单击 ⋮ 按钮，然后选择 新主题风格表 。
   2. 将其重命名为 主题A 。

   

主题代币

一旦主题被构建，您可以将其代币链接到各种 UI 对象属性，例如 BackgroundColor3 的 TextButton 。主题表必须使用一个共同的代币集来正确工作。

在样式编辑器的左栏中选择 主题A 时：

1. 将三个以前创建的风格代币链接到三个新主题代币：

   主题代币	风格代币
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. 单击 添加代币… 在主面板中，然后输入主题代币名称。
   2. 单击值字段中出现的 $ ，然后选择相关的风格代币。

   

2. 在样式编辑器的左栏中，选择 文本按钮 在 UI 元素 分支。

   

3. 将主题的代币链接到三个新的 TextButton 属性：

   属性	主题代币
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. 单击 添加属性… 在主面板中，然后选择必要的属性。
   2. 而不是输入静态值，点击 ⋮ 按钮，然后选择 链接代币 。
   3. 单击值字段中出现的 $ ，然后选择正确的主题代币。

   
   

   当链接主题的代币时，寻找 $[Token]在主题A 中的悬停以了解代币来自 主题 而不是来自全球代币表（请记住，主题已经得到了全球代币）。

   

主题复制

一旦您确定了主题，您可以 复制 它并将各种代币更改为定义独特主题风格。

1. 在样式编辑器的左栏中，将鼠标悬停在 ThemeA 主题上，单击 ⋮ 按钮，然后选择 重复 。

2. 将复制的主题重命名为 ThemeB 。

   

3. 将主题的两个代币链接到两个不同风格代币：

   主题代币	风格代币
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. 到属性值字段的右侧，单击 ⋮ 按钮，然后选择 解除链接代币 。
   2. 再次单击 ⋮ 并选择 链接代币 。
   3. 在其值字段中，单击 $ 并选择新的关联风格代币。

   

主题切换

一旦你有 多个主题，你可以通过主题的文件夹进行交换，或通过 SetDerives() 中描述的脚本进行交换。

1. 在风格编辑器的左栏中，选择 主题 分支中的 一般 文件夹。

2. 在主面板中，使用收音机按钮之间切换主题。

   主题A主题B