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에 맞추므로 값 증가 시 패턴이 반대로 이동하고 offset을 더합니다. both는 두 방향이며 {x,y}로 따로 제어합니다. 창 밖은 항상 잘립니다.
공간 배치 후 x/y와 transform을 적용합니다. 자식을 옮겨도 형제는 밀리지 않습니다. 간격은 spacing 또는 Spacer, 완성된 View의 회전·확대는 transform을 사용하세요.

속성

children?ViewContent

자식 그리기 콘텐츠.

axis?"horizontal" | "vertical" | "both"

horizontal, vertical, both 방향 반복입니다. both는 격자 복사본을 만듭니다.

예제"horizontal"

period?RepeatAxisValue

복사본 간격(포인트)입니다. x/y로 각 축을 따로 지정합니다.

예제360

value?RepeatAxisValue

anchor에 맞출 내용 좌표입니다. 값이 커지면 복사본은 반대로 움직이며 속도가 아닙니다.

예제$data.current.heading?.direction ?? 0

anchor?RepeatAxisValue

표시 영역 비율: 0은 시작, 0.5는 중앙, 1은 끝입니다.

예제0.5

offset?RepeatAxisValue

value를 anchor에 맞춘 뒤 추가하는 이동량(포인트)입니다.

예제0

겹친 자식의 위치를 모서리·가장자리·중앙 9곳 중 선택합니다.

예제"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}

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?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"`
`period`	`360`
`value`	`0`
`anchor`	`0.5`
`offset`	`0`
`alignment`	`"topLeading"`

예제

사용법

속성

조합 예제

애니메이션

생략 시 동작

HStack

애니메이션

이 페이지의 내용

RepeatedLayout

예제

사용법

속성

조합 예제

애니메이션

생략 시 동작

관련 API

HStack

애니메이션

이 페이지의 내용