[속성] mainAxisAlignment, crossAxisAlignment, mainAxisSize

두유노플러터·2023년 7월 9일

mainAxisAlignment

위젯의 배치를 유연하게 조정할 수 있다.
주로 Row와 Column과 같은 위젯들의 주 축을 기준으로 정렬할 때 사용된다.

MainAxisAlignment

위젯을 가로 또는 세로 축을 기준으로 정렬하는 방법을 설정하는 속성
각 값에 따라 위젯의 배치가 달라진다.

MainAxisAlignment.center

Row일 때: 가로축을 기준으로 가운데 정렬한다.
Column일 때: 세로축을 기준으로 가운데 정렬한다.

MainAxisAlignment.start

Row일 때: 가로축을 기준으로 왼쪽으로 정렬한다.
Column일 때: 세로축을 기준으로 위쪽으로 정렬한다.

MainAxisAlignment.end

Row일 때: 가로축을 기준으로 오른쪽으로 정렬한다.
Column일 때: 세로축을 기준으로 아래쪽으로 정렬한다.

MainAxisAlignment.spaceEvenly

child 위젯 사이의 여유 공간을 모두 균등하게 배분한다.

MainAxisAlignment.spaceBetween

시작과 끝에 child 위젯을 배치하고, 시작과 끝 위젯의 사이에 나머지 child 위젯을 배치한다.
시작과 끝 사이의 위젯 사이의 공간은 모두 균일하게 배분된다.

MainAxisAlignment.spaceAround

첫 번째와 마지막 child 위젯 앞뒤에 여유 공간을 두고, 나머지 child 위젯과 공간의 절반만큼 배치한다.

CrossAxisAlignment

mainAxisSize를 설정함으로써 위젯의 주 축 방향에서의 크기를 조절할 수 있다.
이를 통해 주 축을 기준으로 위젯이 확장되거나 제한될 수 있다.

CrossAxisAlignment.center

Row일 때: 가로축을 기준으로 가운데로 정렬한다.
Column일 때: 세로축을 기준으로 가운데로 정렬한다.

CrossAxisAlignment.start

Row일 때: 가로축을 기준으로 위쪽으로 정렬한다.
Column일 때: 세로축을 기준으로 왼쪽으로 정렬한다.

CrossAxisAlignment.end

Row일 때: 가로축을 기준으로 아래쪽으로 정렬한다.
Column일 때: 세로축을 기준으로 오른쪽으로 정렬한다.

CrossAxisAlignment.stretch

좌우를 꽉 차게 배치하여 위젯을 늘린다.

CrossAxisAlignment.baseline

Row일 때: 수평 정렬에서 베이스라인을 기준으로 정렬한다.
Column일 때: 수직 정렬에서 베이스라인을 기준으로 정렬한다.

mainAxisSize

위젯의 주 축(main axis)에 대한 크기를 설정하는 속성
이 속성을 통해 위젯이 주 축 방향으로 얼마나 많은 공간을 차지할지 결정할 수 있다.

MainAxisSize.max

이 옵션을 사용하면 위젯이 가능한 한 많은 공간을 차지하도록 확장된다.
즉, 주 축 방향으로 최대한 늘어난다.

MainAxisSize.min

이 옵션을 사용하면 위젯이 필요한 만큼의 공간만 차지하도록 제한된다.
즉, 주 축 방향에서 필요한 크기만큼만 차지한다.

출처 :
https://beomseok95.tistory.com/310#%C2%A0MainAxisAlignment_%EC%98%88%EC%8B%9C

profile
플러터를 사용하여 모바일 APP을 개발하고 있는 두(유노)플(러터)입니다.

0개의 댓글