如何在 Xcode 中使用 Swift 为每个循环实现滚动视图？

Question

我想为我正在构建的应用程序创建一个滚动视图，但也为滚动视图中的每个循环使用一个循环，这样我就不必多次复制和粘贴相同的代码。 这是我希望它看起来如何的图像。

我创建了一组图像数据：

let categoryImages: [UIImage] = [UIImage(named: "Guitar Camp - Small")!,UIImage(named: "Space travel - Small")!,UIImage(named: "Summer night - Small")!,UIImage(named: "Awakening  - Small")!,UIImage(named: "Space travel - Small")!,UIImage(named: "Lullaby - Small")!,UIImage(named: "Guitar Camp - Small")!,UIImage(named: "Space travel - Small")! ]

这是我的滚动视图代码：

ScrollView {
                VStack {
                    HStack{
                        ForEach(categoryImages.indices) { index in
                            Image("\(categoryImages[index])")
                                .cornerRadius(20.0)
                            Spacer()
                            
                        }
                        .padding()
                        .padding()
                    }
                }
            }
            .padding(.top, 175.0)

Answer 1

在这种情况下，您可以使用LazyVGrid{} + ForEach{} ，因为每行和每列都包含不同的数据。

此图像下方是一个可运行的示例代码。 你可以试试看。

struct ScrollSample: View {
  let musics = [
    Music(albumImage: "Swift", albumGen: "Guitar", songs: "7 songs"),
    Music(albumImage: "Swift", albumGen: "Rock", songs: "6 songs"),
    Music(albumImage: "Swift", albumGen: "Guitar", songs: "1 songs"),
    Music(albumImage: "Swift", albumGen: "Band", songs: "12 songs"),
    Music(albumImage: "Swift", albumGen: "Country", songs: "5 songs"),
    Music(albumImage: "Swift", albumGen: "Pop", songs: "1 songs"),
    Music(albumImage: "Swift", albumGen: "Hiphop", songs: "9 songs"),
    Music(albumImage: "Swift", albumGen: "Rock", songs: "15 songs"),
    Music(albumImage: "Swift", albumGen: "Anime", songs: "2 songs"),
    Music(albumImage: "Swift", albumGen: "Classic", songs: "8 songs")
]
  var body: some View {
    ZStack {
        LinearGradient(colors: [.red, .blue], startPoint: .topLeading, endPoint: .bottomTrailing)
            .edgesIgnoringSafeArea(.all)
        ScrollView {
            LazyVGrid (columns: [GridItem(.fixed(180)), GridItem(.fixed(180))]) {
                ForEach(musics) { sub in
                    VStack(alignment: .leading) {
                        Image(sub.albumImage)
                            .resizable()
                            .frame(width: 120, height: 120)
                            .mask(RoundedRectangle(cornerRadius: 20))
                        Text(sub.albumGen)
                            .fontWeight(.bold)
                            .foregroundColor(.white)
                        Text(sub.songs)
                            .foregroundColor(.white)
                    }
                    
                }
            }
        }
    }
  }
}
struct Music: Identifiable {
  var id = UUID()
  var albumImage: String
  var albumGen: String
  var songs: String
}