SwiftUI搭建瀑布流-交错网格

立即下载用AI写一个

发布时间：2022-08-22

3人 | 浏览：2557次 | 收藏 |

技术：SwiftUI、SwiftUI3.0、瀑布流、交错网络、网格

运行环境：SwiftUI3.0 + Xcode13.4.1 + MacOS12.5 + iPhone Simulator iPhone 13 Pro Max

概述

使用SwiftUI搭建一个做一个瀑布流-交错网格

详细

### 一、运行效果
![请添加图片描述](https://img-blog.csdnimg.cn/e48628d388544927bea18570203a32b7.gif)

### 二、项目结构图
![在这里插入图片描述](https://img-blog.csdnimg.cn/a0903b4484074c65803ce98cf46607f7.png)

### 三、程序实现 - 过程
>思路: 
1.创建主窗口
2.再瀑布流-交错网格页面
3.添加模型数据
4.添加一个测试瀑布流-交错网格的加减按钮

#### 1.创建一个项目命名为 StaggeredGrid
![在这里插入图片描述](https://img-blog.csdnimg.cn/62c877296f7c4a448a44407c45550902.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/178af2b695bd415a9dd3ac67cd6ca3fc.png)

#### 1.1.引入资源文件
> 随机找十张图片即可
![在这里插入图片描述](https://img-blog.csdnimg.cn/f728bb7d2fd942749ed0651f92e6b47f.png)

#### 2. 创建一个虚拟文件`New Group` 命名为 `View`
![在这里插入图片描述](https://img-blog.csdnimg.cn/33300d854c294656b7c83e49e86862d1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/69401f447d9c4f6babab31767a738b8b.png)
#### 3. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`Home`
![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/d9d4b0274e4a4bada4bd6490e4cf56b9.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/f96694d6c99b48f2b5302c1f8fdb12d7.png)

#### 4. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`StaggeredGrid`
![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/d9d4b0274e4a4bada4bd6490e4cf56b9.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/e48783a0d94246aea99192f89c80b357.png)

#### 5. 创建一个虚拟文件`New Group` 命名为 `Model`
![在这里插入图片描述](https://img-blog.csdnimg.cn/33300d854c294656b7c83e49e86862d1.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/c2e3136495134cffbcbcb4eb3dcaef18.png)

#### 6. 创建一个文件`New File`  选择`SwiftUI View`类型 命名为`Post` ,并且删除预览视图 改造成一个模型
![在这里插入图片描述](https://img-blog.csdnimg.cn/37bf7ae00271453b9ef55fbd7b89b78f.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/d9d4b0274e4a4bada4bd6490e4cf56b9.png)

![在这里插入图片描述](https://img-blog.csdnimg.cn/353bfc066378495282d1fcb0684e30e8.png)

### Code

#### ContentView - 主窗口
> 主要是展示主窗口`Home`

```swift
//
//  ContentView.swift
//  Shared
//
//  Created by 李宇鸿 on 2022/8/13.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Home()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

```

#### Home - 主页
> 思路
> 1. 创建导航
> 2. 创建瀑布流布局-交错网格
> 3. 创建数据
> 4. 创建瀑布流展示的View

```swift
//
//  Home.swift
//  StaggeredGrid (iOS)
//
//  Created by 李宇鸿 on 2022/8/13.
//

import SwiftUI

struct Home: View {
    @State var posts : [Post] = []
    
    // To show dynamic
    @State var columns : Int = 2
    
    // Smooth Hero Effect
    @Namespace var animation
    
    var body: some View {
        // 创建导航
        NavigationView{
            // 设置中心内容
            StaggeredGrid(columns:columns, list:posts, content: { post in
                // 在这里创建帖子卡片
                PostCard(post: post)
                    .matchedGeometryEffect(id: post.id, in: animation)
                    .onAppear{
                        print(post.imageURL)
                    }
            })
            .padding(.horizontal)
                .navigationTitle("Staggered Grid")
                .toolbar{
                    ToolbarItem(placement: .navigationBarTrailing) {
                        
                        Button{
                            columns += 1
                        }label: {
                            Image(systemName: "plus")
                        }
                    }
                    ToolbarItem(placement: .navigationBarTrailing) {
                        
                        Button{
                            columns = max(columns - 1,1)
                        }label: {
                            Image(systemName: "minus")
                        }
                    }
                }
            // 动画……
                .animation(.easeInOut, value: columns)
            
        }
        // 出现的时候
        .onAppear{
            for index in 1...10 {
                posts.append(Post(imageURL: "post\(index)"))
            }
        }
    }
}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

// 因为我们声明T为可识别的…
// 所以我们需要传递可识别集合/数组…
struct PostCard : View {
    var post : Post
    var body: some View{
        Image(post.imageURL)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .cornerRadius(10)     
    }
}
```

#### StaggeredGrid.swift - 瀑布流-交错网格布局
> 主要是做 瀑布流-交错网格
> 思路
> 1. 提供外界初始化操作 - 尽量提供额外多个属性 让外界调用 - 比如 : 网格的列数、间距、是否显示滚动条、数据的数量、网格的展示View
> 2. 添加演示+-的瀑布流-交错网格效果演示
> 3. 展示瀑布流-交错网格内容 - 优化瀑布流-交错网格加载
>

```swift

//
//  StaggeredGrid.swift
//  StaggeredGrid (iOS)
//
//  Created by 李宇鸿 on 2022/8/13.
//

import SwiftUI

// 自定义视图构建器…… Content 外界传递的视图

// T -> 是用来保存可识别的数据集合… 外界传递的列表模型数据

struct StaggeredGrid<Content: View, T : Identifiable>: View where T: Hashable {
    
    // 它将从集合中返回每个对象来构建视图…
    var content: (T) -> Content
    
    var list : [T]
    
    // 列……
    var columns : Int
    
    // 属性
    var showsIndicators : Bool
    var spacing : CGFloat
    
    
    // 提供构造函数的闭包
    init(columns: Int, showsIndicators: Bool = false,spacing : CGFloat = 10, list:[T], @ViewBuilder content: @escaping(T)->Content){
        self.content = content
        self.list = list
        self.spacing = spacing
        self.showsIndicators = showsIndicators
        self.columns = columns
    }
    
    
    // 交错网格功能…
    func setUpList()->[[T]]{
        
        // 创建列的空子数组计数…
        var gridArray : [[T]] = Array(repeating: [], count: columns)
        
        // 用于Vstack导向视图的拆分数组…
        var currentIndex : Int = 0
        for object in list{
            gridArray[currentIndex].append(object)
            // increasing index count
            // and resetting fi overbounds the columns count...
            //增加索引计数
            //和重置fi越界列计数…
            if currentIndex == (columns - 1){
                currentIndex = 0
            }
            else{
                currentIndex += 1
            }
        }
        return gridArray
    }
    
    
    var body: some View {

ScrollView(.vertical,showsIndicators: showsIndicators)
        {
            HStack(alignment:.top){
                ForEach(setUpList(),id:\.self){ columnsData in
                    
                    // 优化使用LazyStack…
                    LazyVStack(spacing:spacing){
                        ForEach(columnsData){ object in
                            content(object)
                    }
                    
                   
                    }
                    
                }
            }
            //只有垂直填充…
            //水平填充将是用户可选的…
            .padding(.vertical)
        }
        
    }
}

struct StaggeredGrid_Previews: PreviewProvider {
    static var previews: some View {
//        StaggeredGrid()
        // 预览的是主窗口页面
        ContentView()
    }
}

```

#### Post - 模型
```swift
import SwiftUI

struct Post: Identifiable,Hashable {
    var id = UUID().uuidString
    var imageURL: String
    
}

```

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

SwiftUI搭建瀑布流-交错网格

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子