CapDriveGroup
قم بدمج عدة View في الكل، مع تطبيق الشفافية أو التدوير أو المؤثرات الخاصة الأخرى بشكل موحد. يتبع الطفل View قواعد ترتيب الحاوية الخارجية، ويتم تطبيق التأثيرات الخاصة على مجموعة النتائج المركبة بأكملها.
مثال
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
الاستخدام
- لا ينشئ Group ترتيبًا؛ يشارك أبناؤه في التخطيط الخارجي. يركّب المجموعة قبل الشفافية والتأثيرات، فتختلف مناطق التداخل عن opacity الفردية. استخدم Stack خارجيًا للأبعاد والحشو.
- استخدم معرفات بيانات ثابتة في key للحفاظ على هوية View أثناء التحديث والحركة. فهرس المصفوفة لا يصلح هوية دائمة عند إعادة الترتيب.
- تُطبّق x/y وtransform بعد التخطيط. تحريك عنصر لا يدفع إخوته؛ استخدم spacing أو Spacer للفواصل. الدوران والتحجيم يؤثران في الرسم كاملًا.
الخصائص
children?ViewContentمحتوى الرسم الفرعي.
الخصائص المشتركة
transform?ViewTransformتحويل View كله دون تغيير التخطيط. الإزاحة بالنقاط، الدوران والميل بالدرجات، المقياس 1 بلا تغيير، والمرساة 0–1.
{rotation: 0}background?Paintلون أو تدرج للخلفية؛ clear يجعلها شفافة.
"clear"opacity?numberعتامة View بالكامل: 0 شفاف و1 معتم.
1cornerRadius?numberنصف قطر الزوايا بالنقاط.
0clipped?booleanقص الرسم الذي يتجاوز حدود View.
falseclip?"rectangle" | "ellipse"شكل القص rectangle أو ellipse؛ يقبل Material أيضاً false لتعطيله.
"rectangle"mask?View | nullعرض قناع ألفا. يتم توسيطه دون التأثير على التخطيط؛ تعطل null القناع.
<Circle width="fill" height="fill" background="white"/>zIndex?numberترتيب الرسم بين العناصر الشقيقة؛ القيم الأكبر في الأمام.
0blur?numberنصف قطر التمويه بالنقاط؛ 0 يعطّله.
4innerShadow?DrawingEffectلون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectلون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?Colorلون الظل الخارجي.
HDR("black")shadowOpacity?numberعتامة الظل من 0 إلى 1؛ 0 يخفيه.
0shadowRadius?numberنصف قطر تمويه الظل الخارجي بالنقاط.
4shadowX?numberإزاحة الظل بالنقاط: x يميناً وy لأسفل.
0shadowY?numberإزاحة الظل بالنقاط: x يميناً وy لأسفل.
2animations?Animation[]تحريك تغير الخاصية. duration/delay بالثواني، from/to للنهايات، repeat/autoreverse للتكرار وwrap للدورة.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberمعرّف ثابت بين العناصر الشقيقة.
""مثال عملي
function main() {
return (
<HStack spacing={12}>
<Group opacity={0.6} transform={{ rotation: 10 }}>
<Text fontSize={40}>78</Text>
<Symbol name="speedometer" fontSize={28} />
</Group>
<Text>km/h</Text>
</HStack>
);
}
الحركة
opacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYعند الإغفال
الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.