swiftui grid

Swiftui 그리드

사용자 지정 스타일의 Swiftui 그리드보기 레이아웃.

특징

• Zstack 기반 레이아웃
• 수직 및 수평 스크롤
• 모든 Apple 플랫폼을 지원합니다
• 맞춤형 스타일 (ModularGridStyle, StaggeredGridStyle)
• Swiftui 코드 패턴 (스타일, 환경 값, 뷰 빌더)
• 생산 앱을위한 적극적인 개발

iOS, MacOS, WatchOS 및 TVOS에 대한 더 많은 예를 보려면 GridDemo.xcodeproj 엽니 다

스타일

ModularGridStyle (기본값)

 ScrollView {
    Grid ( colors ) {
        Rectangle ( )
            . foregroundColor ( $0 )
    }
}
. gridStyle (
    ModularGridStyle ( columns : . min ( 100 ) , rows : . fixed ( 100 ) )
)

비틀 거리는 스타일

 ScrollView {
    Grid ( 1 ... 69 , id :  . self ) { index in
        Image ( " ( index ) " )
            . resizable ( )
            . scaledToFit ( )
    }
}
. gridStyle (
    StaggeredGridStyle ( . horizontal , tracks : 8 , spacing : 4 )
) 

트랙

트랙 설정을 사용하면 특정 사용 사례에 그리드 동작을 사용자 정의 할 수 있습니다. 모듈 식 그리드를 사용하여 레이아웃을 계산하기 위해 값을 추적합니다. 모듈 식 레이아웃에서 열과 행은 모두 트랙입니다.

 public enum Tracks : Hashable {
    case count ( Int )
    case fixed ( CGFloat )
    case min ( CGFloat )
}

세다

그리드는 부모보기가 제공하는 크기의 동일한 분수로 분할됩니다.

 ModularGridStyle ( columns : 3 , rows : 3 )
StaggeredGridStyle ( tracks : 8 )

결정된

항목 크기는 특정 너비 또는 높이에 고정됩니다.

 ModularGridStyle ( columns : . fixed ( 100 ) , rows : . fixed ( 100 ) )
StaggeredGridStyle ( tracks : . fixed ( 100 ) )

최소

최소 품목 폭 또는 높이를 존중하는 자동 일수.

 ModularGridStyle ( columns : . min ( 100 ) , rows : . fixed ( 100 ) )
StaggeredGridStyle ( tracks : . min ( 100 ) ) 

선호도

환경 설정으로 항목 크기와 위치를 얻으십시오

 struct CardsView : View {
    @ State var selection : Int = 0
    
    var body : some View {
        ScrollView {
            Grid ( 0 ..< 100 ) { number in
                Card ( title : " ( number ) " )
                    . onTapGesture {
                        self . selection = number
                    }
            }
            . padding ( )
            . overlayPreferenceValue ( GridItemBoundsPreferencesKey . self ) { preferences in
                RoundedRectangle ( cornerRadius : 16 )
                    . strokeBorder ( lineWidth : 4 )
                    . foregroundColor ( . white )
                    . frame (
                        width : preferences [ self . selection ] . width ,
                        height : preferences [ self . selection ] . height
                    )
                    . position (
                        x : preferences [ self . selection ] . midX ,
                        y : preferences [ self . selection ] . midY
                    )
                    . animation ( . linear )
            }
        }
    }
} 

SDK

• iOS 13.1+
• Mac 촉매 13.1+
• MACOS 10.15+
• Watchos 6+
• Xcode 11.0+

로드맵

• 항목 스팬
• 'CSS 그리드'와 같은 기능

코드 기여

마스터 지점에 포크/풀 요청을 통해 자유롭게 기여하십시오. 기능을 요청하거나 버그를보고하려면 새 문제를 시작하십시오.

커피 기여

이 프로젝트가 유용하다고 생각되면 내 Github 스폰서가되는 것을 고려하십시오.