SwiftUI-VStack

文章目錄

前言

個人學習 SwiftUI 的記錄,如有錯誤,請指教哈!

VStack

縱向佈局, 用來包裹其他 View, 從上到下的縱向佈局

先上效果圖

在這裏插入圖片描述

代碼


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

發佈了27 篇原創文章 · 獲贊 11 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章