如何在 SwiftUI 中对齐底部的文本

Question

我的代码如下：

struct DotView: View {
    var body: some View {
        GeometryReader { geo in
            let width = geo.size.width
            HStack() {
                VStack() {
                    Circle()
                        .frame(width: width, height: width)
                    Spacer()
                    Circle()
                        .frame(width: width, height: width)
                }
            }
            
        }
    }
}


struct TestView: View {
    var body: some View {
        HStack() {
            Text("09")
            DotView()
                .frame(width: 7, height: 30, alignment: .center)
            Text("22")
            Text("PM")
                .font(.system(size: 20))
        }
        .font(.system(size: 66, weight: .medium))
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

结果如下图，所有视图居中对齐

如何让“pm”对齐底部的“09”和“22”，如下图？

Answer 1

您可以将 VStack 与 Spacer() 一起使用并为 HStack() 设置框架

struct TestView: View {
    var body: some View {
        HStack() {
            Text("09")
            DotView()
                .frame(width: 7, height: 30, alignment: .center)
            Text("22")
            VStack { // Added VStack with Spacer()
                Spacer()
                Text("PM")
                    .font(.system(size: 20))
            }
        }
        .frame(width: 300, height: 55) // Added Line, adjust frame of HStack
        .font(.system(size: 66, weight: .medium))
    }
}

如何在 SwiftUI 中对齐底部的文本

How to align text at the bottom in SwiftUI

layout

alignment

swiftui