[Flutter] Row와 Column 위젯의 기본 개념

 

• Row: 자식 위젯들을 가로 방향으로 나열
• Column: 자식 위젯들을 세로 방향으로 나열

두 위젯 모두 children 속성을 통해 여러 개의 자식 위젯을 받을 수 있으며, 자식 위젯은 또 다른 Row나 Column이 될 수 있어 중첩된 레이아웃 구성이 가능하다. 예제를 하다 보니 이러한 부분들이 너무 헷갈리기도 해서 내용 정리를 해서 나중에 내가 궁금할 때 찾아보기 위한 용도록 작성한다.

0. 주요 속성  간단  정리

 

• mainAxisAlignment: 자식 위젯들을 주 축 방향으로 정렬
• crossAxisAlignment: 자식 위젯들을 교차 축 방향으로 정렬
• verticalDirection: 자식 위젯들의 세로 방향 배치 순서를 결정

 

1. mainAxisAlignment (주 축 정렬)

• 자식 위젯들을 주 축(main axis) 방향으로 어떻게 정렬할지 결정
• Row에서는 가로 방향, Column에서는 세로 방향이 주 축이다.
• 각 속성 값
  • start: 시작 지점에 정렬
  • center: 중앙에 정렬
  • end: 끝 지점에 정렬
  • spaceBetween: 첫 번째와 마지막 자식은 끝에 붙이고, 나머지는 균등하게 간격 배치
  • spaceAround: 모든 자식 위젯 주위에 동일한 간격 배치를 하고, 그 간격의 반을 맨앞과 맨 뒤에 배치
  • spaceEvenly: 자식 위젯들 사이에 동일한 간격 배치. 맨 앞과 맨뒤도 같은 간격을 배치한다.

2. crossAxisAlignment (교차 축 정렬)

• 자식 위젯들을 교차 축(cross axis) 방향으로 어떻게 정렬할지 결정한다.
• Row에서는 세로 방향, Column에서는 가로 방향이 교차 축이다.
• 각 속성 값
  
  • start: 교차 축의 시작 지점에 정렬
  • center: 교차 축의 중앙에 정렬
  • end: 교차 축의 끝 지점에 정렬
  • stretch: 자식 위젯을 교차 축 방향으로 최대한 늘림(Row는 세로로 길게 늘리고, Column 가로로 길게 늘림)
  • baseline: 텍스트의 경우 사용하는데, 크기가 다른 텍스트를 정렬할 때 글자의 바닥을 기준으로 정렬

3. mainAxisSize

• 주 축 방향으로 Row 또는 Column 위젯의 크기를 결정한다. 이미 
• 각 속성 값
  
  • MainAxisSize.max: 가용한 공간을 모두 차지
  • MainAxisSize.min: 자식 위젯들이 차지하는 공간만큼만 크기 설정

4. verticalDirection: 세로 방향 정렬 순서

verticalDirection은 자식 위젯들이 세로 방향으로 어떻게 배치될지를 결정

• VerticalDirection.down (기본값): 자식 위젯들을 위에서 아래로 배치
• VerticalDirection.up: 자식 위젯들을 아래에서 위로 배치

이 속성은 특히 Column 위젯에서 자식 위젯들의 순서를 반대로 배치하고자 할 때 유용하다.