SwiftUI 如何对齐两个不同字体大小的文本的底部？

Question

我正在尝试对齐两个 Text 的底部，但较大的一个看起来像 thismy widget looks like this。我不知道为什么这个 Text 视图下面还有一些空间。 这是我的代码：

var body: some View {
GeometryReader{geometry in
    ZStack(alignment: .center){
        Image("background")
            .resizable()
        VStack(){
            HStack(alignment: .bottom){
                Text("3")
                    .lineLimit(1)
                    .font(.bold(.system(size: 100))())
                    .minimumScaleFactor(0.1)
                    .foregroundColor(Color.white)
                    .frame(width: nil, height: geometry.size.height/3, alignment: .bottom)
                    .lineLimit(1)
                    .shadow(radius: 2)
                Text("cups")
                    .foregroundColor(Color.white)
                    .font(.system(size: 12))
                    .shadow(radius: 2)
            }
            Text("Next cup on")
                .foregroundColor(Color.white)
                .font(.system(size: 10))
                .shadow(radius: 2)
                .opacity(0.5)
            Text("10 : 00")
                .foregroundColor(Color.white)
                .font(.system(size: 12))
                .shadow(radius: 1)
                .opacity(0.5)
        }
    }
}

}

我想要的是数字 3 的底部与“杯子”的底部对齐。 谢谢！

Answer 1

您可以使用.lastTextBaseline 代替.bottom 作为HStack 对齐方式：

HStack(alignment: .lastTextBaseline) {
    Text("Hello").font(.system(size: 40))
    Text("World").font(.system(size: 10))
}