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"

副本間距,單位為點;x/y 可分別設定兩軸週期。

範例360

對齊至 anchor 的內容座標;值增加時副本反向移動,並非速度。

範例$data.current.heading?.direction ?? 0

視口位置比例:0 起點、0.5 中間、1 終點。

範例0.5

value 對齊 anchor 後增加的位移,單位為點。

範例0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

疊放子 View 的九種對齊位置:四角、四邊及中心。

範例"topLeading"
通用屬性
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

整體視覺變換不改變版面。平移用點,旋轉及傾斜用度,縮放 1 不變,錨點用 0–1。

範例{rotation: 0}
background?Paint

背景填色,接受顏色或漸層;clear 表示透明。

範例"clear"
opacity?number

整個 View 的不透明度:0 完全透明,1 完全不透明。

範例1
cornerRadius?number

圓角半徑,單位為點。

範例0
clip?"rectangle" | "ellipse"

裁切形狀:rectangle 矩形或 ellipse 橢圓;Material 另可用 false 停用。

範例"rectangle"
mask?View | null

透明度遮罩 View,置中顯示且不影響佈局;null 表示不使用遮罩。

範例<Circle width="fill" height="fill" background="white"/>
zIndex?number

同層 View 的繪製順序,數值越大越靠前。

範例0
blur?number

模糊半徑,單位為點;0 不模糊。

範例4
innerShadow?DrawingEffect

特效的顏色、不透明度、模糊半徑及 x/y 位移;距離用點。

範例{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

特效的顏色、不透明度、模糊半徑及 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?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

省略時的行為

下表是經實作核對的省略行為;屬性範例不是預設值。固定效果應明確傳值,尺寸和主題色等依環境變動,不能視為常數。

屬性省略時的行為
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"