CapDriveRadialLayout
沿圓周分布刻度、數字或符號。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>
);
}
使用說明
- 半徑決定子 View 中心，非容器外邊。includeEnd=false 將範圍均分 n 份，true 為 n−1 份；整圈含終點會首尾重疊。childRotation 控制子項方向。
- 角度用度：0 向右、90 向下、正 sweep 順時針。startAngle 以 360 歸一化，sweepAngle 限 −360…360 並保留方向；0 不畫，±360 整圈。startAngle 可用 wrap:360，sweepAngle 不可。
- 陣列 key 應使用穩定的資料識別碼，讓更新和動畫對應同一個 View。內容會重排時，不要用陣列索引當永久識別碼。
屬性
children?ViewContent子檢視內容。
radius?number布局半徑用點；radius 同時設定兩軸，radiusX/radiusY 個別覆寫，負值按 0 處理。
80radiusX?number布局半徑用點；radius 同時設定兩軸，radiusX/radiusY 個別覆寫，負值按 0 處理。
80radiusY?number布局半徑用點；radius 同時設定兩軸，radiusX/radiusY 個別覆寫，負值按 0 處理。
80startAngle?number起始角度，單位為度；取樣時按 360° 取模。
-90sweepAngle?number掃角，單位為度；取樣時限制在 -360…360。正值為順時針，不支援 wrap。
360includeEnd?boolean是否包含掃過角度的終點；整圈通常用 false 避免首尾重疊。
falsechildRotation?"none" | "radial" | "tangent"none 不旋轉，radial 跟隨半徑，tangent 再旋轉 90 度。
"none"通用屬性
width?number | "auto" | "fill"寬度：點數、自動測量或填滿父區域。
100height?number | "auto" | "fill"高度：點數、自動測量或填滿父區域。
80padding?number內容內邊距，單位為點。
0x?number視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。
0y?number視覺位移，單位為點：x 向右、y 向下，不改變版面佔位。
0transform?ViewTransform整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 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透明度遮罩 View，置中顯示且不影響佈局；null 表示不使用遮罩。
<Circle width="fill" height="fill" background="white"/>zIndex?number同層 View 的繪製順序，數值越大越靠前。
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?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" |