HomeiOS Developmentios - Learn how to deal with animations of a number of...

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


I’ve an odd animation habits when utilizing a number of Buttons 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:

Bad animation example

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:

Good animation example

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 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 part in a method it seems like (and keep that method) regular Button?
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments