SwiftUI, как сделать отображаемую строку и анимированный текст видимым?

Question

Код ниже дает мне это:

Нажатие на текст или стрелку поворачивает стрелку и показывает элементы. Однако я не могу нажать на пустое пространство между текстом и изображением. Как я могу коснуться области пространства, чтобы это работало? Кроме того, текст показывает / скрывает элементы мгновенно. Есть ли способ переключить состояние 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")
                     }
                }
     }
}

Answer 1

В зависимости от ваших потребностей вы можете выбрать, какой способ перехода двух анимированных элементов пользовательского интерфейса может лучше подходить для ваших потребностей.

1) Чтобы добавить анимацию через изменения состояния вы просто оберните self.showList.toggle() в withAnimation() и, чтобы сделать ряд отверстий или HStack tappable , вы рассматриваете его как форму содержимого Rectangle, проверьте этот код.

Это оживляет both вращение текста и стрелки вместе at the same moment с плавным контролируемым визуальным эффектом:

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) Для анимации видимости текста after анимация вращения стрелок через transition, спасибо @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)))
            }
        }
    }
}