layout - 如何在 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()
    }
}

结果如下图所示，所有 View 都在中心对齐。

如何使“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))
    }
}