ios – Find out how to deal with animations of a number of Buttons on Checklist row in SwiftUI?

I’ve an odd animation conduct when utilizing a number of Buttons inside HStack inside Checklist. Initially, I discovered data that I would like to make use of some button type apart from .computerized for each buttons to work correctly in a single row. That appeared to work nice, till I needed so as to add animation to these buttons. I Wish to create two buttons on either side 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 {
            Checklist {
                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 surprisingly behaving animations:

After I take away button type modifier (.buttonStyle(.borderless)) animations are higher, but nonetheless not ultimate. There may be animation for transition of second button when it is supposed to cover, however it seems some instances with animation and different instances with out it. Above all, it this example each button actions are triggered concurrently:

The very best answer I discovered is to switch buttons with .onTapGesture modifiers:

struct TestView: View {
    @State
    personal var flag1 = true
    @State
    personal var flag2 = false

    var physique: some View {
        NavigationStack {
            Checklist {
                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 unfastened on buttons formatting and animation of second button showing remains to be engaged on random. So, listed below are my questions:

• Is there a approach to have 2 Buttons on one Checklist row that does not have issues with animations?
• Why showing transition animation for second button works on random (in instances after I use .buttonStyle(.borderless) or utilizing .onTapGesture?
• Do I unfastened a lot utilizing .onTapGesture as a substitute of Button and the way can I format element in a means it appears like (and keep that means) regular Button?