以下是一个简单的示例代码。当Button
被按下时,Image
会出现在 的左侧Text
,从而导致Text
缩小。
但是当动画发生时,字母Text
会在水平方向上摆动。以下是动画示例的链接:
TextTruncatingTest.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
但没有帮助。我需要保留这种布局类型并找到此动画问题的解决方案。
在搭载 iOS 18 的 iPhone 16 模拟器上运行时,我没有看到该问题。但是,通过在搭载 iOS 17.5 的 iPhone 15 模拟器上运行时,我可以重现该问题。
修饰符
.transition
不执行任何操作,因为文本视图不会出现或消失,它只是改变大小。但是,您可以尝试用 替换它.contentTransition
。这适用于文本真正改变的情况(而不仅仅是改变大小),但它也在一定程度上适用于改变大小。我发现所有可用的内容转换都没有提供令人满意的动画。但我发现添加后,
.drawingGroup()
它Text
的行为与 iOS 18 类似:我尝试过的 Xcode 项目实际上有一个 iOS 16 的构建目标。如果你的目标是 iOS 17 或更高版本,那么你可以尝试
.geometryGroup()
一下。这可能比 的副作用更少drawingGroup()
。