錄屏2024-10-29 10.12.33.gif

https://juejin.cn/post/7090002599675920391

import SwiftUI
import Foundation
struct imageModel: Identifiable {
    var id = UUID()
    var image: String
    var imageName: String
}
let imageModels = [
    imageModel(image: "turtlerock", imageName: "Image - 1"),
    imageModel(image: "turtlerock", imageName: "Image - 2"),
    imageModel(image: "turtlerock", imageName: "Image - 3"),
    imageModel(image: "turtlerock", imageName: "Image - 4"),
    imageModel(image: "turtlerock", imageName: "Image - 5")
]
struct Banners: View {
    var body: some View {
        GeometryReader { outerView in
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .center) {
                    ForEach(imageModels.indices, id: \.self) { index in
                        GeometryReader { innerView in
                            CardView(
                                image: imageModels[index].image,
                                imageName: imageModels[index].imageName
                            )
                            
                        }
                        
                    }
                    .padding(.horizontal, 20)
                    .frame(
                        width: outerView.size.width,
                        height: outerView.size.height
                    )
                }
            }
            .frame(
                width: outerView.size.width,
                height: outerView.size.height,
                alignment: .leading
            )
        }
    }
}
struct CardView: View {
    let image: String
    let imageName: String
    
    var body: some View {
        ZStack {
            GeometryReader { geometry in
                Image(image)
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .cornerRadius(15)
                    .overlay(
                        Text(imageName)
                            .font(.system(.headline, design: .rounded))
                            .fontWeight(.heavy)
                            .padding(10)
                            .background(Color.white)
                            .padding([.bottom, .leading])
                            .opacity(1)
                            .frame(
                                minWidth: 0,
                                maxWidth: .infinity,
                                minHeight: 0,
                                maxHeight: .infinity,
                                alignment: .bottomLeading
                            )
                    )
            }
        }
    }
}
#Preview {
    Banners()
}