Я пытался воссоздать вид карты, который можно увидеть во многих приложениях iOS.
Это вид карты
struct CardView<Content: View>: View {
let content: (DisplayMode) -> Content
@State var displayMode: DisplayMode = DisplayMode.fullSize
@State var currentOffset: CGFloat = 25
@Environment(\.colorScheme) var colorScheme
@State var lastOffset: CGFloat = 25
var body: some View {
VStack(spacing: 5) {
Rectangle()
.fill(colorScheme == .dark ? Color.lightBackground.opacity(0.65) : Color.darkBackground.opacity(0.65))
.frame(minHeight: 0, maxHeight: 5, alignment: .top)
.cornerRadius(25)
.padding([.leading, .trailing], 170)
.padding(.top, 10)
content(displayMode)
.padding(.top, 0)
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .top)
.background(colorScheme == .dark ? Color.darkBackground : Color.lightBackground)
.cornerRadius(25, corners: [.topLeft, .topRight])
.edgesIgnoringSafeArea(.bottom)
.offset(x: 0, y: currentOffset)
.shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 0)
.gesture(DragGesture(minimumDistance: 5).onChanged { value in
currentOffset = value.location.y
}.onEnded { value in
displayMode = displayMode(for: value.location.y)
currentOffset = displayMode.rawValue
}).animation(.spring(response: 0.55, dampingFraction: 0.825, blendDuration: 0))
}
private func displayMode(for height: CGFloat) -> DisplayMode {
if height < 250 {
return .fullSize
} else if height < 500 {
return .thirdSize
} else {
return .tabSize
}
}
}
Как видите, я прикрепил gesture()
модификатор для вида VStack
. В этом a дана функция DragGesture, в которой я изменяю смещение для представления и когда жест завершил перемещение представления в предопределенное место. Посмотреть. Вид переместится в это место. Как видно из GIF ниже.
https://media.giphy.com/media/XCrc9KlJ9VLUQEd2pJ/giphy.gif
Кто-нибудь знает, что нужно исправить эту проблему?
Спасибо