[Flutter] MainAxis와 CrossAxis

 

Axis

 

Row, Column과 같이 방향성이 있는 위젯은 mainAxis와 crossAxis에 관한 프로퍼티가 존재한다.

mainAxis는 위젯의 기본 방향에 대한 속성이고, crossAxis는 반대방향에 대한 속성이다.

 

다시 말해,

기본 수직으로 정렬되는 Column은 세로가 mainAxis, 가로가 crossAxis가 되며

기본 수평으로 정렬되는 Row는 가로가 mainAxis, 세로가 crossAxis가 된다.

 

이 내용을 그림으로 표현하면 아래와 같다.

 

 

 

Axis 속성에는 mainAxisSize와 mainAxisAlignment, crossAxisAlignment를 지정할 수 있으며, 아래와 같이 속성에 정의한다.

 

Row(
	mainAxisSize: MainAxisSize.min,
	mainAxisAlignment: MainAxisAlignment.center,
	crossAxisAlignment: CrossAxisAlignment.end
)

 

 

 

---

 

 

속성의 종류와 지정 효과는 각각 다음과 같다.

 

 

MainAxisSize 정의

 

상수	설명
max	최대 크기, 남은 공간을 모두 차지한다.
min	최소 크기, 포함된 자식 콘텐츠의 크기만큼 차지한다.

 

Row의 백그라운드로 노란색을 지정하고 적용된 모습을 확인하면 다음과 같은 차이가 생기는 것을 확인할 수 있다.

(각 자식에는 padding과 margin이 주어진 상태)

 

 

---

 

 

MainAxisAlignment

 

MainAxisAlignment는 Row 가로 방향, Column 세로 방향으로 child/children(자식) 위젯을 정렬한다.

상수	설명
center	Row -> 가로로 가운데 정렬 Column -> 세로로 가운데 정렬
start	Row -> 왼쪽 정렬 Column -> 위쪽 정렬
end	Row -> 오른쪽 정렬 Column -> 아래쪽 정렬
spaceEvenly	child 위젯이 균등하게 배치되고, 위젯 사이의 여백 크기만큼 또 양 옆에 여백이 생긴다.
spaceAround	child 위젯이 균등하게 배치되고, 위젯 사이의 여백 크기 절반만큼 또 양 옆에 여백이 생긴다.
spaceBetween	child 위젯이 균등하게 배치되지만, 양 옆에는 여백이 생기지 않는다.

 

 

 

• center

Row에서는 가로로 , Colum에서는 세로로 가운데 정렬한다.

[좌측] Row [우측] Column

 

 

 

• start

Row에서는 왼쪽으로, Column에서는 위쪽으로 정렬한다.

[좌측] Row [우측] Column

 

 

 

• end

Row에서는 오른쪽으로, Column에서는 아래쪽으로 정렬한다.

[좌측] Row [우측] Column

 

 

 

• spaceEvenly

child 위젯이 균등하게 배치되고, 위젯 사이의 여백 크기만큼 또 양 옆에 여백이 생긴다.

 

 

 

• spaceEvenly

child 위젯이 균등하게 배치되고, 위젯 사이의 여백 크기 절반만큼 또 양 옆에 여백이 생긴다.

 

 

 

• spaceBetween

child 위젯이 균등하게 배치되지만 양 옆에는 여백이 생기지 않는다.

 

 

 

 

 

---

 

 

CrossAxisAlignment

 

CrossAxisAlignment는 Row 세로 방향, Column 가로 방향으로 child/children(자식) 위젯을 정렬한다.

상수	설명
center	Row -> 세로로 가운데 정렬 Column -> 가로로 가운데 정렬
start	Row -> 위쪽 정렬 Column -> 오른쪽 정렬
end	Row -> 아래쪽 정렬 Column -> 오른쪽 정렬
stretch	설정되어 있는 size를 무시하고, 자식 위젯을 늘려 화면에 가득 채운다. Row -> 세로 가득 채움 Column -> 가로 가득 채움
baseline	설정한 textBaseLine에 맞춰 정렬

 

 

참고)

각 crossAxis는 기본 자식의 크기만큼 설정되어 있기 때문에 정렬해도 육안으로 구별이 되지 않을 수 있으므로 부모 Container의 크기가 앱 화면을 가득 채우게 하도록 세팅한 뒤 정렬하였다.

row -> height full

column -> width full

body: Container(
	width: double.infinity,	//앱 화면에 가득 차도록 세팅
	child: Column(
		mainAxisSize: MainAxisSize.max,
		crossAxisAlignment: CrossAxisAlignment.center,
        childern: 
        ///생략///
	)
)

 

 

 

 

• center

Row일 때는 세로의 가운데로, Column일 때는 가로의 가운데로 정렬한다.

[좌측] Row [우측] Column

 

 

 

 

• start

Row일 때는 세로의 위쪽으로, Column일 때는 가로의 왼쪽에 정렬한다.

[좌측] Row [우측] Column

 

 

 

 

• end

Row일 때는 세로의 아래쪽으로, Column일 때는 가로의 오른쪽에 정렬한다.

[좌측] Row [우측] Column

 

 

 

• stretch

설정되어 있는 size를 무시하고, Row의 경우 세로 방향으로, Column의 경우 가로 방향으로 자식 위젯을 늘려 화면에 가득 채운다.

[좌측] Row [우측] Column

 

 

 

 

• baseline

설정한 textBaseLine에 맞춰 정렬한다.

따라서 무작정 설정하면 아래와 같은 오류가 발생하는데, textBaseLine을 설정하라는 문구가 보인다.

 

 

따라서 다음과 같이 textBaseLine을 지정하여 설정하면 기준선에 맞춰 정렬된다.

 

Column(
	crossAxisAlignment: CrossAxisAlignment.baseline,
		textBaseline: TextBaseline.alphabetic,
            
		children: <Widget>[
			Text(
                "Hello World",
                style: TextStyle(fontSize: 40, color: Colors.red),
              ),
              Text(
                "Hello World",
                style: TextStyle(fontSize: 40, color: Colors.green),
              ),
              Text(
                "Hello World",
                style: TextStyle(fontSize: 40, color: Colors.blue),
              )
		]
)

 

 

이때 textBaseLine은 다음과 같은 두 가지 옵션이 존재하므로, 필요에 따라 설정하면 된다.

 

 

- alphabetic

영어의 하단에 맞춰 정렬한다.

[좌측] Row [우측] Column

 

 

 

- ideographic

전체 문자의 하단에 맞춰 정렬한다.

[좌측] Row [우측] Column