الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

شلال

عرض تخطيط شبكة الشلال لـ Swiftui.

سمات

  • شبكة غير منتظمة للمحتوى.
  • الأعمدة رقم مختلف لكل اتجاه الجهاز.
  • التباعد وحشو الشبكة قابلة للتخصيص.
  • اتجاه التمرير الأفقي أو العمودي.
  • يمكن أن يكون تحديث العناصر المتحركة.

الاستخدام

التهيئة

يمكنك إنشاء شبكة تعرض عناصر التجميع من خلال تمرير مجموعتك من البيانات والإغلاق الذي يوفر عرضًا لكل عنصر في المجموعة. تقوم الشبكة بتحويل كل عنصر في المجموعة إلى طريقة عرض طفل باستخدام الإغلاق المقدم.

يعمل WaterfallGrid مع بيانات محددة (مثل Swiftui.List). يمكنك جعل البيانات الخاصة بك قابلة للتعريف بإحدى طريقتين: من خلال تمريرها مع بياناتك ، مسار رئيسي إلى خاصية تحدد كل عنصر بشكل فريد ، أو عن طريق جعل نوع البيانات الخاص بك يتوافق مع البروتوكول المحدد.

مثال 1

شبكة من وجهات النظر من نوع Image من مجموعة من البيانات التي تم تحديدها بواسطة مسار رئيسي. 

 WaterfallGrid ( ( 0 ..< 10 ) , id :  . self ) { index in
  Image ( " image ( index ) " )
    . resizable ( )
    . aspectRatio ( contentMode : . fit )
}

مثال 2

شبكة من المشاهدات من نوع RectangleView من مجموعة من البيانات Identifiable . 

 WaterfallGrid ( rectangles ) { rectangle in
  RectangleView ( rectangle : rectangle )
}

أو ، لحالات بسيطة مثل هذه ، فقط: 

 WaterfallGrid ( rectangles , content : RectangleView . init )

نمط الشبكة

لتخصيص ظهور الشبكة استدعاء وظيفة gridStyle وتمرير المعلمات التي تريد تخصيصها.

الأعمدة 

 WaterfallGrid ( cards ) { card in
  CardView ( card : card )
}
. gridStyle ( columns : 2 ) 
 WaterfallGrid ( cards , content : CardView . init )
. gridStyle (
  columnsInPortrait : 2 ,
  columnsInLandscape : 3
)

التباعد والحشو 

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( spacing : 8 )
. padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )

الرسوم المتحركة 

 WaterfallGrid ( rectangles , content : RectangleView . init )
. gridStyle ( animation : . easeInOut ( duration : 0.5 ) )

السلوك التمرير

تم تضمينه في خيار Scrollview & Iductions 

 ScrollView ( showsIndicators : true ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
}

اتجاه التمرير الأفقي 

 ScrollView ( . horizontal ) {
  WaterfallGrid ( rectangles , content : RectangleView . init )
  . scrollOptions ( direction : . horizontal )
}

مثال كامل 

 ScrollView ( . horizontal , showsIndicators : false ) {
  WaterfallGrid ( cards ) { card in
    CardView ( card : card )
  }
  . gridStyle (
    columnsInPortrait : 2 ,
    columnsInLandscape : 3 ,
    spacing : 8 ,
    animation : . easeInOut ( duration : 0.5 )
  )
  . scrollOptions ( direction : . horizontal )
  . padding ( EdgeInsets ( top : 16 , leading : 8 , bottom : 16 , trailing : 8 ) )
}

نموذج التطبيق

استكشف تطبيق WaterfallGridSample لبعض الأمثلة الأكثر تفصيلاً والتفاعلية.

تثبيت

مدير الحزمة السريع

التبعية التطبيق

حدد ملف> حزم سويفت> إضافة تبعية الحزمة وأدخل عنوان URL للمستودع (إضافة تبعيات الحزمة إلى تطبيقك)

التبعية الحزمة

أضفه كاعتماد ضمن Package.swift الخاصة بك. 

dependencies: [
  . package ( url : " https://github.com/paololeonardi/WaterfallGrid.git " , from : " 1.1.0 " )
]

كوكوبودس

يمكنك تثبيت WaterfallGrid عبر cocoapods عن طريق إضافة السطر التالي إلى Podfile الخاص بك: 

 pod 'WaterfallGrid' , '~> 1.1.0'

قم بتشغيل أمر pod install لتنزيل المكتبة ودمجها في مشروع XCode الخاص بك.

أدلة الهجرة

  • دليل الترحيل 1.0.0

الإصدار

للحصول على الإصدارات المتاحة ، راجع الإصدارات في هذا المستودع.

المساهمة

المساهمات أكثر من موضع ترحيب. يرجى إنشاء مشكلة github قبل تقديم طلب سحب للتخطيط ومناقشة التنفيذ.

مؤلف

  • باولو ليوناردي (paololeonardi)

الاعتمادات

كان WaterfallGrid مستوحى من المشاريع التالية:

  • QGrid - https://github.com/q-mobile/qgrid
  • الشبكة - https://github.com/swiftuiextensions/grid
  • The Swiftui Lab - https://swiftui-lab.com

رخصة

WaterfallGrid متاح تحت رخصة معهد ماساتشوستس للتكنولوجيا. انظر ملف الترخيص لمزيد من المعلومات.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل