iOS Development

ios – Tips on how to deal with animations of a number of Buttons on Record row in SwiftUI?

Spread the love


I’ve a wierd animation conduct when utilizing a number of Buttons inside HStack inside Record. To start with, I discovered data that I want to make use of some button model apart from .computerized 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 Need to create two buttons on all sides of the row, however second one is proven provided that situation is met, which will 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 surprisingly behaving animations:

Bad animation example

Once I take away button model modifier (.buttonStyle(.borderless)) animations are higher, but nonetheless not preferrred. There’s animation for transition of second button when it is supposed to cover, nevertheless it seems some instances with animation and different instances with out it. Above all, it this case each button actions are triggered concurrently:

Good animation example

The very best resolution 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 below are my questions:

  • Is there a method to have 2 Buttons on one Record 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 of Button and the way can I format element in a means it appears like (and keep that means) regular Button?

Leave a Reply

Your email address will not be published. Required fields are marked *