SwiftUI-ZStack

前言

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

ZStack

ZStack 可以說, 和以前的 UIView 很相似, 都是從底部一直往上疊加. 理解起來就是我們是個顯示屏是平面，在這個基礎上來個垂直於屏幕的方向上設置個軸線按次序把UI疊放在上面.

先上效果圖

代碼

import SwiftUI

struct XQZStackView: View {
    var body: some View {
        VStack {
            
            // 重疊向佈局
            // alignment: 佈局對齊格式, 默認爲 .center
            ZStack.init(alignment: .topLeading) {
                Text("Hello, World!我對齊頭部")
                Text("阿哈哈哈哈\nasdhasd\nasdj")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            
            ZStack {
                Text("Hello, World!我對齊中間")
                Text("阿哈哈哈哈\nasdhasd")
            }
            .padding()
            .background(Color.orange)
            .cornerRadius(20)
            .shadow(radius: 10)
            .padding(.top, 10)
            
            ZStack {
                Image("back")
                    .resizable()
                    .cornerRadius(20)
                    .frame(width: 300, height: 200)
                Text("阿哈哈哈哈\nasdhasd")
                    .fontWeight(.bold)
                    .foregroundColor(Color.white)
            }
            .shadow(radius: 20)
            .padding(.top, 10)
            
        }
        
    }
}