SwiftUI 文本意外填充底部和顶部

Hix*_*eld 4 swiftui swiftui-text

我需要精确控制文本所占据的区域。我创建了最基本的程序,显示意外的顶部和底部间距被添加到文本中。这些额外的填充从哪里来?如何摆脱它?

@main
struct myApp: App {
    
    
    init() {    }
    
    var body: some Scene {
        WindowGroup {
            Text("80")
                .font(.system(size: 30, weight: .bold, design: .default))
                .background(Color.red)
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

Ser*_*ost 6

文本似乎具有默认填充,如此处所示

在此输入图像描述

您可以通过将填充调整为负值来解决这个问题

用这个替换你的代码

Text("80")
        .font(.system(size: 30, weight: .bold, design: .default))
        .padding(.vertical, -6)
        .background(Color.red)
Run Code Online (Sandbox Code Playgroud)

如果你想让它变得动态,这是一个解决方案

  struct TestView: View {
    var fontSize: CGFloat = 110
    var paddingSize: CGFloat {
        -(fontSize * 0.23)
    }
    var body: some View {
        Text("80")
            .font(.system(size: fontSize, weight: .bold, design: .default))
            .padding(.vertical, paddingSize)
            .background(Color.red)
        Text("Hello")
    }
}
Run Code Online (Sandbox Code Playgroud)

因此,即使像图片中那样使用 110 的大字体,您也可以按照自己喜欢的方式渲染它 在此输入图像描述

您需要按照您认为合适的方式调整乘数

  • 遗憾的是我们不得不求助于像 0.23 这样的神奇数字。我正在研究字符串大小以寻找更通用的方法。当我让它工作时会发布答案 (2认同)