I’ve an odd animation habits when utilizing a number of Button
s inside HStack
inside Record
. Initially, I discovered data that I would like to make use of some button model aside from .automated
for each buttons to work correctly in a single row. That appeared to work nice, till I wished so as to add animation to these buttons. I Wish to create two buttons on both sides of the row, however second one is proven provided that situation is met, which could be achieved by clicking the primary one. Easy instance explaining that appears like that:
struct TestView: View {
@State
personal var flag1 = true
@State
personal var flag2 = false
var physique: some View {
NavigationStack {
Record {
HStack {
Button {
withAnimation {
flag1.toggle()
}
} label: {
Picture(systemName: flag1 ? "checkmark.circle" : "circle")
}
Textual content("Some textual content")
if flag1 {
Spacer()
Button {
withAnimation {
flag2.toggle()
}
} label: {
Picture(systemName: flag2 ? "checkmark.circle" : "circle")
}
}
}
.buttonStyle(.borderless)
}
}
}
}
Code as above outcomes on this unusually behaving animations:
Once I take away button model modifier (.buttonStyle(.borderless)
) animations are higher, but nonetheless not excellent. There may be animation for transition of second button when it is supposed to cover, but it surely seems some occasions with animation and different occasions with out it. Above all, it this case each button actions are triggered concurrently:
The most effective answer I discovered is to exchange buttons with .onTapGesture
modifiers:
struct TestView: View {
@State
personal var flag1 = true
@State
personal var flag2 = false
var physique: some View {
NavigationStack {
Record {
HStack {
Picture(systemName: flag1 ? "checkmark.circle" : "circle")
.onTapGesture {
withAnimation {
flag1.toggle()
}
}
Textual content("Some textual content")
if flag1 {
Spacer()
Picture(systemName: flag2 ? "checkmark.circle" : "circle")
.onTapGesture {
withAnimation {
flag2.toggle()
}
}
}
}
}
}
}
}
But utilizing these I free on buttons formatting and animation of second button showing continues to be engaged on random. So, listed here are my questions:
- Is there a strategy to have 2
Button
s on oneRecord
row that does not have issues with animations? - Why showing transition animation for second button works on random (in circumstances once I use
.buttonStyle(.borderless)
or utilizing.onTapGesture
? - Do I free a lot utilizing
.onTapGesture
as a substitute ofButton
and the way can I format part in a method it seems like (and keep that method) regularButton
?