swiftUI中，水平滚动图片

工具版本：

xcode: 12.5.1

swift: 5.4.2

代码示例：

import SwiftUI

struct CategoryCell: View {
    // 分类名称
    let categoryName: String
    
    // landmarks分类后的集合
    let landmarks: [LandmarkTest]
    
    var body: some View {
        VStack(alignment: .leading){
            Text(categoryName)
            // 滚动组件; 数据可能为空需要加！强制不为空
            // 数据水平排列： .horizontal
            // 去除滚动条： showsIndicators: false
            ScrollView(.horizontal,  showsIndicators: false){
                // 排列元素的间隔： spacning
                HStack(spacing: 15){
                    ForEach(landmarks) { landmark in
                        VStack(alignment: .leading){
                            Image(landmark.imageName)
                                .resizable() // 拉伸图片
                                .frame(width: 155, height: 155) // 定义宽高
                                .cornerRadius(5) // 设置圆角
                            Text(landmark.name)
                                .font(.caption)
                        }
                    }
                }
            }
        }
    }
}

struct CategoryCell_Previews: PreviewProvider {
    static var previews: some View {
        CategoryCell(
            categoryName: landmarksText[0].category,
            // Array转换为数组
            landmarks: Array(landmarksText.prefix(4))
        )
    }
}


// 数据对象定义
import SwiftUI
import CoreLocation
struct LandmarkTest: Identifiable {
    // 唯一ID
    var id: Int
    // 分类
    var category: String
    // 名称
    var name: String
    // 图片名称
    var imageName: String
}

// 构造的数据； 
// 具体对应的imageName需要自行查找图片放到Assets.xcassets中，然后在定义对应的图片名称
let landmarksText = [
    LandmarkTest(id: 1, category: "古迹", name: "天安门", imageName: "tiananmen"),
    LandmarkTest(id: 2, category: "现代建筑", name: "东方明珠", imageName: "dongfangmingzhu"),
    LandmarkTest(id: 3, category: "现代建筑", name: "广州塔", imageName: "guangzhouta"),
    LandmarkTest(id: 4, category: "现代建筑", name: "金融中心", imageName: "jinrongzhongxin"),
    LandmarkTest(id: 5, category: "现代建筑", name: "天际线", imageName: "tianjixian"),
    LandmarkTest(id: 6, category: "自然景观", name: "九寨沟", imageName: "jiuzhaigou")
]

效果图：（非自动滚动，需滑动）