SwiftUI Text 意外填充底部和顶部

Posted 2023-02-24

【中文标题】SwiftUI Text 意外填充底部和顶部

【英文标题】：SwiftUI Text unexpected padding bottom and top

【发布时间】：2021-03-12 15:58:27

【问题描述】：

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

@main 结构 myApp: 应用程序

init()     

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

【参考方案1】：

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

您可以通过将填充调整为负数来克服这一点

用这个替换你的代码

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 大字体，您也可以按照自己喜欢的方式渲染它

您需要根据自己的喜好调整乘数

【讨论】：

是的，但填充接缝的数量不是恒定的，我认为取决于字体大小......

@HixField 检查编辑，这样它将是动态的，创建一个可以读取任何字体大小的计算属性

@HixField 如果你想消除水平填充然后.padding(.horizontal, x)

很遗憾我们不得不求助于像 0.23 这样的神奇数字。我正在研究字符串大小以获得更通用的方法。当我开始工作时会发布答案

【参考方案2】：

原来填充顶部和底部实际上根本不存在。在我的数字示例中，这看起来像是浪费了空间，但实际上某些角色确实需要这个房间，如图所示：

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