위치 및 정렬

Flutter에서 위젯을 배치하고 정렬하는 데 중요한 역할을 하는 위치 및 정렬 위젯에 대한 가이드를 제공합니다. 이 예제에서는 Row 및 Column 위젯을 사용하여 다양한 위치 및 정렬 옵션을 시연합니다.

Row 및 Column 위젯

Row와 Column은 자식 위젯을 가로 또는 세로로 배열하기 위해 사용됩니다. 각각은 자식 위젯의 위치 및 정렬을 다루는 매개변수를 가집니다.

Row(
  mainAxisAlignment: MainAxisAlignment.center, // 수평 정렬
  crossAxisAlignment: CrossAxisAlignment.center, // 수직 정렬
  mainAxisSize: MainAxisSize.min, // 주 축 방향의 크기 조절
  children: [
    FlutterLogo(size: 50.0),
    FlutterLogo(size: 100.0),
    FlutterLogo(size: 50.0),
  ],
)

위의 코드에서는 Row 위젯을 사용하여 FlutterLogo 위젯을 가로로 배열하고 있습니다. 다음은 주요 위치 및 정렬 옵션에 대한 설명입니다.

• mainAxisAlignment: 주 축 (가로 또는 세로)의 정렬 방법을 지정합니다. MainAxisAlignment 열거형을 사용하여 다양한 정렬 옵션을 선택할 수 있습니다. 예를 들어 MainAxisAlignment.center는 중앙 정렬을 의미합니다.

• crossAxisAlignment: 주 축과 직각인 방향 (가로 또는 세로)의 정렬 방법을 지정합니다. CrossAxisAlignment 열거형을 사용하여 다양한 정렬 옵션을 선택할 수 있습니다. 예를 들어 CrossAxisAlignment.start는 시작 부분 정렬을 의미합니다.

• mainAxisSize: 주 축 방향으로 위젯의 크기를 어떻게 조절할지 지정합니다. MainAxisSize.min은 자식 위젯들의 최소 크기로 설정하고 MainAxisSize.max는 최대 가능한 크기로 설정합니다.

위치 및 정렬을 변경하려면 위젯의 상태를 업데이트하고 setState를 호출하여 화면을 다시 빌드합니다.

이것은 간단한 예제이며 Flutter에서 제공하는 위치 및 정렬 위젯은 더 다양하고 복잡한 레이아웃을 구현하는 데 사용됩니다. 위치 및 정렬을 조절하여 사용자 인터페이스를 원하는 대로 구성할 수 있습니다.