As Wrap flag
--as-wrap
- flexbox / Wrap 윗젯 지정 플래그
(피그마를 기준으로 설명합니다.) 디자인툴에서 wrap 과 관련된 반응형 동작을 지원하지 않음에 따라, 우리는 그리드 형태의 디자인을 표현할때 어려움을 겪습니다.
여기서 말하는 Wrap 은 사이즈가 줄어듬에 따라 리스트*리스트 형의 그리드에서 아이템이 아래로 내려가며 재정렬 되는 것을 말합니다. (예시 - Flutter#Wrap)
이럴때 우리는 Wrap 플래그를 사용하여, autolayout x autolayout 형태로 디자인된 그리드를 자동으로 Wrap 형태로 변환되도록 만들수 있습니다.
- autolayout root frame (column)
- row 1 (autolayout)
- row 2 (autolayout)
- row 3 (autolayout)
- row 4 (autolayout)
위와 같이 디자인 하이라키가 구성되었다면, 루트에 간단히 --as-wrap
플래그를 추가하면 완성됩니다. (루트가 row 여도 무관합니다. 다만 그럴경우 height 에 의해 자동으로 조정됩니다.)
결과적으로 row([col([row, row, row]), col([row, row, row])])
) as a wrap(item, item, item, item, item, item)
와 같이 하이라키가 변경되게 됩니다.
Syntax
허용되는 키
--as-wrap
`--as-wrap${"="typeof boolean}`
`--as=wrap` // under development (do not use)
적용 예시
--as-wrap
--as-wrap=true
--as-wrap=false
--as-wrap=yes
--as-wrap=no
----as-wrap
동작
엘레먼트 (Element)
- Web - 웹 에서는 div 인 parent 가
flex-wrap
의 속성을 띄게 됩니다. (flex-wrap: wrap
) - Flutter - 플러터 에서는
Wrap
윗젯으로 parent 가 변형됩니다.
정리하자면, 다음과 같습니다.
- flexbox on css
- Wrap on flutter
- Wrap with reflect-ui
구조의 변화 Wrap 이 구성될때, 디자인 상에서는 아이템의 시점에서 루트를 포함하여 2개의 parent 가 존재하지만, 이는 코드상에서 하나의 parent, 즉 Wrap parent 아래에 모든 아이템들이 다이렉트로 있어야 합니다.
위에서도 말한것 처럼 아래와 같이 변형되며,
row([col([row, row, row]), col([row, row, row])])
) as a wrap(item, item, item, item, item, item)
이에 따라 col, col 은 width, height 값이외의 그 어떤값도 최종 코드에 영향을 끼치지 않습니다.
예시를 들어 설명하자면, 아래와 같이 디자인이 구성되었을때 row 3 번만이 갖게 되는 🔴 red 값은 읽히지도, 처리되지도, 결과 코드에 반영되지도 않습니다. 이는 버그가 아니며, 기술적으로 지원이 불가능합니다. (위에 언급을 참조해주세요)
- autolayout root frame (column) 🔵
- row 1 (autolayout) ⚪️
- row 2 (autolayout) ⚪️
- row 3 (autolayout) 🔴
- row 4 (autolayout) ⚪️
🔵 = blue
🔴 = red
⚪️ = transparent (no bg)
같이보기
- 같이 볼 문서 없음