플러터로 첫 코딩하기! 15 - Column ,Row 위치 조정 하기

오늘은 Column,Row 로 위젯들의 위치를 조정하는 함수를 배워보겠습니다. 컴퓨터로 워드작을 할 때 글을 정령하는 방법 다 아실 것이라 생각됩니다. "왼쪽 정렬" , "가운데 정렬" , "오른쪽 정렬"이 대표적이죠.

 

위와 같은 기능이 플러터 Column과 Row안에 들어 있습니다.  바로 mainAxisAlignment와 

crossAxisAlignment 입니다.  mainAxisAlignment 방향의 메인이라는 뜻이고 

crossAxisAlignment  상대되는 방향이라는 뜻입니다. 

 

저번시간에 Column 은 세로, Row는 가로 로 위젯을 배친한다고 배웠습니다. 

그렇기에 Colunm(

mainAxisAlignment 함수를 쓰게 되면 세로로 배치되는 위젯의 영향을 주고  crossAxisAlignment는 가로로 배치 되는 위젯에 영향을 주게 됩니다 )

 

Row (

mainAxisAlignment 는 가로, crossAxisAlignment 세로 각각 Colunm과 반대로 영향을 줍니다. )

 

 

정확한 사용법은 아래와 같습니다. 

함수 끝에  . center가 있는데 그게 바로 어떻게 정렬할 것인지 정해주는 것입니다. 

 

 

 

- start : 왼쪽정렬

- end : 오른쪽 정렬

- center : 가운데정렬

- spaceEvenly :  영역을 고르게 정렬 (위젯간의 위치를 균일하게 맞춰서 정렬)   ==>         |    1     2    |

-spaceBetween : start - end 기준점이 양 쪽 끝에서 시작해서 균일하게 정렬   ==>        |1               2|

- spaceAround : spaceEvenly 의 기준 간격 보다 조금 더 넓게 잡고 균일하게 정렬 ==>  |   1        2     |

 

 

위 와 같은 기능들이 있지만 가장 많이 쓰이는 건 

start, end, center, spaceEvenly 입니다. 

Column( 
mainAxisAlignment  :MainAxisAlignment.center

crossAxisAlignment : CrossAxisAlignment.center


)

Row( 
mainAxisAlignment  :MainAxisAlignment.center

crossAxisAlignment : CrossAxisAlignment.center


)

 

 

다음시간에는 Container에 대해 알아보겠습니다.