[플러터 2] UI 구조 2

Container 위젯

빈 박스 위젯으로 SizedBox 위젯과 차이점이 있다.

Container는 내부에 decoration 속성이 있어서

박스에 색상을 입히거나 박스의 모양을 바꾼다던가 테두리 선을 줄 수 있다.

 

Container

- Column

   - Icon

   - Text

 

SizedBox은 보통 마진을 줄 때 사용한다.

 

컨테이너 위젯의 특징

1. 자식이 없는 컨테이너는 가능한 한 박스를 크게 만들려고 한다. => 늘어난다.

2. 자식이 있는 컨테이너는 자식의 크기에 맞게 조정된다. => 줄어든다.

---

리스트아이템에서 overflow 문제 발생 시

보통 Column 위젯에서 여러 위젯들을 나열할 때 스크롤이 안되서 발생하는데 

Column을 ListView로 변경해주면 세로로 스크롤이 가능해진다.

ListView는 일반적으로 사용되는 스크콜 위젯으로 자식을 차례대로 표시한다.

---

AspectRatio로 이미지 비율 정하기

AspectRatio는 특정 종횡비로 자식크기를 조정하는 위젯이다.

이미지를 화면에 표시할 때는 비율로 표시하는 것이 좋다.

AspectRatio 위젯은 먼저 레이아웃 제약에서 허용하는 제일 큰 너비를 시도한다.

위젯의 높이는 지정된 가로 세로 비율을 너비에 적용하여 결정되며 

너비와 높이의 비율로 표현된다,

예) 넓이 300 / 높이 600인 화면에 이미지에 AspectRatio 위젯을 적용하여 비율을 2/1로 주면 

      넓이 300의 비율이 2가 되기 때문에

      높이는 300의 절반인 150이 된다.

 

계산법 : (넓이 / 넓이 비율) * 높이 비율

 

퀴즈 : 화면 넓이 450, 높이 1000에서 비율 3/2 를 주게되면 이미지 크기는?

          이미지 넓이 450, 높이 300

---

ClipRRect 위젯으로 이미지 모서리 곡선 주기

둥근 사각형을 사용해서 자식을 자르는 위젯이다.

Clip은 자르다는 의미

R은 Round를 의미

Rect는 사각형을 의미

 

사각형을 둥글게 잘라주는 위젯. Clip (자르다) R (둥글게) Rect (사각형)

 

참고로 Container 위젯의 경우 decoration 속성이 있기때문에

굳이 ClipRRect 위젯을 사용할 필요는 없다.