CapDrive
دليل الاستخدام

Image

يعرض صورة من مصدر مقياس، مثل شعار، أو خلفية مزخرفة، أو نسيج متجانب. source استخدم اسم المورد لتعيين أسلوب القياس أو الاقتصاص أو التكرار للأحجام المتوفرة.

مثال

function main() {
  return (
    <Image
      source="badge.png"
      contentMode="fit"
      repeatMode="none"
      width={80}
      height={80}
    />
  );
}

الاستخدام

  • source اسم صورة داخل الحزمة. original يحفظ الألوان وtemplate يستخدم color. repeatMode يكرر الصورة لا الأبناء، وcontentMode للتحجيم العادي.
  • الأبعاد الرقمية بالنقاط. auto يقيس المحتوى وfill يستخدم المساحة المخصصة من الأب. حدّد حجم الحاوية أولًا؛ fill والنص الطويل لا يوسّعان أبًا ثابتًا.

الخصائص

sourcestring

اسم ملف صورة ضمن موارد العداد، وليس اسم SF Symbols.

مثال""
contentMode?"fit" | "fill" | "stretch"

fit يعرض الصورة كاملة، fill يملأ ويقص، stretch يغيّر النسبة.

مثال"fit"
repeatMode?"none" | "repeat" | "repeatX" | "repeatY"

تكرار بالحجم الأصلي: repeat للمحورين، repeatX/repeatY لمحور واحد، none دون تكرار.

مثال"none"
renderingMode?"original" | "template"

original يحفظ الألوان؛ template يلوّن بخاصية color.

مثال"original"
color?Paint

لون الرسم، بما في ذلك ألوان HDR.

مثالHDR($env.foreground)
contentAnimation?ContentAnimation

انتقال عند تغير المحتوى. اختر type المدعوم؛ duration/delay بالثواني.

مثال{type: "fade", duration: 0.25}
الخصائص المشتركة
width?number | "auto" | "fill"

العرض بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال100
height?number | "auto" | "fill"

الارتفاع بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال80
padding?number

المساحة الداخلية للمحتوى بالنقاط.

مثال0
x?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
y?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
transform?ViewTransform

تحويل View كله دون تغيير التخطيط. الإزاحة بالنقاط، الدوران والميل بالدرجات، المقياس 1 بلا تغيير، والمرساة 0–1.

مثال{rotation: 0}
background?Paint

لون أو تدرج للخلفية؛ clear يجعلها شفافة.

مثال"clear"
opacity?number

عتامة View بالكامل: 0 شفاف و1 معتم.

مثال1
cornerRadius?number

نصف قطر الزوايا بالنقاط.

مثال0
clipped?boolean

قص الرسم الذي يتجاوز حدود View.

مثالfalse
clip?"rectangle" | "ellipse"

شكل القص rectangle أو ellipse؛ يقبل Material أيضاً false لتعطيله.

مثال"rectangle"
mask?View | null

عرض قناع ألفا. يتم توسيطه دون التأثير على التخطيط؛ تعطل null القناع.

مثال<Circle width="fill" height="fill" background="white"/>
zIndex?number

ترتيب الرسم بين العناصر الشقيقة؛ القيم الأكبر في الأمام.

مثال0
blur?number

نصف قطر التمويه بالنقاط؛ 0 يعطّله.

مثال4
innerShadow?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 يخفيه.

مثال0
shadowRadius?number

نصف قطر تمويه الظل الخارجي بالنقاط.

مثال4
shadowX?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال0
shadowY?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال2
animations?Animation[]

تحريك تغير الخاصية. duration/delay بالثواني، from/to للنهايات، repeat/autoreverse للتكرار وwrap للدورة.

مثال[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

معرّف ثابت بين العناصر الشقيقة.

مثال عملي

function main() {
  return (
    <HStack spacing={12}>
      <Image source="badge.png" width={80} height={80} contentMode="fit" />
      <Image
        source="badge.png"
        width={80}
        height={80}
        renderingMode="template"
        color={$env.accent}
      />
    </HStack>
  );
}

الحركة

الحركة

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

عند الإغفال

الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.

الخصائصعند الإغفال
contentMode"fit"
repeatMode"none"
renderingMode"original"
colorHDR($env.foreground)

Symbol

ZStack

Color / Gradient

Text

السابق

Group

الخطوة التالية

في هذه الصفحة

مثالالاستخدامالخصائصمثال عمليالحركةعند الإغفالواجهات مرتبطة