xcode - 简单的 SwiftUI 转换似乎不起作用

Question

我一直在尝试全面了解动画和过渡在 SwiftUI 中的工作原理。

我一整天都在尝试不同的过渡和动画，但我想要的一个过渡不起作用。我将首先展示代码，然后解释我想要什么样的转换。

struct Test: View {
    @State private var pressed = false // Controls whether the tower is shown or not.

    var body: some View {
        VStack {
            Button(pressed ? "Press me to hide tower" : "Press me to show tower") {  // Controls truth value of the "pressed" variable above.
                withAnimation(.easeInOut(duration: 5)) {  // I've set the duration to 5 because I want to see the animation in slow-motion.
                    self.pressed.toggle()  // Toggles truth value of "pressed" from true to false or vice-versa.
                }
            }

            if pressed {  // Displays the Tower when "pressed" is true.
                Tower()  // Tower struct is provided below.
            }
        }
    }
}

这是 Tower 结构:

struct Tower: View {
    var body: some View {
        VStack {
            Text("Level 3").transition(.move(edge: .leading))
            Text("Level 2")
            Text("Level 1").transition(.move(edge: .trailing))
        }
    }
}

我想要实现的过渡非常简单 - 我希望级别 3 从左侧飞入，级别 1 从右侧飞入，级别 2 淡入和淡出。然而，使用此代码，级别 1、级别 2 和级别 3 全部一起淡入淡出。由于某种原因，.move(edge: .trailing) 转换似乎不起作用。

问题是我绝对希望 Tower 结构和 Test 结构始终分开。
(我不想将 Tower 结构中的任何代码复制粘贴到 Test 结构中)

如果您可以向我展示如何使上层和下层从不同侧面飞入，请告诉我(如果您也可以提供代码示例，这将有很大帮助)。

Answer 1

Transition 是一个在 View 层次结构中呈现/删除 View 的引擎(如果指定了动画，则带有动画)。它直接应用于整个 View ，并且不会传递到 View 的 subview 中。因此，如果您尝试将 View 添加到没有自己的过渡的 View 层次结构中，它就会立即出现，如果有动画，则默认情况下会应用淡入/淡出过渡(同样，将 View 作为一个整体 em>)。

但是您想从外部转换 View 的内部结构。所以这是可能的解决方案。

使用 Xcode 11.4/iOS 13.4 测试(可以自己玩动画)

struct Test: View {
    @State private var pressed = false

    var body: some View {
        VStack {
            Button(pressed ? "Press me to hide tower" : "Press me to show tower") {
                self.pressed.toggle()
            }

            Tower(show: $pressed)
        }.animation(.easeInOut)
    }
}

struct Tower: View {
    @Binding var show: Bool
    var body: some View {
        VStack {
            if show {
                Text("Level 3").transition(.move(edge: .leading))
                Text("Level 2")
                Text("Level 1").transition(.move(edge: .trailing))
            }
        }
        .animation(.easeInOut)
    }
}