ดาวน์โหลด swiftui grid - swiftui grid Source Source Download

swiftui grid

ซอร์สโค้ดอื่น ๆ

1.0.0

ดาวน์โหลด

Swiftui Grid

เค้าโครงมุมมอง Grid Swiftui พร้อมสไตล์ที่กำหนดเอง

คุณสมบัติ

เค้าโครงตาม Zstack
การเลื่อนแนวตั้งและแนวนอน
รองรับแพลตฟอร์ม Apple ทั้งหมด
สไตล์ที่กำหนดเอง (ModularGridStyle, SmageDgridStyle)
รูปแบบรหัส Swiftui (Stylestructs, EnvironmentValues, ViewBuilder)
การพัฒนาที่ใช้งานสำหรับแอพการผลิต

เปิด GridDemo.xcodeproj สำหรับตัวอย่างเพิ่มเติมสำหรับ iOS, macOS, watchos และ tvos

รูปแบบ

ModularGridStyle (ค่าเริ่มต้น)

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

Smageredgridstyle

 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 ) )

นาที

Autolayout เคารพความกว้างหรือความสูงของรายการขั้นต่ำ

 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 )
            }
        }
    }
}