SwiftUI 如何制作可点击的行和动画文本可见性？

Question

The code below gives me this:

Tapping the text or arrow rotates the arrow and shows the items. However I can't tap in the blank space between the text and the image. How can I tap the space area for this to work? Also, the text shows/hides the items instantaneously. Is there a way to toggle the showList state only after the animation is complete?

public struct Picker: View {
     @State private var showList = false
     private var iconAngle: Double {
          return showList ? 90 : 0
     }
     private let prompt: String

     public init(promptLocalizationKey: String) {
          self.prompt = NSLocalizedString(promptLocalizationKey, comment: "")
     }

     public var body: some View {
          let tap = TapGesture()
          .onEnded { _ in
                self.showList.toggle()
          }

          return
                VStack {
                     HStack {
                          Text(prompt)
                          Spacer()
                          Image(systemName: "arrow.right.circle.fill")
                                .rotationEffect(.degrees(self.iconAngle))
                                .animation(.linear)
                     }.gesture(tap)
                     if showList {
                          Text("list item 1")
                          Text("list item 2")
                          Text("list item 3")
                     }
                }
     }
}

Answer 1

Depending on your needs you might choose which way of transitioning the two animated UI elements can be better suited for your needs.

1) To add an animation through your state changes you just wrap self.showList.toggle() within withAnimation() and to make the hole row or HStack tappable , you treat it as a Rectangle content shape, check this code out.

This animates both the text and arrow rotation together at the same moment with a smooth controlled visual effect:

public struct Picker: View {
     @State private var showList = false
     private var iconAngle: Double {
          return showList ? 90 : 0
     }
     private let prompt: String

     public init(promptLocalizationKey: String) {
          self.prompt = NSLocalizedString(promptLocalizationKey, comment: "")
     }

     public var body: some View {
          let tap = TapGesture()
          .onEnded { _ in
            withAnimation() {
                self.showList.toggle()
            }
          }

          return
                VStack {
                     HStack {
                          Text(prompt)
                          Spacer()
                          Image(systemName: "arrow.right.circle.fill")
                                .rotationEffect(.degrees(self.iconAngle))
                                .animation(.linear)
                     }
                     .contentShape(Rectangle())
                     .gesture(tap)

                    if showList {
                        Text("list item 1")
                        Text("list item 2")
                        Text("list item 3")
                    }
                }
     }
}

This should be a sample output:

2) To animate text visibility after arrow rotation animation through transition , thanks @eduardo for giving another viewpoint on this:

struct Picker: View {
    @State private var showList = false
    private var iconAngle: Double {
        return showList ? 90 : 0
    }
    private let prompt: String
    public init(promptLocalizationKey: String) {
        self.prompt = NSLocalizedString(promptLocalizationKey, comment: "")
    }
    public var body: some View {
        VStack {
            HStack {
                Text(prompt)
                Spacer()
                Image(systemName: "arrow.right.circle.fill")
                    .rotationEffect(.degrees(self.iconAngle))
                    .animation(.linear)
            }
            .contentShape(Rectangle())
            .gesture(TapGesture()
            .onEnded { _ in
                withAnimation {
                    self.showList.toggle()
                }
            })
            if showList {
                VStack {
                    Text("list item 1")
                    Text("list item 2")
                    Text("list item 3")
                }
                .transition(AnyTransition
                .opacity
                .animation(Animation.linear.delay(0.5)))
            }
        }
    }
}