如何以最可靠的方式删除文本视图中的多余边距？

Question

有示例代码：

HStack(alignment: .top) {
            Image(systemName: "square.dashed")
            Text("10")
                .font(.system(size: 48))
                .frame(minHeight: 100, alignment: .top)
                .background(.gray)
            Text("10")
                .font(.system(size: 24))
                .frame(alignment: .top)
                .background(.gray)
        }

这段代码的结果是相当出乎意料的。

视图中文本之前有一个边距。边距的大小取决于字体大小 - 字体越大，边距越大。

如何完全消除这个边距？

尝试使用负填充：

HStack(alignment: .top) {
            Image(systemName: "square.dashed")
            Text("10")
                .font(.system(size: 48))
                .padding(.top, -12) // first magic number
                .frame(minHeight: 100, alignment: .top)
                .background(.gray)
            Text("10")
                .font(.system(size: 24))
                .padding(.top, -6) // second magic number
                .frame(alignment: .top)
                .background(.gray)
        }

它可以工作，但相当乏味且不可靠：每次我需要调整字体时，我都需要调整这个“幻数”的东西。

所有这些看起来都很奇怪。我错过了一些明显的东西吗？

Answer 1

删除 Text() 顶部和底部额外填充的唯一方法是设置该文本的正确高度。为了避免额外的“神奇”数字，你可以这样做：

    let size48 = 48.0
    let size24 = 24.0
    
    HStack(alignment: .top) {
                Image(systemName: "square.dashed")
                Text("10")
                    .font(.system(size: size48))
                    .frame(height: UIFont.systemFont(ofSize: size48).capHeight)
                    .background(.gray)
                Text("10")
                    .font(.system(size: size24))
                    .frame(height: UIFont.systemFont(ofSize: size24).capHeight)
                    .frame(alignment: .top)
                    .background(.gray)
            }

你会得到正确的帧：