主页 / coding / 问题 / 79015708
Accepted
nilegreenblue
Asked: 2024-09-24 01:29:42 +0800 CST

SwiftUI 文本在动画视图宽度时会因截断而抖动

  • 772

以下是一个简单的示例代码。当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但没有帮助。我需要保留这种布局类型并找到此动画问题的解决方案。

animation

1 个回答

  1. Best Answer

    在搭载 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

    我尝试过的 Xcode 项目实际上有一个 iOS 16 的构建目标。如果你的目标是 iOS 17 或更高版本，那么你可以尝试.geometryGroup()一下。这可能比 的副作用更少drawingGroup()。

    • 1

相关问题