更多信息：

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

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

1 个答案:

更多信息：