[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-7093":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":38,"discoverSource":39},7093,"WaterfallGrid","paololeonardi\u002FWaterfallGrid","paololeonardi","A waterfall grid layout view for SwiftUI.","",null,"Swift",2662,137,21,14,0,2,8,28.42,"MIT License",false,"master",true,[25,26,27,28,29,30,31,32,33,34],"ios","macos","swift","swift-package-manager","swiftui","swiftui-grid","tvos","visionos","watchos","waterfall-layout","2026-06-12 02:01:34","# WaterfallGrid\n\nA waterfall grid layout view for SwiftUI.\n\n\u003Cp align=\"center\">\n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fdemo1.png\" alt=\"Image Demo 1\"\u002F>\n\u003C\u002Fp>\n\n[![](https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fpaololeonardi%2FWaterfallGrid%2Fbadge%3Ftype%3Dswift-versions)](https:\u002F\u002Fswiftpackageindex.com\u002Fpaololeonardi\u002FWaterfallGrid)\n[![](https:\u002F\u002Fimg.shields.io\u002Fendpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fpaololeonardi%2FWaterfallGrid%2Fbadge%3Ftype%3Dplatforms)](https:\u002F\u002Fswiftpackageindex.com\u002Fpaololeonardi\u002FWaterfallGrid)\n\n## Features\n\n- [x] Irregular grid of content.\n- [x] Columns number different per device orientation.\n- [x] Spacing and grid padding customizable.\n- [x] Horizontal or vertical scroll direction.\n- [x] Items update can be animated.\n\n## Usage\n\n### Initialization\n\nYou can create a grid that displays the elements of collection by passing your collection of data and a closure that provides a view for each element in the collection. The grid transforms each element in the collection into a child view by using the supplied closure.\n\nWaterfallGrid works with identifiable data (like SwiftUI.List). You can make your data identifiable in one of two ways: by passing along with your data a key path to a property that uniquely identifies each element, or by making your data type conform to the Identifiable protocol.\n\n**Example 1**\n\nA grid of views of type `Image` from a collection of data identified by a key path.\n\n```swift\nWaterfallGrid((0..\u003C10), id: \\.self) { index in\n  Image(\"image\\(index)\")\n    .resizable()\n    .aspectRatio(contentMode: .fit)\n}\n```\n\n**Example 2**\n\nA grid of views of type `RectangleView` from a collection of `Identifiable` data.\n\n```swift\nWaterfallGrid(rectangles) { rectangle in\n  RectangleView(rectangle: rectangle)\n}\n```\nor, for simple cases like this, just:\n\n```swift\nWaterfallGrid(rectangles, content: RectangleView.init)\n```\n\n### Grid Style \n\nTo customise the appearance of the grid call the `gridStyle` function and pass the parameters you want to customise.\n\n**Columns**\n\n```swift\nWaterfallGrid(cards) { card in\n  CardView(card: card)\n}\n.gridStyle(columns: 2)\n```\n\n```swift\nWaterfallGrid(cards, content: CardView.init)\n.gridStyle(\n  columnsInPortrait: 2,\n  columnsInLandscape: 3\n)\n```\n\n**Spacing and Padding**\n\n```swift\nWaterfallGrid(rectangles, content: RectangleView.init)\n.gridStyle(spacing: 8)\n.padding(EdgeInsets(top: 16, leading: 8, bottom: 16, trailing: 8))\n```\n\n**Animation**\n\n```swift\nWaterfallGrid(rectangles, content: RectangleView.init)\n.gridStyle(animation: .easeInOut(duration: 0.5))\n```\n\n### Scroll Behaviour\n\n**Embed in ScrollView & Indicators option**\n\n```swift\nScrollView(showsIndicators: true) {\n  WaterfallGrid(rectangles, content: RectangleView.init)\n}\n```\n\n**Horizontal Scroll Direction**\n\n```swift\nScrollView(.horizontal) {\n  WaterfallGrid(rectangles, content: RectangleView.init)\n  .scrollOptions(direction: .horizontal)\n}\n```\n\u003Cp align=\"center\">\n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fanimation4.gif\" alt=\"Animation Demo 4\"\u002F>\n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fanimation5.gif\" alt=\"Animation Demo 5\"\u002F>\n\u003C\u002Fp>\n\n### A Complete Example\n\n```swift\nScrollView(.horizontal, showsIndicators: false) {\n  WaterfallGrid(cards) { card in\n    CardView(card: card)\n  }\n  .gridStyle(\n    columnsInPortrait: 2,\n    columnsInLandscape: 3,\n    spacing: 8,\n    animation: .easeInOut(duration: 0.5)\n  )\n  .scrollOptions(direction: .horizontal)\n  .padding(EdgeInsets(top: 16, leading: 8, bottom: 16, trailing: 8))\n}\n```\n\n\n## Sample App\nExplore the `WaterfallGridSample` app for some more detailed and interactive examples.\n\n\u003Cp align=\"center\">\n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fanimation1.gif\" alt=\"Animation Demo 1\" width=\"250\"\u002F> \n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fanimation2.gif\" alt=\"Animation Demo 2\" width=\"250\"\u002F> \n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fanimation3.gif\" alt=\"Animation Demo 3\" width=\"250\"\u002F>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fdemo3.png\" alt=\"Image Demo 3\"\u002F>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n\t\u003Cimg src=\"https:\u002F\u002Fpaololeonardi.github.io\u002Fwaterfallgrid\u002Fresources\u002Fdemo2.png\" alt=\"Image Demo 2\"\u002F>\n\u003C\u002Fp>\n\n## Installation\n\n### Swift Package Manager\n\n**App dependency**\n\nselect File > Swift Packages > Add Package Dependency and enter the repository URL ([Adding Package Dependencies to Your App](https:\u002F\u002Fdeveloper.apple.com\u002Fdocumentation\u002Fxcode\u002Fadding_package_dependencies_to_your_app))\n\n**Package dependency**\n\nAdd it as a dependency within your `Package.swift` manifest:\n\n```swift\ndependencies: [\n  .package(url: \"https:\u002F\u002Fgithub.com\u002Fpaololeonardi\u002FWaterfallGrid.git\", from: \"1.1.0\")\n]\n```\n\n### CocoaPods\n\nYou can install `WaterfallGrid` via CocoaPods by adding the following line to your `Podfile`:\n\n```ruby\npod 'WaterfallGrid', '~> 1.1.0'\n```\n\nRun the `pod install` command to download the library\nand integrate it into your Xcode project.\n\n## Migration Guides\n\n- [WaterfallGrid 1.0.0 Migration Guide](https:\u002F\u002Fgithub.com\u002Fpaololeonardi\u002FWaterfallGrid\u002Fwiki\u002FWaterfallGrid-1.0.0-Migration-Guide)\n\n## Versioning\n\nFor the versions available, see the [releases on this repository](https:\u002F\u002Fgithub.com\u002Fpaololeonardi\u002FWaterfallGrid\u002Freleases). \n\n## Contributing\n\nContributions are more than welcome. Please create a GitHub issue before submitting a pull request to plan and discuss implementation.\n\n## Author\n* [Paolo Leonardi](https:\u002F\u002Fgithub.com\u002Fpaololeonardi) ([@paololeonardi](https:\u002F\u002Ftwitter.com\u002Fpaololeonardi))\n\n## Credits\nWaterfallGrid was inspired by the following projects:\n\n* QGrid - https:\u002F\u002Fgithub.com\u002FQ-Mobile\u002FQGrid\n* Grid - https:\u002F\u002Fgithub.com\u002FSwiftUIExtensions\u002FGrid\n* The SwiftUI Lab - https:\u002F\u002Fswiftui-lab.com\n\n## License\n\nWaterfallGrid is available under the MIT license. See the [LICENSE](LICENSE) file for more info.\n\n","WaterfallGrid 是一个用于 SwiftUI 的瀑布流布局视图组件。它支持不规则的内容网格布局，可根据设备方向自定义列数，并允许用户调整间距和网格填充。此外，该组件还支持水平或垂直滚动方向以及动画更新项目。WaterfallGrid 适用于需要展示大量图片或卡片信息的 iOS、macOS、tvOS 和 watchOS 应用场景中，特别是在电商、社交网络等需要美观且高效展示多样化内容的应用里。通过简单的初始化设置及样式定制，开发者可以轻松地将这一功能集成到自己的 SwiftUI 项目中，提升用户体验。","2026-06-11 03:10:29","top_language"]