SwiftUI中如何可靠移除Text视图的额外边距？

问题根源 #

SwiftUI的Text视图会保留字体默认的排版预留空间（用于容纳上标、特殊字符等），这就是不同字号的Text顶部出现不同大小额外边距的原因。

可靠解决方案（无需魔法数字） #

方法1：自定义TrimmedText视图（推荐） #

通过计算字体的实际排版参数，自动调整Text的基线偏移，彻底适配所有字号：

import SwiftUI
import UIKit

struct TrimmedText: View {
    let text: String
    let fontSize: CGFloat
    
    var body: some View {
        Text(text)
            .font(.system(size: fontSize))
            .baselineOffset(-getAscenderOffset())
            .lineLimit(1)
    }
    
    private func getAscenderOffset() -> CGFloat {
        let font = UIFont.systemFont(ofSize: fontSize)
        // 计算字体预留的顶部额外空间：ascender（基线到字体顶部最大距离）减去capHeight（大写字母实际高度）
        return font.ascender - font.capHeight
    }
}

使用示例：

HStack(alignment: .top) {
    Image(systemName: "square.dashed")
    TrimmedText(text: "10", fontSize: 48)
        .frame(minHeight: 100, alignment: .top)
        .background(.gray)
    TrimmedText(text: "10", fontSize: 24)
        .frame(alignment: .top)
        .background(.gray)
}

方法2：直接使用alignmentGuide调整对齐 #

如果不想自定义视图，也可以通过修改Text的对齐指南来实现：

import SwiftUI
import UIKit

HStack(alignment: .top) {
    Image(systemName: "square.dashed")
    Text("10")
        .font(.system(size: 48))
        .alignmentGuide(.top) { dimension in
            let font = UIFont.systemFont(ofSize: 48)
            // 调整top对齐的偏移量，抵消字体预留的顶部空间
            return dimension[.top] - (font.ascender - font.capHeight)
        }
        .frame(minHeight: 100, alignment: .top)
        .background(.gray)
    Text("10")
        .font(.system(size: 24))
        .alignmentGuide(.top) { dimension in
            let font = UIFont.systemFont(ofSize: 24)
            return dimension[.top] - (font.ascender - font.capHeight)
        }
        .frame(alignment: .top)
        .background(.gray)
}

方案说明 #

这两种方法都通过UIFont的ascender和capHeight属性计算字体的额外预留空间，自动适配不同字号，完全避免了手动设置负内边距的繁琐和不可靠问题。

内容的提问来源于stack exchange，提问作者Captain_Apollo