أنماط الواجهة

أنماط الواجهة هي حل من Roblox لأوراق الأنماط، مشابه لـ CSS، الذي يتيح لك إعلان وتطبيق التعديلات على خصائص مثيلات واجهة المستخدم عالميًا. يعد هذا الدعم على مستوى المحرك الأساس لـ محرر الأنماط وعملية توكين الشاملة.

المفاهيم

تطبق قواعد الأنماط (جزء من StyleSheet) على كل مثيل يتطابق مع تعريف Selector الخاص بالقاعدة لمطابقة سمات مثل اسم الفئة، اسم المثيل، وعلاقات التسلسل الهرمي. راجع توثيق Selector لمزيد من التفاصيل.

تمثل رموز الأنماط، المعرفة من خلال السمات لأوراق أنماط الرموز StyleSheet، متغيرات خصائص واجهة المستخدم التي يمكن استخدامها عبر الأنماط والمكونات، على سبيل المثال لون مشترك لـ Frame.BackgroundColor3، TextLabel.TextColor3، وUIStroke.Color. تعتبر الرموز مشابهة لـ المتغيرات في CSS.

تشمل سمات الأنماط، المعرفة من خلال السمات لورقة نمط السمة StyleSheet، مجموعات من الرموز المحددة التي يمكن تبديلها، مثل رموز الألوان التي تحدد "سمة" و"سمة داكنة". يجب أن تحتوي السمات ذات الصلة على نفس مجموعة الرموز للعمل بشكل صحيح.

تسمح لك استعلامات الأنماط بتطبيق الأنماط بشكل شرطي بناءً على سياق واجهة المستخدم أو بيئتها. تعتبر هذه مقارنة لـ الاستعلامات الخاصة بالوعاء واستعلامات الوسائط، مما يمكّن واجهة المستخدم من التكيف مع حجم الشاشة، أنواع الإدخال، أو إعدادات وصول المستخدم.

انتقال القواعد

يرتبط مثيل StyleLink ورقة نمط StyleSheet وقواعدها المرتبطة بـ ScreenGui الأب وجميع GuiObjects الموجودة فيها. يمكن أن تطبق ورقة نمط واحدة فقط على شجرة معينة.

تعريفات التحديد

على مستوى عالٍ، يعمل مطابقة المثيل والتعديل عبر تعريف Selector للقاعدة من خلال:

• محددات فئة Roblox التي تستهدف جميع مثيلات فئة GuiObject معينة، مثل Frame، ImageLabel، TextButton، إلخ.
• علامات المثيل المطبقة على كائنات واجهة المستخدم المحددة من خلال CollectionService.
• اختيار اسم المثيل وفقًا لقيمة Instance.Name لكائن واجهة المستخدم.
• معدلات المثيل، مشابهة لـ العناصر الزائفة في CSS، المطبقة من خلال UIComponents مثل UICorner أو UIStroke.
• حالة محددات GuiObject، مشابهة لـ محددات الفئة الزائفة في CSS، والتي تتطابق مع واحدة من القيم الأربعة من GuiState مثل Hover.
• محددات استعلام Roblox، مشابهة لـ استعلامات الحاوية ووسائط CSS، والتي تستخدم اللاحقة @ لتطبيق الأنماط فقط أثناء وجود مثيل StyleQuery أو مثيل زائف بنفس الاسم نشط.

يظهر الإعداد التالي كيف أن رموز الحجم واللون، سمة، ومحدد الفئة "Frame" تنتج Frame باللون الأرجواني بحجم 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"))

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

الخصائص المعدلة

تكون خصائص المثيل المتأثرة بالأنماط معلمة بـ ⚠ في نافذة الخصائص، والتأشير على خاصية متأثرة يظهر أي نمط يؤثر عليها. على سبيل المثال، إذا أخبر أسلوب قاعدة "إطار" مصنّف بتعيين AnchorPoint لـ 0.5, 0.5، فسوف تظهر خاصية الكائن تلك القيمة الافتراضية لـ 0, 0 لكن AnchorPoint الفعلي الخاص بها سيستخدم القيمة المنمقة للقاعدة.

عندما يتم تعديل قيمة خاصية افتراضية أو ذات طابع أكثر لمثيل واجهة مستخدم معين، فإنها تصبح بالخط العريض للإشارة إلى قيمة مفرطة. على سبيل المثال — بافتراض قيمة افتراضية لـ AnchorPoint بقيمة 0, 0 — فإن تعيين تلك الخاصية إلى 1, 1 لمثيل معين يكشف عن تجاوز بخط عريض:

بالنسبة لأي قيمة خاصية معاد تعريفها، يمكنك النقر بزر الفأرة الأيمن عليها في نافذة الخصائص واختيار إعادة تعيين إلى الافتراضي لإعادتها إلى القيمة المنمقة، أو إلى القيمة الافتراضية للخاصية إذا لم يتم تنسيقها.