SwiftUI-VStack

文章目录

  • 前言
  • VStack
  • 代码

前言

个人学习 SwiftUI 的记录,如有错误,请指教哈!

VStack

纵向布局, 用来包裹其他 View, 从上到下的纵向布局

先上效果图

SwiftUI-VStack_第1张图片

代码


import SwiftUI

struct XQVStackView: View {
    var body: some View {
        VStack {
            
            // 横向布局
            // alignment: 布局对齐格式, 默认为 .center
            // spacing: 子 View 的间距
            VStack.init(alignment: .trailing, spacing: 10) {
                Text("我是第一个asdasdsadLab")
                Text("我是第二个Lab")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            VStack {
                Text("我是第一个Labasdasdasdasdasd")
                Text("我是第二个Lab")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            .padding(.top, 10)
            
            VStack {
                Text("我在上")
                // 如何把 View 分到 上下两边呢
                // 增加 Spacer()
                Spacer()
                Text("你在下")
            }
                // 固定大小
            .frame(width: 200, height: 100)
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            .padding(.top, 10)
            
        }
    }
}

你可能感兴趣的:(Swift,iOS,SwiftUI)