Ios SwiftUI如何使可点击行和动画文本可见性？

下面的代码告诉我：

点击文本或箭头可旋转箭头并显示项目。但是，我不能在文本和图像之间的空白处点击。我如何点击空间区域使其工作？此外，文本会即时显示/隐藏项目。是否有办法仅在动画完成后切换showList状态

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")
                     }
                }
     }
}

---

根据您的需要，您可以选择哪种方式转换这两个动画UI元素更适合您的需要

1）要通过状态更改添加动画只需将

self.showList.toggle（）

包装在

withAnimation（）

中，并且要使孔行或

HStack

可点击，将其视为矩形内容形状，请检查此代码

这将同时对

文本和箭头旋转
进行动画制作，具有平滑的受控视觉效果：

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")
                    }
                }
     }
}

这应该是一个示例输出：




2）要在
箭头旋转动画之后通过

转换设置文本可见性的动画，请感谢@eduardo对此给出了另一种观点：

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)))
            }
        }
    }
}