将 SwiftUI 文本与另一个文本的基线和顶部对齐

Posted 2023-02-25

【中文标题】将 SwiftUI 文本与另一个文本的基线和顶部对齐

【英文标题】：Aligning SwiftUI text to the baseline and top of another text

【发布时间】：2020-09-11 08:30:51

【问题描述】：

我正在尝试实现 SwiftUI 文本对齐，如图所示。目标是将文本“.0”的顶部与“7”的顶部边缘（紫线）对齐，将“kts”的底部边缘与“7”的底部边缘（红线）对齐。

这是我当前的 SwiftUI 代码：

HStack(alignment: .lastTextBaseline, spacing: 3) 
    
    Text("7")
    .font(.system(size: 70))
    .foregroundColor(Color.green)
    .multilineTextAlignment(.center)
    .minimumScaleFactor(0.3)
    
    VStack(alignment: .leading, spacing: 5) 

        Text(".7")
        .font(.system(size: 24))
        .foregroundColor(Color.green)
                        
        Text("kts")
        .font(.system(size: 18))
        .foregroundColor(Color.white)
                            
    
                

此代码适用于红线所示的对齐方式。

你会推荐什么方法来对齐“7”和“.0”的顶部，如紫色线所示？

【问题讨论】：

尝试在VStack 的两个视图之间添加Spacer()，同时删除间距。

【参考方案1】：

您可以使用 Stacks 来堆叠字体。底线没有问题，但您可以从 UIFont 获得帮助，为您提供所需的信息，例如：

struct ContentView: View 
    let bigFont = UIFont.systemFont(ofSize: 70)
    let smallFont = UIFont.systemFont(ofSize: 24)

    var body: some View 
        ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) 
            HStack(alignment: .firstTextBaseline, spacing: 0) 
                Text("7").font(Font(bigFont))
                Text("kts").font(Font(smallFont))
            
            HStack(alignment: .firstTextBaseline, spacing: 0) 
                Text("7")
                    .font(Font(bigFont))
                    .opacity(0)
                Text(".0")
                    .font(Font(smallFont))
                    .baselineOffset((bigFont.capHeight - smallFont.capHeight))
            
        
    

---

更多信息：

这是关于Font的描述的图片以获取更多信息：

【讨论】：

可爱的把戏。这种东西仍然让我对 SUI 有点抓狂。不过做得很好。

工作得很好thanx!!