对视图宽度进行动画处理时，SwiftUI 文本会出现截断摆动

Question

这是一个简单的示例代码。当

Button

被推动时，

Image

出现在

Text

的左侧，导致

Text

收缩。

但是当动画发生时，

Text

的字母会在水平方向上摆动。 这是动画示例的链接： 文本截断测试.gif

import SwiftUI

struct TextTruncatingTest: View {
    @State private var imageVisible: Bool = true
    
    var body: some View {
        VStack {
            Button {
                withAnimation {
                    imageVisible.toggle()
                }
            } label: {
                Text("Toggle Image")
            }
            
            HStack {
                if imageVisible {
                    Image(systemName: "circle")
                }
                
                Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
                    .transition(.identity)
                    .lineLimit(1)
                
            }
            .padding()
            .background {
                RoundedRectangle(cornerRadius: 20, style: .continuous)
                    .foregroundStyle(Color.basicSecondaryBackground)
            }
        }
        .padding()
    }
}

#Preview {
    TextTruncatingTest()
}

我尝试在

.transition(.identity)

上使用

Text

，但没有帮助。我需要保留这种类型的布局并找到该动画问题的解决方案。

Answer 1

在装有 iOS 18 的 iPhone 16 模拟器上运行时，该问题并不明显。但是，我能够通过在装有 iOS 17.5 的 iPhone 15 模拟器上运行来重现该问题。

.transition

修饰符没有做任何事情，因为文本视图没有出现或消失，它只是在改变。但是，您可以尝试将其替换为

.contentTransition

，它正是用于此目的。

我实际上发现所有可用的内容过渡都没有给出非常令人满意的动画。但我发现将

.drawingGroup()

添加到

Text

使其表现与 iOS 18 类似：

Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
    .lineLimit(1)
    // .contentTransition(.identity)
    .drawingGroup() // 👈 HERE