RadialLayout

توزيع المقاييس أو الأرقام أو الرموز حول دائرة. يتحكم radius في المسافة من المركز إلى مركز تخطيط View، ويتحكم startAngle وsweepAngle في نطاق التوزيع.

مثال

function main() {
  return (
    <RadialLayout
      radius={70}
      startAngle={-90}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 60, 120, 180].map((value) => (
        <Text key={value}>{value}</Text>
      ))}
    </RadialLayout>
  );
}

الاستخدام

أنصاف الأقطار تحدد مراكز الأبناء لا الحواف الخارجية. includeEnd=false يقسم إلى n وtrue إلى n−1. إدراج نهاية دائرة كاملة يطابق الأول والأخير. childRotation يضبط الاتجاه.
الزاوية بالدرجات: 0 يمينًا، 90 للأسفل، sweep الموجب مع الساعة. startAngle بترديد 360 وsweepAngle بين −360…360. صفر لا يرسم و±360 دورة. wrap:360 لـ startAngle فقط.
استخدم معرفات بيانات ثابتة في key للحفاظ على هوية View أثناء التحديث والحركة. فهرس المصفوفة لا يصلح هوية دائمة عند إعادة الترتيب.

الخصائص

children?ViewContent

محتوى الرسم الفرعي.

radius?number

نصف قطر بالنقاط؛ radius للمحورين وradiusX/radiusY لكل محور. السالب يصبح 0.

مثال80

radiusX?number

نصف قطر بالنقاط؛ radius للمحورين وradiusX/radiusY لكل محور. السالب يصبح 0.

مثال80

radiusY?number

نصف قطر بالنقاط؛ radius للمحورين وradiusX/radiusY لكل محور. السالب يصبح 0.

مثال80

startAngle?number

زاوية البداية بالدرجات، تُطبّع بترديد 360 عند أخذ العينات.

مثال-90

sweepAngle?number

زاوية المسح بالدرجات، تُحصر بين -360…360 عند أخذ العينات. القيم الموجبة مع عقارب الساعة؛ wrap غير مدعوم.

مثال360

includeEnd?boolean

تضمين نهاية زاوية المسح في التوزيع. للدائرة الكاملة، false يمنع تراكب أول وآخر عنصر.

مثالfalse

childRotation?"none" | "radial" | "tangent"

none يحافظ على الاتجاه، radial يتبع نصف القطر، tangent يضيف 90 درجة.

مثال"none"

الخصائص المشتركة

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?RadialLayoutAnimation[]

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

مثال[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

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

مثال عملي

function main() {
  return (
    <RadialLayout
      width={200}
      height={200}
      radius={76}
      startAngle={-135}
      sweepAngle={270}
      includeEnd={true}
    >
      {[0, 50, 100, 150, 200].map((value) => (
        <Text key={value} fontSize={14}>
          {value}
        </Text>
      ))}
    </RadialLayout>
  );
}

الحركة

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

عند الإغفال

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

الخصائص	عند الإغفال
`radius`	`80`
`startAngle`	`-90`
`sweepAngle`	`360`
`includeEnd`	`false`
`childRotation`	`"none"`

مثال

الاستخدام

الخصائص

مثال عملي

الحركة

عند الإغفال

Circle

Arc

في هذه الصفحة

RadialLayout

مثال

الاستخدام

الخصائص

مثال عملي

الحركة

عند الإغفال

واجهات مرتبطة

Circle

Arc

في هذه الصفحة