Ich habe versucht . Während dies die Hierarchie ordnungsgemäß festlegt, blinkt jedes Mal, wenn ein Element ausgewählt wird, und es gibt kein Animieren des Elements von seiner Gitterposition in die Mitte. < /P>
Code: Select all
struct SwiftUIView: View {
let colors: [Color] = [.red, .blue, .green, .yellow, .purple, .orange]
let columns = [GridItem(.flexible()), GridItem(.flexible())]
@State private var selectedItem: Int? = nil
@State private var selectedItemPosition: CGRect? = nil
var body: some View {
GeometryReader { screenGeometry in
LazyVGrid(columns: columns, spacing: 20) {
ForEach(colors.indices, id: \.self) { index in
GeometryReader { geometry in
let isSelected = selectedItem == index
Rectangle()
.fill(colors[index])
.cornerRadius(12)
.frame(width: 150, height: 200)
.shadow(radius: isSelected ? 10 : 0)
.onTapGesture {
withAnimation(.spring(response: 0.5, dampingFraction: 0.7)) {
if isSelected {
selectedItem = nil
selectedItemPosition = nil
} else {
selectedItem = index
selectedItemPosition = geometry.frame(in: .global)
}
}
}
.offset(
x: isSelected ? (screenGeometry.size.width / 2 - geometry.frame(in: .global).midX) : 0,
y: isSelected ? (screenGeometry.size.height / 2 - geometry.frame(in: .global).midY) : 0
)
}
.frame(height: 200) // Needed to ensure GeometryReader does not shrink
}
}
.padding()
}
}
}