MainAxisAlignment, CrossAxisAlignment (Row, Column 정렬)

Row 와 Column 에서 정렬을 위해 MainAxisAlignment 와 CrossAxisAlignment 를 설정할 수 있다. 

각각 정렬이 헷갈려서 한번 짚고 넘어가려고 한다. 

각, Row와 Column 에서 적용되는 방식이 다르다. 

 

1. Row

    - Row 는 가로로 위젯을 나열한다.

    - MainAxisAlignment는 가로열 정렬을 담당하고, CrossAxisAlignment 는 세로 정렬을 담당한다.

 

2. Column

     - column은 세로로 위젯을 배치한다

     - MainAxisAlignment는 세로 정렬을 담당하고, CrossAxisAlignment는 가로 정렬을 담당한다.

 

 

3. MainAxisAlignment 속성들

     - start : 각 메인 정렬의 시작점 기준 정렬 (Row : 왼쪽정렬, Column : Top 정렬)

     - end : 각 메인 정렬의 끝점 기준 정렬 (Row : 오른쪽정렬, Column : Bottom 정렬)

     - center : 각 메인 정렬의 중앙 정렬 (Row : 열 중앙, Column : 행 중앙)

     - spaceBetween : 1번 위젯과 마지막 위젯을 각각 양쪽끝에 배치하고, 나머지 위젯은 남은 공간에 균등히 배치

     - spaceAround : spaceBetween과 흡사하나, 가운데 위젯들 간격의 절반을 첫, 끝 위젯의 간격으로 사용 

     - spaceEvenly : 위젯간의 공간을 모두 균등하게 분배

 

4. CrossAxisAlignment 속성들

     - start : 각 Cross 정렬의 시작점 기준 정렬 (Row : Top 정렬, Column : 왼쪽 정렬)

     - end : 각 Cross 정렬의 끝점 기준 정렬 (Row : Bottom 정렬, Column : 우측 정렬)

     - center : 각 Cross 정렬의 중앙 정렬 (Row : 세로 중앙, Column : 가로 중앙)

     - stretch : 각 Cross 정렬의 처음 - 끝까지 늘림 (Row : 세로로 늘림, Column :  가로로 늘림)

     - baseline : 문자열 기준으로 정렬을 한다 (Row : 세로 정렬, Column : 가로 정렬). 반드시 textBaseline
                          속성값과 같이 사용되어야 한다.  글자 크기가 다를경우 유용한 정렬이다.
                           * column은 별 의미가 없는듯 하다. 
        - textBaseline : TextBaseline.alphabetic 과 ideographic 이 있다. 
                                   alphabetic : 알파벳 글자 기준
                                   ideographic : 모든 글자의 끝에 위치 (Row : 글자의 하단부, Column : 글자의 좌측 끝)