如何在 SwiftUI 底部对齐文本

如何解决如何在 SwiftUI 底部对齐文本

我的代码如下：

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”对齐，如下图所示？

解决方法

您可以将 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))
    }
}