Flutter Column & Row - 온더테크

`Column`과 `Row`는 Flutter에서 수직 및 수평으로 위젯을 배열할 수 있는 레이아웃 위젯입니다. 이 두 위젯은 자식 위젯들을 정렬하고 배치하는 데 중요한 역할을 합니다.

### Column

`Column` 위젯은 자식 위젯들을 수직으로 배열합니다. 주요 속성은 다음과 같습니다:

– **children**: 배열할 자식 위젯들의 리스트입니다.
– **mainAxisAlignment**: 주축(세로축)에서 자식 위젯들의 정렬 방식을 설정합니다.
– **crossAxisAlignment**: 교차축(가로축)에서 자식 위젯들의 정렬 방식을 설정합니다.
– **mainAxisSize**: 주축에서의 크기를 설정합니다.

### Row

`Row` 위젯은 자식 위젯들을 수평으로 배열합니다. 주요 속성은 Column과 유사합니다:

– **children**: 배열할 자식 위젯들의 리스트입니다.
– **mainAxisAlignment**: 주축(가로축)에서 자식 위젯들의 정렬 방식을 설정합니다.
– **crossAxisAlignment**: 교차축(세로축)에서 자식 위젯들의 정렬 방식을 설정합니다.
– **mainAxisSize**: 주축에서의 크기를 설정합니다.

### 주요 속성 설명

– **MainAxisAlignment**
  – `MainAxisAlignment.start`: 자식 위젯들을 시작 부분에 정렬합니다.
  – `MainAxisAlignment.end`: 자식 위젯들을 끝 부분에 정렬합니다.
  – `MainAxisAlignment.center`: 자식 위젯들을 중앙에 정렬합니다.
  – `MainAxisAlignment.spaceBetween`: 자식 위젯들 사이에 동일한 간격을 둡니다.
  – `MainAxisAlignment.spaceAround`: 자식 위젯들 사이와 양 끝에 동일한 간격을 둡니다.
  – `MainAxisAlignment.spaceEvenly`: 자식 위젯들 사이에 동일한 간격을 두고, 양 끝에도 같은 간격을 둡니다.

– **CrossAxisAlignment**
  – `CrossAxisAlignment.start`: 교차축의 시작 부분에 정렬합니다.
  – `CrossAxisAlignment.end`: 교차축의 끝 부분에 정렬합니다.
  – `CrossAxisAlignment.center`: 교차축의 중앙에 정렬합니다.
  – `CrossAxisAlignment.stretch`: 교차축을 채우도록 자식 위젯을 확장합니다.

– **MainAxisSize**
  – `MainAxisSize.max`: 주축의 최대 크기를 차지합니다.
  – `MainAxisSize.min`: 주축의 최소 크기를 차지합니다.

### 예제 코드

아래 예제 코드는 `Column`과 `Row`의 기본 사용법을 보여줍니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column and Row Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'Column 1',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              'Column 2',
              style: TextStyle(fontSize: 24),
            ),
            Text(
              'Column 3',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20), // Column과 Row 사이의 간격
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text(
                  'Row 1',
                  style: TextStyle(fontSize: 24),
                ),
                Text(
                  'Row 2',
                  style: TextStyle(fontSize: 24),
                ),
                Text(
                  'Row 3',
                  style: TextStyle(fontSize: 24),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

### 코드 설명

– **Column 사용**
  – `mainAxisAlignment`를 `MainAxisAlignment.center`로 설정하여 자식 위젯들을 수직 중앙에 정렬합니다.
  – `crossAxisAlignment`를 `CrossAxisAlignment.center`로 설정하여 자식 위젯들을 가로 중앙에 정렬합니다.
  – 세 개의 `Text` 위젯을 자식으로 추가하여 수직으로 배치합니다.

– **Row 사용**
  – `mainAxisAlignment`를 `MainAxisAlignment.spaceEvenly`로 설정하여 자식 위젯들 사이에 동일한 간격을 둡니다.
  – 세 개의 `Text` 위젯을 자식으로 추가하여 수평으로 배치합니다.

이 예제는 `Column`과 `Row` 위젯을 사용하여 자식 위젯들을 수직 및 수평으로 정렬하는 방법을 보여줍니다. `mainAxisAlignment`와 `crossAxisAlignment`를 통해 정렬 방식을 설정할 수 있으며, 다양한 레이아웃을 손쉽게 구성할 수 있습니다.

user interface column & row with abstract image do draw in web screen

Post Views: 157

Leave a Reply Cancel reply