Row & Column

devvace ㅣ 2023. 1. 31. 20:52

# 개념

말 그대로 수평으로 위젯들을 나열해야할 때는 Row wiget을 사용하고, 수직으로 나열해야할 때는 Column widget을 사용한다.

[목차]
# MainAxisAlignment

1. MainAxisAlignment.start

2. MainAxisAlignment.end
3. MainAxisAlignment.center
4. MainAxisAlignment.spaceBetween

5. MainAxisAlignment.spaceEvenly
6. MainAxisAlignment.spaceAround
# CrossAxisAlignment

1. CrossAxisAlignment.start

2. CrossAxisAlignment.end

3. CrossAxisAlignment.stretch
#MainAxisSize

1. MainAxisSize.max

2. MainAxisSize.min

# Expanded widget

# Flexible widget

# MainAxisAlignment

Row 또는 Column widget 안에서 Widget들을(children) 배치할 때 사용한다.

아래는 Column widget을 예로 실행했다.

1. MainAxisAlignment.start

Column은 위에서 아래로 향하기 때문에 start 옵션을 주면 위에 배치되는 것을 볼 수 있다.

2. MainAxisAlignment.end

3. MainAxisAlignment.center

4. MainAxisAlignment.spaceBetween

spaceBetween 옵션을 사용하면 child를 시작과 끝에 배치하고, 나머지 child wiget을 일정 간격으로 배치한다.

5. MainAxisAlignment.spaceEvenly

spaceEvenly 옵션은 child widget 사이 공간을 모두 균일하게 할당한다.

6. MainAxisAlignment.spaceAround

spaceAround 옵션은 첫 번째와 마지막 child widget의 공간을 나머지 child 위젯 공간의 절반만큼 할당한다.

※ Row(mainAxisAlignment: MainAxisAlignment.start,)

Row의 경우, Wiget들이 왼쪽에서 오른쪽으로 수평 배치된다는 점 외에 나머지는 같기 때문에 생략한다.

# CrossAxisAlignment

CrossAxisAlignment를 테스트하기전에 상위 Container를 화면의 너비만큼 늘여주자.

@override
Wiget build(BuildContext context) {
//...
    child: Container(
//...
    	width: MediaQuery.of(context).size.width,
        child: Colimn(
//...
}

MediaQuery를 사용하면 화면의 최대 너비만큼 늘여줄 수 있다.

검정색으로 표시된 배경을 보면 MainAxisAlignment와의 차이점을 볼 수 있다.

1. CrossAxisAlignment.start