หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

น้ำตก

มุมมองเลย์เอาต์กริดน้ำตกสำหรับ 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 & Indicators 

 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 สำหรับตัวอย่างที่มีรายละเอียดและโต้ตอบเพิ่มเติม

การติดตั้ง

Swift Package Manager

การพึ่งพาแอพ

เลือกไฟล์> แพ็คเกจที่รวดเร็ว> เพิ่มการพึ่งพาแพ็คเกจและป้อน 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 ของคุณ

คู่มือการย้ายถิ่น

  • คู่มือการโยกย้าย WaterfallGrid 1.0.0

การกำหนดเวอร์ชัน

สำหรับเวอร์ชันที่มีให้ดูรุ่นที่เก็บนี้

การบริจาค

การมีส่วนร่วมเป็นมากกว่าการต้อนรับ โปรดสร้างปัญหา GitHub ก่อนที่จะส่งคำขอดึงเพื่อวางแผนและหารือเกี่ยวกับการใช้งาน

ผู้เขียน

  • Paolo Leonardi (@paololeonardi)

การให้เครดิต

WaterfallGrid ได้รับแรงบันดาลใจจากโครงการต่อไปนี้:

  • QGrid - https://github.com/q-mobile/qgrid
  • Grid - https://github.com/swiftuiextensions/grid
  • The Swiftui Lab - https://swiftui-lab.com

ใบอนุญาต

WaterfallGrid มีอยู่ภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด