Flitter의 Flex 레이아웃

Flitter의 Flex 레이아웃은 위젯을 행이나 열로 배치하는 강력하고 유연한 방법을 제공합니다. 이 시스템은 CSS Flexbox 모델을 기반으로 하며, 주로 Row와 Column 위젯을 통해 구현되며 Flexible과 Expanded 같은 보조 위젯들도 함께 사용됩니다.

핵심 개념

1. 주축: 자식들이 배치되는 기본 축 (Row의 경우 수평, Column의 경우 수직)

2. 교차축: 주축에 수직인 축

3. Flex 계수: 다른 유연한 자식들과 비교하여 주축을 따라 자식이 차지해야 하는 공간의 양을 결정

Column과 Row 위젯

Column 예제

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

const columnExample = Column({
  children: [
    Container({ width: 100, height: 50, color: "red" }),
    Container({ width: 100, height: 50, color: "green" }),
    Container({ width: 100, height: 50, color: "blue" }),
  ],
});

시각적 표현:

┌──────────────┐
│ ┌──────────┐ │
│ │   빨강    │ │
│ └──────────┘ │
│ ┌──────────┐ │
│ │   초록    │ │
│ └──────────┘ │
│ ┌──────────┐ │
│ │   파랑    │ │
│ └──────────┘ │
└──────────────┘

중첩된 Flex 레이아웃

Row와 Column을 조합하여 복잡하고 반응형인 레이아웃을 만들 수 있습니다.

import {
  Row,
  Column,
  Container,
  Expanded,
  MainAxisAlignment,
} from "@meursyphus/flitter";

const nestedFlexExample = Row({
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Expanded({
      flex: 2,
      child: Container({ color: "red" }),
    }),
    Expanded({
      flex: 1,
      child: Column({
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container({ height: 50, color: "green" }),
          Container({ height: 50, color: "blue" }),
        ],
      }),
    }),
  ],
});

시각적 표현:

┌──────────────────────────────┐
│          ┌─────────┐         │
│          │         │         │
│          │  초록   │         │
│ ┌──────┐ ├─────────┤         │
│ │      │ │         │         │
│ │ 빨강 │ │  파랑   │         │
│ │      │ │         │         │
│ └──────┘ └─────────┘         │
└──────────────────────────────┘

고급 Flex 속성

MainAxisAlignment와 CrossAxisAlignment

Row나 Column 내에서 자식들의 정렬을 제어합니다.

• MainAxisAlignment: 주축을 따라 자식들을 정렬합니다.
• CrossAxisAlignment: 교차축을 따라 자식들을 정렬합니다.

Flexible과 Expanded

• Flexible: flex 계수를 사용하여 자식이 유연하게 크기를 조정할 수 있게 합니다.
• Expanded: fit: FlexFit.tight가 적용된 Flexible의 단축형으로, 자식이 사용 가능한 공간을 채우도록 강제합니다.

모범 사례

1. 비례 크기 조정에는 Expanded 사용: 위젯들이 공간을 비례적으로 공유하기를 원할 때 사용하세요.

2. Row와 Column 조합: 복잡한 레이아웃을 만들기 위해 Row 안에 Column을 넣거나 그 반대로 중첩하세요.

3. 정렬이 중요합니다: MainAxisAlignment와 CrossAxisAlignment를 사용하여 위젯의 위치를 미세 조정하세요.

4. 반응형 테스트: 항상 다양한 화면 크기에서 레이아웃을 테스트하세요.

결론

Flitter에서 Flex 레이아웃을 마스터하면 반응형이고 복잡한 사용자 인터페이스를 쉽게 만들 수 있습니다. 주축, 교차축의 원리를 이해하고 Row, Column, Flexible, Expanded와 같은 위젯을 사용하는 방법을 알면 다양한 화면 크기와 방향에 적응하는 레이아웃을 만들 수 있습니다.