ios - 在过渡期间 View 不更新

Question

我需要您的帮助来了解我遇到的问题。我无法让 View 在过渡动画之前重绘其主体。看看这个简单的例子:

import SwiftUI

struct ContentView: View {
    @State private var condition = true
    @State private var fgColor = Color.black

    var body: some View {
        VStack {
            Group {
                if condition {
                    Text("Hello")
                        .foregroundColor(fgColor)
                } else {
                    Text("World")
                }
            }
            .transition(.slide)
            .animation(.easeOut(duration: 3))

            Button("TAP") {
                fgColor = .red
                condition.toggle()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我对这个例子的期望是:当我点击按钮时， View 会再次创建它的主体，文本“Hello”变成红色。现在， View 再次创建了它的主体，并且发生了转换。相反，SwiftUI 似乎以某种方式合并了两个状态更改，并且只考虑了第二个。结果是发生了转换，但文本“Hello”不会改变它的颜色。

如何在 SwiftUI 中管理这样的情况？有没有办法告诉框架分别更新两个状态变化？谢谢你。
编辑 对于@Asperi:
我试过你的代码，但它不起作用。结果还是一样。这是您的代码的完整示例:

import SwiftUI

struct ContentView: View {
    @State private var condition = true
    @State private var fgColor = Color.black

    var body: some View {
        VStack {
            VStack {
                if condition {
                    Text("Hello")
                        .foregroundColor(fgColor)
                                .transition(.slide)
                } else {
                    Text("World")
                        .transition(.slide)
                }
            }
            .animation(.easeOut(duration: 3))

            Button("TAP") {
                fgColor = .red
                condition.toggle()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这就是结果(在 iPhone 12 Mini iOS 14.1 上):

Answer 1

仅仅使用修饰符是不可能做你想做的事的。
因为当改变 View 状态时，带有Text("Hello")的代码块没有被调用，这就是它随着你指定的转换开始消失的原因(因为 View 层次结构中缺少这个 View )
所以最好的方法是实现你的自定义转换。首先，您需要创建一个具有所需行为的 ViewModifier:

struct ForegroundColorModifier: ViewModifier {
    var foregroundColor: Color
    
    func body(content: Content) -> some View {
        content
            // for some reason foregroundColor for text is not animatable by itself, but can animate with colorMultiply
            .foregroundColor(.white)
            .colorMultiply(foregroundColor)
    }
}

然后使用这个修饰符创建一个转换 - 这里你需要为两种状态指定修饰符:

extension AnyTransition {
    static func foregroundColor(active: Color, identity: Color) -> AnyTransition {
        AnyTransition.modifier(
            active: ForegroundColorModifier(foregroundColor: active),
            identity: ForegroundColorModifier(foregroundColor: identity)
        )
    }
}

将颜色过渡与幻灯片一相结合:

.transition(
    AnyTransition.slide.combined(
        with: .foregroundColor(
            active: .red,
            identity: .black
        )
    )
)

最后，如果您只需要在消失时更改颜色，请使用不对称过渡:

.transition(
    .asymmetric(
        insertion: .slide,
        removal: AnyTransition.slide.combined(
            with: .foregroundColor(
                active: .red,
                identity: .black
            )
        )
    )
)

完整代码:

struct ContentView: View {
    @State private var condition = true
    
    var body: some View {
        VStack {
            Group {
                if condition {
                    Text("Hello")
                    
                } else {
                    Text("World")
                }
            }
            .transition(
                .asymmetric(
                    insertion: .slide,
                    removal: AnyTransition.slide.combined(
                        with: .foregroundColor(
                            active: .red,
                            identity: .black
                        )
                    )
                )
            )
            
            Button("TAP") {
                withAnimation(.easeOut(duration: 3)) {
                    condition.toggle()
                }
            }
        }
    }
}

我不确定为什么要指定 .animation在 .transition 之后在这种情况下不起作用，但在 withAnimation 内部更改状态 block 按预期工作