Flitter의 스택 레이아웃

Flitter의 스택 레이아웃을 사용하면 위젯을 서로 겹쳐서 배치할 수 있습니다. 이는 각 자식 위젯이 이전 위젯 위에 그려지는 레이어 효과를 만듭니다.

핵심 개념

1. 스택 순서: 자식들은 children 리스트에 나타나는 순서대로 그려집니다. 첫 번째 자식이 맨 아래에 있고, 그 다음 자식들이 위에 그려집니다.

2. 위치 지정: 기본적으로 자식들은 스택의 왼쪽 상단 모서리에 위치합니다.

3. 크기: 스택은 모든 자식들을 포함할 수 있는 크기로 자신의 크기를 조정합니다.

기본 사용법

다음은 여러 컨테이너를 레이어로 만들기 위해 스택을 사용하는 간단한 예제입니다:

import { Stack, Container } from "@meursyphus/flitter";

const stackExample = Stack({
  children: [
    Container({
      width: 300,
      height: 300,
      color: "red",
    }),
    Container({
      width: 200,
      height: 200,
      color: "green",
    }),
    Container({
      width: 100,
      height: 100,
      color: "blue",
    }),
  ],
});

이 예제에서:

• 빨간색 컨테이너(300x300)가 기본 레이어를 형성합니다
• 초록색 컨테이너(200x200)가 그 위에 그려집니다
• 파란색 컨테이너(100x100)가 맨 위에 나타납니다

모범 사례

1. 레이어 관리:

   • 자식들을 논리적으로 정렬하여 레이어를 추적하세요
   • 배경 요소를 children 리스트의 맨 처음에 배치하세요
   • 오버레이 요소를 마지막에 추가하세요

2. 성능:

   • 겹치는 요소가 필요할 때만 스택을 사용하세요
   • 자식의 수를 적절하게 유지하세요
   • 겹침이 필요하지 않을 때는 다른 레이아웃 위젯(Row, Column)의 사용을 고려하세요

일반적인 패턴

배경과 오버레이

Stack({
  children: [
    Container({
      width: 400,
      height: 400,
      color: "grey", // 배경
    }),
    Container({
      width: 200,
      height: 200,
      color: "rgba(255, 0, 0, 0.5)", // 반투명 오버레이
    }),
  ],
});

레이어드 카드

Stack({
  children: [
    Container({
      width: 300,
      height: 200,
      color: "blue",
    }),
    Container({
      width: 250,
      height: 150,
      color: "lightblue",
    }),
  ],
});

결론

스택은 레이어드 인터페이스를 만들기 위한 강력한 레이아웃 위젯입니다. 개념은 단순하지만, 위젯 오버레이를 가능하게 함으로써 복잡한 UI 디자인을 위한 기반을 제공합니다. 스택을 현명하게 사용하고, 더 단순한 레이아웃 위젯이 더 적합할 수 있는지 고려하는 것을 잊지 마세요.