CapDriveHStack
قم بترتيب الترجمات View من اليسار إلى اليمين، بما يناسب المجموعات الأفقية من الرموز والأرقام والأرقام والوحدات، وما إلى ذلك. spacing يضبط التباعد المجاور، alignment يعين محاذاة الخط الأساسي العلوي والسفلي أو النص داخل هذا السطر.
مثال
function main() {
return (
<HStack spacing={12} alignment="center">
<Symbol name="speedometer" />
<Text fontSize={32}>78</Text>
</HStack>
);
}
الاستخدام
- alignment يضبط المحاذاة الرأسية أو خط النص داخل الصف، لا موضع الصف أفقيًا. Spacer يفصل الطرفين؛ firstTextBaseline يناسب أرقامًا ووحدات بأحجام مختلفة.
- الأبعاد الرقمية بالنقاط. auto يقيس المحتوى وfill يستخدم المساحة المخصصة من الأب. حدّد حجم الحاوية أولًا؛ fill والنص الطويل لا يوسّعان أبًا ثابتًا.
- تُطبّق x/y وtransform بعد التخطيط. تحريك عنصر لا يدفع إخوته؛ استخدم spacing أو Spacer للفواصل. الدوران والتحجيم يؤثران في الرسم كاملًا.
الخصائص
children?ViewContentمحتوى الرسم الفرعي.
spacing?numberالمسافة بين العروض الفرعية بالنقاط.
8alignment?"top" | "center" | "bottom" | "firstTextBaseline" | "lastTextBaseline"محاذاة عمودية داخل الصف: top أو center أو bottom أو خط أساس أول/آخر سطر.
"center"الخصائص المشتركة
width?number | "auto" | "fill"العرض بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.
100height?number | "auto" | "fill"الارتفاع بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.
80padding?numberالمساحة الداخلية للمحتوى بالنقاط.
0x?numberإزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.
0y?numberإزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.
0transform?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 width={260} alignment="firstTextBaseline" spacing={4}>
<Text fontSize={48}>78</Text>
<Text fontSize={14}>km/h</Text>
<Spacer minLength={12} />
<Symbol name="speedometer" fontSize={24} />
</HStack>
);
}
الحركة
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYspacingtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYعند الإغفال
الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.