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

Question

我正在尝试实现如图所示的 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”的顶部，如紫色线所示？

Answer 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详细信息的描述的图像：