//
// SwiftUIView.swift
// DemoApp
//
// Created by TEEMO on 2024/10/29.
//
// Image(systemName: "globe")
// .imageScale(.large)
// .foregroundStyle(.tint)
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 {
@State var currentIndex = 0
@GestureState var dragOffset: CGFloat = 0
var body: some View {
GeometryReader { outerView in
HStack(spacing: 0) {
ForEach(imageModels.indices, id: \.self) { index in
GeometryReader { innerView in
CardView(
image: imageModels[index].image,
imageName: imageModels[index].imageName
)
}
.padding(.horizontal)
.frame(
width: outerView.size.width,
height: outerView.size.height
)
}
.padding(.horizontal, 20)
.frame(
width: outerView.size.width,
height: outerView.size.height
)
}
.frame(
width: outerView.size.width,
height: outerView.size.height,
alignment: .leading
)
.offset(
x: -CGFloat(self.currentIndex) * outerView.size.width
)
.offset(x: self.dragOffset)
.gesture(
DragGesture()
.updating(
self.$dragOffset,
body: { value, state, transaction in
state = value.translation.width
}
)
.onEnded({ value in
let threshold = outerView.size.width * 0.65
var newIndex = Int(-value.translation.width / threshold)+self.currentIndex
newIndex = min(max(newIndex, 0), imageModels.count - 1)
self.currentIndex = newIndex
})
)
}
}
}
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()
}
已经可以拖拽了
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。