GridStack

그리드 스택

Swiftui의 유연한 그리드 레이아웃보기.

WWDC20 업데이트

Apple은 WWDC20에서 LazyVGrid 와 LazyHGrid 출시했습니다.

I (PAD) OS 14, MACOS 11, TVOS 14, WATKOS 7 ^-- 지원하는 것이 좋습니다.

I (PAD) OS 13, MacOS 10.15, TVOS 13, WatchOS 6을 지원하려면 계속 읽으십시오.

---

iOS 13+, MACOS 10.15+, TVOS 13+, watchOS 6+

그리드 셀이 가져야하는 최소 너비와 그 사이의 간격을 전달하면 가용 너비에 따라 조정됩니다.

그래서 이것을 쓰십시오 :

당신에게 이것을 줄 것입니다 :

장치가 회전하면 올바르게 조정됩니다.

? 사용 개요

그리드를 셀을 원하는 최소 너비 의 방식으로 생각해보십시오. 그렇게하면 사용 가능한 모든 공간에 적응하기 쉽습니다. 당신이 제공해야 할 유일한 크기는 세포 사이의 간격 입니다.

실제로 그리드를 만들려면 항목 번호를 알아야합니다. 그런 다음 컨텐츠 뷰 빌더는 각 인덱스 와 셀폭스 와 함께 호출되어 내부에 표시하려는 프레임으로 전달할 수 있습니다.

? 셀 내부의 견해를 크기 웁니다

그리드는 셀 폭스를 너비 로 설정하는 뷰에서 제공하는 각 항목을 감싸게됩니다. 셀에는 높이 제약이 없습니다. 그것은 당신이 당신의 콘텐츠를 가능한 한 유연하게 크기를 조정할 수 있도록하는 것입니다. 다음은 몇 가지 예가 있습니다.

내용으로 정의 된 높이

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Don't pass any height to the frame to let it be defined by it's content
        . frame ( width : cellWidth )
}

정사각형 항목

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Pass the cellWidth as width and height to the frame to make a square
        . frame ( width : cellWidth , height : cellWidth )
}

종횡비 항목

 GridStack ( ... ) { index , cellWidth in
    Text ( " ( index ) " )
        // Pass the cellWidth as width and a portion of it as height to get a certain aspect ratio
        . frame ( width : cellWidth , height : cellWidth * 0.75 )
} 

✍️ 서명

 GridStack (
    minCellWidth : Length ,
    spacing : Length ,
    numItems : Int ,
    alignment : HorizontalAlignment = . leading ,
    content : ( index : Int , cellWidth : CGFloat ) - > Void
) 

언급

John Susek의 Flowstack에서 아이디어를 가져 와서 GridStack 만들었습니다.