MainAxisAlignment, CrossAxisAlignmnet

MainAxisAlignment

MainAxisAlignment는 주축을 따라 자식 위젯들을 어떻게 배치할지 결정한다.

 

• Row의 경우: 주축은 가로 방향이다.
• Column의 경우: 주축은 세로 방향이.

MainAxisAlignment의 옵션들:

1. MainAxisAlignment.start: 시작 부분에 위젯들을 배치한다.
2. MainAxisAlignment.end: 끝 부분에 위젯들을 배치한다.
3. MainAxisAlignment.center: 중앙에 위젯들을 배치한다.
4. MainAxisAlignment.spaceBetween: 양 끝에 위젯을 배치하고, 위젯을 같은 간격으로 배치한다.
5. MainAxisAlignment.spaceEvenly: 양끝에 위젯이 아닌 빈 간격으로 시작하고 , 위젯을 같은 간격으로 배치한다.
6. MainAxisAlignment.spaceAround: spaceEvenly + 양 끝의 간격은 1/2

 

Row 위젯에 MainAxisAlignment 옵션을 적용한 예시

.start

.end

.center

 

.spaceBetween

.spaceEvenly

.spaceAround

 

Column 위젯에 MainAxisAlignment 옵션을 적용한 예시

.start

.end

.center

.spaceBetween

.spaceEvenly

.spaceAround

 

 

CrossAxisAlignment

CrossAxisAlignment는 교차축을 따라 자식 위젯들을 어떻게 배치할지 결정한다.

• Row의 경우: 교차축은 세로 방향이다.
• Column의 경우: 교차축은 가로 방향이다.

CrossAxisAlignment의 옵션들:

1. CrossAxisAlignment.start: 시작 부분에 위젯들을 배치한다.
2. CrossAxisAlignment.end: 끝 부분에 위젯들을 배치한다.
3. CrossAxisAlignment.center: 중앙에 위젯들을 배치한다.
4. CrossAxisAlignment.stretch: 위젯들을 교차축 방향으로 늘린다.
5. CrossAxisAlignment.baseline: 텍스트 기준선에 맞춰 위젯들을 배치한다.

 

Row 위젯에 CrossAxisAlignment 옵션을 적용한 예시

.start

.end

.center

.stretch

 

Row 위젯에 CrossAxisAlignment 옵션을 적용한 예시

.start

.end

.center

.stretch