RepeatedLayout
在裁切窗口中週期性複製一份圖案,適合連續移動的刻度和羅盤。period 設定重複間隔,value 與 anchor 確定當前值對齊的位置。
範例
function main() {
return (
<RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
<Text width={120}>N</Text>
</RepeatedLayout>
);
}
使用說明
- children 是單份圖案,period 是週期。value 對齊 anchor,增大 value 使圖案反向移動;offset 再加點數偏移。both 雙向重複,{x,y} 可分別控制;始終裁切在視窗內。
- 先計算版面佔位,再套用 x/y 和 transform。右移子 View 不會推開兄弟;改間隔用 spacing 或 Spacer。旋轉、縮放作用於完整繪製結果。
屬性
children?ViewContent子檢視內容。
axis?"horizontal" | "vertical" | "both"horizontal 橫向、vertical 縱向或 both 雙向重複;both 形成網格。
"horizontal"period?RepeatAxisValue副本間距,單位為點;x/y 可分別設定兩軸週期。
360value?RepeatAxisValue對齊至 anchor 的內容座標;值增加時副本反向移動,並非速度。
$data.current.heading?.direction ?? 0anchor?RepeatAxisValue視口位置比例:0 起點、0.5 中間、1 終點。
0.5offset?RepeatAxisValuevalue 對齊 anchor 後增加的位移,單位為點。
0alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"疊放子 View 的九種對齊位置:四角、四邊及中心。
"topLeading"通用屬性
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圓角半徑,單位為點。
0clip?"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?Animation[]屬性改變時播放動畫。duration/delay 用秒,from/to 設端點,repeat/autoreverse 控制重複,wrap 設週期。
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | number兄弟節點中的穩定識別碼。
組合範例
function main() {
return (
<RepeatedLayout
width={240}
height={140}
axis="both"
period={{ x: 80, y: 50 }}
value={{ x: 40, y: 25 }}
anchor={{ x: 0.5, y: 0.5 }}
alignment="center"
>
<Symbol name="plus" fontSize={20} color={$env.accent} />
</RepeatedLayout>
);
}
動畫
widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y省略時的行為
下表是經實作核對的省略行為;屬性範例不是預設值。固定效果應明確傳值,尺寸和主題色等依環境變動,不能視為常數。