Post not yet marked as solved
Post marked as unsolved with 0 replies, 1,945 views
Explanation
I'm trying to animate the contents of a view off the screen while animating new contents in from the other side (see playground code and select "Next Question" while running the view). Most of the views behave as expected but the LazyVGrid leaves the screen with animation but doesn't enter the screen with the rest of the animation; instead, it immediately appears at the final location while the rest of the views animate in.
In the final code, I also change the question text and the possible answers in the LazyVGrid.
Playground Code
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
var body: some View {
VStack (alignment: .leading) {
Text("History Questionaire").font(.title).padding([.top, .leading]).foregroundColor(.white)
QuestionView()
.transition(
.asymmetric(
insertion: .move(edge: .trailing),
removal: .move(edge: .leading)
)
)
}
.background(Color(.lightGray))
.cornerRadius(8.0)
.padding()
}
}
struct QuestionView: View {
@State var questionViewID = 1
var body: some View {
VStack (alignment: .leading){
Text("Question").font(.title2).padding(.bottom)
VStack (alignment: .leading) {
Text("Have you had a doctor appointment this year?").font(.body).foregroundColor(Color(.darkGray))
// Question: How do I get the items in the grid to animate in with the rest of the items in the VStack?
LazyVGrid(columns: [GridItem(.adaptive(minimum: 150, maximum: 300))], alignment: .leading, content: {
Text("Yes")
.padding()
.background(Color.white)
.cornerRadius(4.0)
Text("No")
.padding()
.background(Color.white)
.cornerRadius(4.0)
})
}
.padding(.bottom)
HStack {
Spacer()
Button(action: {
withAnimation(Animation.easeIn(duration: 2)) {
questionViewID += 1
}
}, label: {
Text("Next Question")
.font(.body)
.fontWeight(.bold)
.foregroundColor(.blue)
})
Spacer()
}
.padding(.vertical)
}
.id(questionViewID)
.padding()
}
}
PlaygroundPage.current.setLiveView(ContentView())
Posted
by
koedal.
Last updated
koedal.
.