플러터(flutter) - 가로, 세로 (Row, Column)

#0 잡설

 

드디어 dart 기초 문법 끝났고 플러터로 넘어왔다.

분명 아직 기초에도 모자란 부분들이 있다.

 

1. 구조적 원리에 대한 감이 아직 명확하지가 않다.

2. @로 시작하는 오퍼레이터에 대한 이해가 떨어진다.

이거는 모든 프로그래밍 언어 공통 사항이니깐 공부하면서 보완해보자.

 

#1 Row (가로)

 

Row에서의 가로는 MainAxisAlignment,

세로는 CrossAxisAlignment이다.

---

#2 Coulmn (세로)

 

Coulmn에서의 가로는 CrossAxisAlignment,

세로는 MainAxisAlignment이다. 

---

#3 정리

 

특징1. MainAxisAlignment는 가고자 하는 방향의 최대 크기를 차지한다.

특징2. CrossAxisAlignment는 가고자 하는 방향의 최소 크기를 차지한다.

CrossAxisAlignment.stretch - 반대축으로 위젯들을 최대로 확장

CrossAxisAlignment.baseline - 텍스트 기준선을 기준으로 위젯을 정렬한다.

-> TextBaseline의 경우에는 alphabetic, ideographic이 있다.

alphabetic의 경우에는 바닥부터 시작해서 가장 늦게 맞닿는 면을 기준으로 정렬

ideographic의 경우에는 바닥부터 시작해서 가장 먼저 맞닿는 면보다 더 바닥과 떨어져서 정렬

 

CrossAxisAlignment의 경우에 정렬을 하려면, 최소한으로 움직이려고 하기 때문에 최소한의 크기안에서는 움직이기가 어렵다.

따라서 최대한 늘려놓고 움직이는 것이 효과를 극대화 할 수 있다.

 

 

*axis는 축

*crossaxis는 반대축