I have been working on a list that uses .matchedGeometryEffect to transition between a cardView and popup modal to display a detailView. I can get the effect to work and make sure that I am opening the card that is clicked on but now I am having trouble adding data to the array that generates the cards and the detail view. I may have been staring at it too long because now my mind is muddled. Would love if anyone can suggest how to pass data like [id: 0, name:“card1”] back and forth to the different views.
import SwiftUI
struct RectView: View {
@Namespace var namespace
@State var selected: Int?
var body: some View {
ZStack {
VStack {
Text("Resort List")
ScrollView(.horizontal, showsIndicators: false) {
RectList(namespace: namespace, selected: $selected)
}
.opacity(selected == nil ? 1 : 0)
} // << or place here opacity modifier here
if let id = selected {
ZStack {
Color.purple
.cornerRadius(8)
Text("item number \(id)")
}
.frame(width: 400, height: 600)
.shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 0)
.matchedGeometryEffect(id: id, in: namespace)
.onTapGesture {
withAnimation{
selected = nil
}
}
}
}
// .animation(.easeInOut(duration: 1))
}
}
// MARK: Working cards
struct RectList: View {
let namespace: Namespace.ID
@Binding var selected: Int?
var resortArray: [ResortData] = resort
var body: some View {
LazyHStack {
ForEach(0..<resorts.count) { item in
if item == selected {
Color.clear // placeholder to avoid duplicate match id run-time warning
.frame(width: 150, height: 200)
} else {
ZStack {
Color.white
.cornerRadius(8)
VStack{
Text("item number \(item)")
}
}
.frame(width: 150, height: 200)
.shadow(color: Color.black.opacity(0.2), radius: 5, x: 0, y: 0)
.matchedGeometryEffect(id: item, in: namespace)
.onTapGesture {
withAnimation {
selected = item
}
}
} // End if
} // End for Each
}
} // End of View
}