基于本文回答

播面 播面

刷题像听歌，多听自然懂
0
评论
请从左侧选择一个分类

Text 视图如何处理多行显示、截断（Truncation）和行间距？

知识点图片

在 SwiftUI 中，Text 视图提供了非常直观的修饰符（Modifiers）来处理多行文本、截断方式以及行间距。

以下是详细的分类讲解和代码示例：

1. 多行显示 (Multi-line Display)

默认情况下，Text 视图会根据容器的宽度自动换行。如果你需要控制显示的行数，主要使用 .lineLimit() 修饰符。

  • 默认行为：自动换行，显示所有文本（只要空间足够）。
  • 限制行数：
    • lineLimit(2)：最多显示 2 行。
    • lineLimit(1)：强制单行显示。
    • lineLimit(nil)：允许无限行（默认值）。
  • 范围限制 (iOS 16+)：
    • lineLimit(2...4)：最少占 2 行的高度，最多显示 4 行。
plaintext 
Text("这是一段非常长的文本，用来测试多行显示的效果。它会自动换行，除非你限制了它。")
    .lineLimit(2) // 限制最多显示两行

2. 截断模式 (Truncation Mode)

当文本内容超过了 lineLimit 设定的行数，或者超过了视图的可用空间时，文本会被截断。你可以通过 .truncationMode() 来控制省略号的位置。

  • .tail (默认)：在末尾截断 (例如: "Abc...")。
  • .head：在开头截断 (例如: "...xyz")。
  • .middle：在中间截断 (例如: "Abc...xyz")。
plaintext 
Text("这是一段非常长的文本，用来测试截断效果。")
    .lineLimit(1)
    .truncationMode(.middle) // 结果可能像: "这是一段...截断效果。"

3. 行间距 (Line Spacing)

你可以通过 .lineSpacing() 来调整行与行之间的额外距离。

  • 注意：这个数值是额外增加的间距（Points），不是行高（Line Height）。它只影响行与行之间的缝隙，不影响第一行上方或最后一行下方。
plaintext 
Text("这是第一行\n这是第二行\n这是第三行")
    .lineSpacing(10) // 在每行之间增加 10pt 的间距

4. 综合示例代码

下面是一个完整的 SwiftUI 视图示例，展示了如何组合使用这些属性，以及如何设置对齐方式（因为处理多行文本时，对齐通常也很重要）。

plaintext 
import SwiftUI

struct TextHandlingExample: View {
    let longText = "SwiftUI 是苹果推出的声明式 UI 框架。Text 视图功能强大，支持多行显示、自定义截断模式以及调整行间距。掌握这些属性对于构建漂亮的排版至关重要。"

    var body: some View {
        VStack(spacing: 30) {
            
            // 1. 默认多行显示 + 行间距
            VStack(alignment: .leading) {
                Text("1. 多行 & 行间距 (10pt)")
                    .font(.headline)
                Text(longText)
                    .lineSpacing(10) // 设置行间距
                    .multilineTextAlignment(.leading) // 设置多行对齐方式
                    .padding()
                    .background(Color.gray.opacity(0.1))
            }

            // 2. 限制行数 + 尾部截断 (默认)
            VStack(alignment: .leading) {
                Text("2. 限制 2 行 (尾部截断)")
                    .font(.headline)
                Text(longText)
                    .lineLimit(2)
                    .padding()
                    .background(Color.yellow.opacity(0.2))
            }

            // 3. 限制 1 行 + 中间截断
            VStack(alignment: .leading) {
                Text("3. 限制 1 行 (中间截断)")
                    .font(.headline)
                Text(longText)
                    .lineLimit(1)
                    .truncationMode(.middle)
                    .padding()
                    .background(Color.blue.opacity(0.1))
            }
        }
        .padding()
    }
}

struct TextHandlingExample_Previews: PreviewProvider {
    static var previews: some View {
        TextHandlingExample()
    }
}

补充技巧：自动缩放 (Minimum Scale Factor)

有时候你不想截断文本，而是希望文字自动变小以适应空间。可以使用 .minimumScaleFactor()。

plaintext 
Text("这段文字如果太长，会自动缩小字体，而不是显示省略号。")
    .lineLimit(1)
    .minimumScaleFactor(0.5) // 允许字体最小缩放到原大小的 50%

总结

功能 修饰符 (Modifier) 常用值
行数限制 .lineLimit(_) Int (如 2), nil (无限), Range (如 2...4)
截断模式 .truncationMode(_) .tail (默认), .head, .middle
行间距 .lineSpacing(_) CGFloat (如 10.0)
多行对齐 .multilineTextAlignment(_) .leading, .center, .trailing
00:00
00:00