[이론] Row and Column (3) CrossAxisAlignment
들어가기 앞서...
저번 게시글에는 MainAxisAlignment 를 다뤘다.
이번에는 CrossAxisAlignment 를 다뤄보겠다.
주의 깊게 봐야하는 점...
MainAxisAlignment 주축정렬이고, CrossAxisalignment 는 반대축 정렬이라는 점이다.
그리고 CrossAxisAlignment는 최소한의 사이즈에서는 반대축 정렬을 할수 없다는 점을 알고 있어야 한다.
CrossAxisAlignment 를 하기 위해서는 최소한의 사이즈를 넓혀줘야 테스트가 가능해진다.
자세한 설명은 본문에서 확인해보자!
본문으로...
- 우선 반대축 정렬 테스트하기 위한 width 과 height 값을 넓혀보고 CrossAxisAlignment 적용해보자!
Row 와 Column 을 보면, Row 가 차지할 수 있는 최대한의 가로 사이즈를 전체의 백그라운드 black 이 차지하고 있는것을 볼 수 있고,
Column 도 차지할 수 있는 최대한의 세로 사이즈의 전체를 백그라운드 black 이 차지하고 있는 것을 볼 수 있다. 위젯이 없는데도 말이다.
Row 와 Column 에서는 주축에서는 최대한을 차지하고, 반대축은 최소한을 차지한다는 것을 확인할 수 있다.
하지만 CrossAxisAlignment 하려 하면, 최소한의 사이즈에서는 정렬을 할 수 가 없다.
오른쪽 사진인 경우에 가로사이즈가 최소한의 사이즈 이기때문에 반대축 정렬을 백날 천날 해봤자 그래도다.
그렇기에 우리는 Row 일때는 height 를 늘려주고, Column 일때는 width 을 최대한으로 늘려줄것이다.
Cloumn 인 경우!
Cloumn 위젯 보다 위에 width 값을 디바이스의 크기만큼 넓혀줄 것이다.
MediaQuery.of(context).size.width -> 현재 핸드폰의 사이즈의 넓이
width 크기를 MediaQeury 를 사용해 휴대폰 사이즈 넓이 만큼 적용해보자!
밑의 사진은 기본적으로 CrossAxisAlignment 파라미터를 주지 않았는데 default 로 center 가 들어가 있는 것을 볼 수 있다.
CrossAxisAlignment는 MainAxisAlginment 와 동일하게 같은 메소드를 갖고 있다! (start, end, center)
그리고 처음 보는 메소드 stretch!
우리는 나머지는 테스트를 해보았으니 stretch 를 적용해보겠다!
우리가 모두 넓이는 50 픽셀로 적용했는데, 부모에다가 CrossAxisAlignment 를 stretch 로 한다면 억지로 넓힌다! 라고 생각하면 된다.
Row 인 경우!
Column 과 마찬가지로, Row 위젯 보다 위에 height 값을 디바이스의 크기만큼 넓혀줄 것이다.
MediaQuery.of(context).size.height -> 현재 핸드폰의 사이즈의 길이
height 크기를 MediaQeury 를 사용해 휴대폰 사이즈 길이 만큼 적용해보자!
이런식으로 위의 IOS시뮬레이터 결과창 이외에도 여러 가지 조합을 살펴볼수 있다!
끝으로...
- 나는 CrossAxisAlignment 가 반대축 정렬이라는 것을 알았고, 테스트 하기 위해 Row 와 Cloumn에 맞게 width 과 height 를 최대한의 사이즈로 넓혀야한다는 것을 알았다!
- 나는 MediaQuery 를 사용해 휴대폰 사이즈의 넓이와 길이를 사용 할 줄 안다!
- CorssAxisAlignment 의 stetch 메소드는 child 의 위젯의 크기를 지정해도 억지로 크기나 넓이를 넓힌다. 라는 것을 알았다!
- mainAxisAlignment 와 CrossAxisAlignment 적절하게 섞어 사용할 수 있다!
