SwiftUI中带截断的Text在视图宽度动画时出现晃动问题

点击按钮切换左侧图片显示状态时，文本会随宽度收缩/扩展在动画过程中出现字符水平晃动，添加.transition(.identity)无法解决此问题。以下是保留原有布局的解决方案：

核心思路 #

问题根源在于动画过程中文本的截断逻辑会随可用空间实时重新计算，导致字符位置跳动。我们需要禁用文本自身的布局动画，仅保留容器（HStack）的宽度过渡动画，让文本直接切换到对应宽度的截断状态，同时保持整体布局的平滑动画效果。

修改后的代码 #

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.")
                    .lineLimit(1)
                    // 禁用文本自身的布局动画，避免截断逻辑实时更新导致晃动
                    .animation(nil, value: imageVisible)
                
            }
            .padding()
            .background {
                RoundedRectangle(cornerRadius: 20, style: .continuous)
                    .foregroundStyle(Color.basicSecondaryBackground)
            }
        }
        .padding()
    }
}

#Preview {
    TextTruncatingTest()
}

其他可选方案 #

如果需要更精细的控制，也可以通过GeometryReader获取容器宽度，提前计算文本的可用空间，确保动画过程中文本的截断位置稳定：

HStack {
    if imageVisible {
        Image(systemName: "circle")
            .fixedSize()
    }
    
    GeometryReader { proxy in
        Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
            .lineLimit(1)
            .frame(width: proxy.size.width - (imageVisible ? 24 : 0), alignment: .leading)
    }
}

（注：24为系统图标的近似宽度，可根据实际使用的图片尺寸调整）

内容的提问来源于stack exchange，提问作者nilegreenblue