用户界面风格

*此内容使用人工智能（Beta）翻译，可能包含错误。若要查看英文页面，请点按 此处。

用户界面风格是 Roblox 对样式表的解决方案，与 CSS 类似，可让您宣言并全球应用到 UI 实例属性的替换。这种引擎级支持是 风格编辑器 和端到端代币管道的基础。

概念

风格 规则 （属于 StyleSheet ）适用于每个匹配规则定义的 Selector 匹配特征，例如类名、实例名和层次关系。请参阅Selector了解详细信息。

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

风格 主题 ，通过主题 属性 配置，由可交换的特定代币集组成，例如定义“轻”和“暗”主题的颜色代币。相关主题必须具有相同的代币集才能正常工作。

规则传播

一个 StyleLink 实例链接一个 StyleSheet 和其相关的规则到一个父 ScreenGui 和其内部所有的 GuiObjects 。只有一个 StyleSheet 可以应用于指定的树。

选择器定义

在高级别上，通过规则的 Selector 定义匹配和修改实例操作通过：

以下设置显示了如何使用大小和颜色代币、主题和类选择器 生成 200×200 像素的靛蓝色。

用户界面类别选择器
local CollectionService = game:GetService("CollectionService")

local ReplicatedStorage = game:GetService("ReplicatedStorage")



local screenGui = script.Parent



-- 代币

local tokens = Instance.new("StyleSheet")

tokens.Name = "Tokens"

tokens.Parent = ReplicatedStorage

tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))

tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))

tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))

tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))

tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))

tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))

tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))



-- 主题A

local themeA = Instance.new("StyleSheet")

themeA.Name = "ThemeA"

themeA.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- 派生全球代币

tokensDerive.Parent = themeA

themeA:SetAttribute("FrameSize", "$SquareM")

themeA:SetAttribute("FrameColor", "$Aqua")



-- 主题B

local themeB = Instance.new("StyleSheet")

themeB.Name = "ThemeB"

themeB.Parent = ReplicatedStorage

local tokensDerive = Instance.new("StyleDerive")

tokensDerive.StyleSheet = tokens  -- 派生全球代币

tokensDerive.Parent = themeB

themeB:SetAttribute("FrameSize", "$SquareL")

themeB:SetAttribute("FrameColor", "$Magenta")



-- 设计表

local designSheet = Instance.new("StyleSheet")

designSheet.Name = "DesignSheet"

designSheet.Parent = ReplicatedStorage

local themeDerive = Instance.new("StyleDerive")

themeDerive.StyleSheet = themeB  -- 从 ThemeB 派生

themeDerive.Parent = designSheet



-- 将链接设计表单连接到屏幕用户界面

local styleLink = Instance.new("StyleLink")

styleLink.StyleSheet = designSheet

styleLink.Parent = screenGui



-- 配置规则

local rule = Instance.new("StyleRule")

rule.Selector = "Frame"  -- 类别选择器

rule.Parent = designSheet



-- 设置规则属性

rule:SetProperties({

	["BackgroundColor3"] = "$FrameColor",

	["Size"] = "$FrameSize",

	["BorderSizePixel"] = 0

})



local frame = Instance.new("Frame")

frame.Parent = screenGui

修改了属性

受到样式影响的实例属性会在 ⚠ 窗口中标记，将鼠标悬停在受影响的属性上可显示哪种风格对其产生影响。例如，如果一种风格规则告诉标记为 的对象使用 的 ，该对象属性将显示 默认值 的 值，但其实际值将使用规则的 样式值 。

当默认或样式属性值进一步修改为特定的 UI 对象时，它将变得 粗体 以指示已覆盖的值。例如——假设默认值为 AnchorPoint 的 0, 0  —将该属性设置为 1, 1 对特定实例显示了重写：

对于任何覆盖的属性值，您可以在 属性窗口 中右键单击它，然后选择 重置为默认值 将其恢复为样式化的值，或如果未被样式化，则为默认属性值。