UI 樣式 | 文件 - Roblox 創作者中心

UI 樣式是 Roblox 提供的樣式表解決方案，類似於 CSS，它讓您宣告並全球應用 UI 實例屬性的覆蓋。這種引擎級的支持是樣式編輯器和端到端代幣管道的基礎。

概念

樣式規則（StyleSheet 的一部分）適用於符合規則的 Selector 定義的每個實例，以匹配類名、實例名和層次結構關係等特徵。詳情請參閱 Selector 文檔。

樣式代幣，通過屬性定義於代幣 StyleSheet 中，代表可以在樣式和組件中使用的 UI 屬性變量，例如 Frame.BackgroundColor3、TextLabel.TextColor3 和 UIStroke.Color 的共同顏色。代幣與 CSS 變量類似。

樣式主題，通過主題 StyleSheet 的屬性配置，由一組特定代幣組成，可以互相替換，例如定義「淺色」和「深色」主題的顏色代幣。相關主題必須擁有相同的代幣集才能正常工作。

樣式查詢允許您根據 UI 的上下文或環境有條件地應用樣式。這些類似於 CSS 容器查詢和媒體查詢，使 UI 能夠根據螢幕大小、輸入類型或用戶輔助設置進行調整。

規則傳播

StyleLink 實例將 StyleSheet 及其相關規則鏈接到父 ScreenGui 和其中的所有 GuiObjects。每棵樹只允許應用一個 StyleSheet。

選擇器定義

在高層次上，通過規則的 Selector 定義進行的實例匹配和修改操作如下：

Roblox 類別選擇器，目標為給定 GuiObject 類的所有實例，例如 Frame、ImageLabel、TextButton 等。
通過 CollectionService 應用於特定 UI 物件的實例標籤。
根據 UI 物件的 Instance.Name 值進行的實例名稱選擇。
實例修飾符，類似於 CSS 偽元素，通過虛擬的 UIComponents 應用，例如 UICorner 或 UIStroke。
GuiObject 狀態選擇器，類似於 CSS 偽類選擇器，對應於四個 GuiState 枚舉值中的一個，例如 Hover。
Roblox 查詢選擇器，類似於 CSS 容器和媒體查詢，使用 @ 前綴僅在相同名稱的 StyleQuery 實例或伪實例活動時應用樣式。

以下設置展示了如何使用大小和顏色代幣、一個主題和類別選擇器 "Frame" 生成一個 200×200 像素的洋紅色 Frame。

代碼等效

UI 類別選擇器

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"))

-- ThemeA
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")

-- ThemeB
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")

-- DesignSheet
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "DesignSheet"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- 繼承自 ThemeB
themeDerive.Parent = designSheet

-- 將 DesignSheet 鏈接到 ScreenGui
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

修改過的屬性

受到樣式影響的實例屬性在屬性窗口中會用 ⚠ 標記，將鼠標懸停在受影響的屬性上會顯示影響它的樣式。例如，如果樣式規則告訴標記的 Frame 使用 AnchorPoint 值為 0.5, 0.5，則該物件屬性將顯示默認值 0, 0，但其實際的 AnchorPoint 將使用規則的樣式化值。

當默認或樣式化的屬性值進一步為特定 UI 物件修改時，將用粗體來標示被覆蓋的值。例如 — 假設 AnchorPoint 的默認值為 0, 0 — 為特定實例將該屬性設置為 1, 1 會揭示一個粗體的覆蓋：

對於任何被覆蓋的屬性值，您可以在屬性窗口中右鍵單擊它，然後選擇重設到默認以將其恢復為樣式值，或將其恢復為默認屬性值（如果尚未被樣式化）。