2

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

@main struct myApp: 应用 {

init() {    }

var body: some Scene {
    WindowGroup {
        Text("80")
            .font(.system(size: 30, weight: .bold, design: .default))
            .background(Color.red)
    }
}

}

在此处输入图像描述

4

2 回答 2

2

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

在此处输入图像描述

您可以通过将填充调整为负数来解决此问题

用这个替换你的代码

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

如果您想让它动态化,这是一个解决方案

  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")
    }
}

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

你需要调整你认为合适的乘数

于 2021-03-12T16:08:20.367 回答
1

事实证明,填充顶部和底部实际上根本不存在。在我的数字示例中,这看起来像是浪费了空间,但实际上某些角色确实需要这个房间,如图所示:在此处输入图像描述

因为我只显示数字,所以我使用@Sergio 的解决方案来纠正这个多余的空间。

于 2021-03-12T21:07:39.737 回答