跳至正文
Style — truncationMode

truncationMode

SwiftUI 中的 truncationMode 用于控制文本在空间不足时的截断方式(即如何显示省略号 )。它通常与 lineLimit 结合使用,当文本内容超出可用空间时,决定截断的位置(头部、中部或尾部)。


核心使用场景

  1. 空间受限的文本显示
    当文本容器(如 Text 视图)的宽度或高度不足以显示全部内容时,通过 truncationMode 明确截断位置,避免布局混乱。

  2. 多行文本的优雅截断
    结合 lineLimit 限制行数后,控制截断位置以提升可读性(例如长段落截断在尾部)。

  3. 特定设计需求
    某些场景需要特殊的截断方式(如文件路径显示中间截断、数字尾部截断等)。


truncationMode 的三种模式

  1. .tail(默认)
    在文本尾部截断,显示为 ...
    适用场景:标题、短描述等大多数通用情况。

    swift
    Text("This is a very long text that needs to be truncated.")
        .lineLimit(1)
        .truncationMode(.tail) // 显示 "This is a very long text tha..."
    
  2. .middle
    在文本中部截断,保留开头和结尾部分。
    适用场景:文件路径、URL、长数字等需要保留两端关键信息的场景。

    swift
    Text("/User/Documents/Projects/SwiftUI/TruncationModeExample.swift")
        .lineLimit(1)
        .truncationMode(.middle) // 显示 "/User/Documents/Proj...cationModeExample.swift"
    
  3. .head
    在文本头部截断,显示为 ...
    适用场景:需要强调尾部内容(如时间戳、后缀标识等)。

    swift
    Text("2023-10-01_important_event_final_version")
        .lineLimit(1)
        .truncationMode(.head) // 显示 "...event_final_version"
    

结合 lineLimit 使用

  • truncationMode 仅在文本实际被截断时生效,需通过 lineLimit 限制行数或通过容器约束宽度。
  • 示例:限制文本最多显示 2 行,并在中部截断:
    swift
    Text("A long text that spans multiple lines and needs to be truncated in the middle.")
        .lineLimit(2)
        .truncationMode(.middle)
    

常见问题

  • 为何截断不生效?
    确保父容器约束了宽度(如 frame(width:))或设置了 lineLimit

  • 动态内容截断
    结合 fixedSize(horizontal:vertical:) 或布局容器(如 HStack)控制截断行为。


总结

truncationMode 是优化文本布局的关键工具,通过合理选择截断位置,可以在有限空间内平衡信息展示与可读性。

本文共 533 字,创建于 Apr 25, 2025

相关标签:Xcode, SwiftUI, ByAI

博客助手

正在打开博客助手…