Row, Column 위젯의 mainAxisAlignment, crossAxisAlignment, mainAxisSize속성

Row는 행, Column은 열이다.

mainAxisAlignment 및 crossAxisAlignment속성 을 사용하여 행 또는 열이 자식을 정렬하는 방법을 제어한다 . 행의 경우 기본 축은 가로로 실행되고 교차 축은 세로로 실행된다. 열의 경우 기본 축은 세로로 실행되고 교차 축은 가로로 실행된다.

mainAxisAlignment 및 crossAxisAlignment은 정렬을 제어하기 위해 다양한 상수를 제공한다.

MainAxisAlignment enum

상수	Row	Cloumn
center	가로축 기준 중앙 정렬	세로축 기준 중앙 정렬
end	가로축 기준 우측 정렬	세로축 기준 하단 정렬
start	가로축 기준 좌측 정렬	세로축 기준 상단 정렬
spaceAround	앞/뒤 영역을 두고 사이에 배치
spaceBetween	child widget을 start, end 사이에 고르게 배치, 시작과 끝 widget 사이 공간은 균등하게 배치
spaceEvenly	child widget 사이 공간을 고르게 정렬

 

CrossAxisAlignment enum

상수	Row	Column
center	가로축 기준 중앙 정렬	세로축 기준 중앙 정렬
end	가로축 기준 하단 정렬	세로축 기준 우측 정렬
baseline	baseline 기준 수평 정렬	baseline 기준 수직 정렬
start	가로축 기준 상단 정렬	세로축 기준 좌측 정렬
stretch	child widget의 height을 꽉 채운다.	child widge의 width을 꽉 채운다.

*여기서 baseline이란 ?

child widget별로 text의 폰트가 다를때 기준으로 잡아주는 라인이라고 보면 된다.

TextBaseline은 알파벳 기준선 기준인 alphabetic이 있고, 텍스트영역 최하단 기준인 ideographic이 있다.

 

mainAxisSize

기본적으로 행이나 열은 기본 축을 따라 가능한 많은 공간을 차지하지만 자식을 서로 가깝게 묶으려면 mainAxisSize를 사용한다.

	mainAxisSize
min	크기만큼만 차지
max	남은 영역을 모두 사용

 

 

출처:https://developer-popo.tistory.com/34