تنزيل swiftui grid - تنزيل رمز مصدر swiftui grid

swiftui grid

شفرة المصدر الأخرى

1.0.0

تنزيل

شبكة سويفتوي

Swiftui Grid View Layout مع أنماط مخصصة.

سمات

تخطيط قائم على Zstack
التمرير الرأسي والأفقي
يدعم جميع منصات Apple
أنماط مخصصة (modulargridstyle ، staggeredgridstyle)
أنماط رمز Swiftui (stylestructs ، البيئة ،
التطوير النشط لتطبيقات الإنتاج

افتح GridDemo.xcodeproj لمزيد من الأمثلة لنظام التشغيل iOS و MacOS و WatchOS و TVOS

أنماط

ModularGridStyle (افتراضي)

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

StaggeredGridstyle

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