Row, Column과 mainaxisalignment, crossaxisalignment에 대해

2023. 10. 16. 10:42플러터

플러터에서는 정렬을 원할 경우 Row 또는 Column 위젯을 사용한다

다만 어느 경우 Row를, 어느 경우 Column을 쓰는지와 원하는 정렬을 하고 싶을 때 약간 헷갈리는 느낌이 있어서 정리해보고자 한다

 

Row의 경우 가로를 뜻하며, 

Column의 경우는 세로를 뜻한다.

mainaxisalignment은 해당 위젯의 align을, crossaxisalignment는 해당 위젯의 역align을 의미한다.

 

ex) 텍스트를 우측에 붙이고 싶다면 Row위젯으로 감싼 후 mainaxisalignment을 이용하여 우측에 붙여주면 된다

비슷하게 텍스트가 위에 붙어있어서 가운데로 땡기고 싶다면 Column위젯으로 감싼 후 mainaxisalignment을 이용하여 센터에 두면 된다

반대로 Row위젯으로 감싼 후 crossaxisalignment를 통하여 설정도 가능하다

 

추가로 mainaxisalignment에서 몇가지 기능이 더 있다

spaceEvenly : 시작부터 끝에도 각각 공백을 주며 꽉차게 배치 ex)  ㅁ  ㅁ  ㅁ  /

spaceAround : 시작부터 끝에는 절반의 공백을, 위젯은 각각 공백을 주며 꽉차게 배치 ex) ㅁ  ㅁ  ㅁ /

spaceBetween : 시작부터 끝에는 공백없이, 각각 공백을 주며 꽉차게 배치 ex)ㅁ  ㅁ  ㅁ/

 

'플러터' 카테고리의 다른 글

이터널리턴 - openDrawer()  (0) 2023.10.28
이미지 관련 이슈  (0) 2023.10.20
픽셀 오버플로우  (0) 2023.10.12
Future 등 비동기에 대하여  (1) 2023.10.12
플러터의 생명주기  (0) 2023.10.10