小编jo.*_*.On的帖子

SwiftUI 如何在 VStack 中垂直居中视图

我希望在屏幕垂直中心有一个视图,在屏幕顶部有一个视图,在这两个视图之间垂直居中有一个视图,如下所示:

在此输入图像描述

这花了我 5 分钟在故事板上完成,但我似乎找不到在 SwiftUI 中完成它的方法。

我已经尝试过多个 zstack、vstack、多个自定义对齐,但这是我得到的最接近的:

struct SelectionView: View {
    var body: some View {
        ZStack(alignment: .myAlignment) {
            Color.green
                .edgesIgnoringSafeArea(.all)
            
            
            VStack {
                Image(systemName: "clock")
                    .resizable()
                    .foregroundColor(.white)
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 156, height: 80)
                
//                Spacer()
                
                Text("My\nmultiline label")
                    .multilineTextAlignment(.center)
                    .font(.title)
                    .foregroundColor(.white)

//                Spacer()
                
                VStack(spacing: 16) {
                    RoundedRectangle(cornerRadius: 5).fill(Color.white).frame(height: 79)
                    RoundedRectangle(cornerRadius: 5).fill(Color.white).frame(height: 79)
                }
                .alignmentGuide(VerticalAlignment.myAlignment) { dimension in
                    dimension[VerticalAlignment.center]
                }
                .layoutPriority(1)
            }
            .padding([.leading, .trailing], 24)
        }
    }
    
}

struct SelectionView_Previews: PreviewProvider {
    static var previews: some View {
        LanguageSelectionView()
    }
} …
Run Code Online (Sandbox Code Playgroud)

vertical-alignment swiftui vstack

10
推荐指数
1
解决办法
1万
查看次数

标签 统计

swiftui ×1

vertical-alignment ×1

vstack ×1