How to align text at the bottom in SwiftUI

Question

My code is as bellow:

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

The result is as bellow pic, all the view is align at the center.

How to make the "pm" align "09" and "22" at the bottom such as bellow pic?

Answer 1

I just found that you can use HStack(alignment: .lastTextBaseline) or .firstTextBaseLine.

HStack(alignment: .lastTextBaseline) {
    Text("09")
    DotView()
        .frame(width: 7, height: 30, alignment: .center)
    Text("22")
    VStack { // Added VStack with Spacer()
    Spacer()
    Text("PM")
        .font(.system(size: 20))
 }

Answer 2

You can use VStack with Spacer() and set frame for 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))
    }
}