在过渡期间视图不更新

Question

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

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

我对这个例子的期望是：当我点击按钮时，视图会再次创建它的主体，并且文本“Hello”变成红色。现在，视图再次创建了它的主体，并且发生了转换。相反，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

只用修饰符是不可能做你想做的事的。

因为当更改视图状态时，带有Text("Hello") 的代码块不会被调用，这就是它开始随着您指定的转换而消失的原因（因为视图层次结构中缺少此视图）

因此，最好的方法是实现自定义过渡。首先，您需要创建一个具有所需行为的 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)
    }
}

然后使用这个修饰符创建一个Transition——这里你需要为两个状态指定修饰符：

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

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

Answer 2

这是一个可能的解决方案：

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

                withAnimation {
                    condition.toggle()
                }
            }
        }
    }
}

这里的想法是通过在withAnimation 内更改它来传播由condition 更改引起的过渡（与没有动画的前景颜色更改相比，这是延迟的）。

Answer 3

主要问题在于使用Group - 它不是一个容器，而是使用一些真正的容器并直接将转换应用于视图，例如

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

Answer 4

让你的代码工作的最简单和合乎逻辑的方法，在动画控制之前更新视图。

---

版本 1.0.0：

import SwiftUI

struct ContentView: View {
    
    @State private var condition = true
    @State private var fgColor = Color.black
    
    var body: some View {
        
        VStack(spacing: 40.0) {
            
            Group {
                
                if condition {
                    
                    Text("Hello")
                        .foregroundColor(fgColor)
                    
                }
                else {
                    
                    Text("World")
                }
                
            }
            .transition(.slide)
            .animation(.easeOut(duration: 3))
            
            
            Button("TAP") {
                
                fgColor = .red
                
                DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + DispatchTimeInterval.milliseconds(50)) { condition.toggle() }
                
            }
            
        }
    }
}

2.0.0 版：

import SwiftUI

struct ContentView: View {
    
    @State private var condition: Bool = true
    @State private var fgColor: Color = Color.green
    @State private var startTransition: Bool = Bool()
    
    var body: some View {
        
        VStack(spacing: 40.0) {
            
            Group {
                
                if condition {
                    
                    Text("Hello")
                        .foregroundColor(fgColor)
                    
                }
                else {
                    
                    Text("World")
                }
                
            }
            .transition(.slide)
            .animation(.easeOut(duration: 3))
            .onChange(of: startTransition) { _ in condition.toggle() }
            
            
            Button("TAP") {
                
                if fgColor == Color.red { fgColor = Color.green } else { fgColor = Color.red }
                
                startTransition.toggle()
                
            }
            
        }
    }
}

---

Answer 5

试试这个，

struct ContentView: View {
    @State private var condition = true
    @State private var fgColor = Color.black
    
    var body: some View {
        VStack {
            HStack {
                Text("Hello")
                    .foregroundColor(fgColor)
                if !condition {
                    Text("World")
                }
            }
            .transition(.slide)
            .animation(.easeOut(duration: 3))
            
            Button("TAP") {
                fgColor = .red
                condition.toggle()
            }
        }
    }
}

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