#English

✨ SwiftUI 文本截断的解决方法

为您每周带来有关 Swift 和 SwiftUI 的精选资讯！

TL;DR: 当 SwiftUI 中的 Text 因空间不足被截断时，可使用 fixedSize 忽略约束、minimumScaleFactor 缩小字体、ViewThatFits 动态选择合适视图，或通过 ScrollView 实现滚动，确保完整显示文本。

问题

在 SwiftUI 中，当视图空间不足以显示 Text 内容时，系统会默认对文字进行截断。这种情况下，如何确保 Text 的内容完整显示呢？

原因

Text 是一个自适应组件，它根据父视图提供的尺寸调整显示状态。当父视图的空间不足时，Text 会优先进行截断，而非自动换行或缩放。

解决方案

1. 使用 fixedSize 修饰器

fixedSize 可以让 Text 忽略父视图在特定轴向上的约束，从而占用足够的空间完整显示内容。

Swift 
Text("This is a very long text that might be truncated.")
    .fixedSize() // 忽略横向和纵向约束

Text("This is a very long text that might be truncated.")
    .fixedSize(horizontal: true, vertical: false) // 忽略横向约束

Text("This is a very long text that might be truncated.")
    .fixedSize(horizontal: false, vertical: true) // 忽略纵向约束
  • 如果设置 .fixedSize(horizontal: true, vertical: false)，Text 将在横向完整显示内容（即使超出屏幕）。
  • 使用 .fixedSize(horizontal: false, vertical: true)，Text 会自动换行，直到内容全部显示完毕。

2. 使用 minimumScaleFactor 缩小字体

通过 minimumScaleFactor，可以让 Text 在空间不足时自动缩小字体尺寸，而不是截断内容。

Swift 
Text("This is a very long text that might be truncated.")
    .lineLimit(1) // 限制为单行
    .minimumScaleFactor(0.5) // 最小缩放比例为 50%
    .frame(width: 200)

minimumScaleFactor

这种方法适用于希望内容显示在单行内，但字体大小可以调整的场景。

3. 使用 ViewThatFits

ViewThatFits 提供了一种灵活的方式，可以根据父视图的可用空间选择合适的子视图，确保内容完整显示。

Swift 
struct TextDemo: View {
    @State private var width: CGFloat = 100
    
    var body: some View {
        VStack {
            Slider(value: $width, in: 50...300)
                .padding()
            ViewThatFits {
                Text("This is a very long text that might be truncated.")
                Text("This is a long text.")
                Text("Short text.")
            }
            .frame(width: width)
            .border(.red)
        }
    }
}

ViewThatFits

当父视图空间不足时，ViewThatFits 会选择可以完整显示的子视图。

4. 使用滚动视图（ScrollView）

如果内容较多且空间有限，可以将 Text 放在可滚动容器 （ScrollView 、List）中，使其可滚动显示。

Swift 
ScrollView {
    Text("This is a very long text that might be truncated.")
}

延伸阅读

通过以上方法，可以根据不同场景选择合适的方案，确保 Text 的内容完整显示。