CapDriveGroup
รวม View หลายรายการเข้าด้วยกัน โดยใช้ความโปร่งใส การหมุน หรือเอฟเฟกต์พิเศษอื่น ๆ อย่างสม่ำเสมอ เด็ก View ปฏิบัติตามกฎการจัดเรียงของคอนเทนเนอร์ภายนอก และใช้เอฟเฟกต์พิเศษกับผลลัพธ์สังเคราะห์ทั้งชุด
ตัวอย่าง
function main() {
return (
<Group transform={{ rotation: 12 }} opacity={0.8}>
<Text>12</Text>
<Symbol name="bolt.fill" />
</Group>
);
}
การใช้งาน
- Group ไม่สร้างการจัดเรียงใหม่ ลูกยังอยู่ในเลย์เอาต์ภายนอก เอฟเฟกต์และความทึบใช้หลังรวมกลุ่ม จึงต่างจาก opacity แยกเมื่อซ้อนกัน ใช้ Stack ครอบสำหรับขนาดและ padding
- ใช้ ID ข้อมูลที่คงที่เป็น key เพื่อรักษาตัวตนและแอนิเมชัน อย่าใช้อินเด็กซ์เป็น ID ถาวรเมื่อมีการเปลี่ยนลำดับ
- 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 | nullView มาสก์อัลฟา จัดกึ่งกลางโดยไม่ส่งผลต่อเลย์เอาต์; 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เมื่อไม่ระบุ
ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่