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 โดย 0 ไม่วาด ±360 เต็มวง wrap:360 ใช้ได้เฉพาะ startAngle
ใช้ ID ข้อมูลที่คงที่เป็น key เพื่อรักษาตัวตนและแอนิเมชัน อย่าใช้อินเด็กซ์เป็น ID ถาวรเมื่อมีการเปลี่ยนลำดับ

คุณสมบัติ

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

View มาสก์อัลฟา จัดกึ่งกลางโดยไม่ส่งผลต่อเลย์เอาต์; 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

ตัวอย่าง

การใช้งาน

คุณสมบัติ

ตัวอย่างใช้งาน

ภาพเคลื่อนไหว

เมื่อไม่ระบุ

API ที่เกี่ยวข้อง

Circle

Arc

ในหน้านี้