前言

個(gè)人學(xué)習(xí) SwiftUI 的記錄，如有錯(cuò)誤，請(qǐng)指教哈!

效果圖

這里展示了, 組合用幾個(gè)布局寫一個(gè)卡片 ( 好吧，好像好多文章都是寫卡片 )

先上效果圖

在這里插入圖片描述

代碼

import SwiftUI

struct XQHVZStackView: View {
    var body: some View {
        VStack {
            
            // 用 ZStack, 讓圖片能在底部
            ZStack.init(alignment: .topLeading) {
                Image("back")
                    .resizable()
                    .cornerRadius(30)
                    .shadow(color: Color.black, radius: 20, x: 0, y: 0)
                
                // 布局圖片上的一些內(nèi)容
                HStack  {
                    
                    // 左邊布局, 標(biāo)題和副標(biāo)題
                    VStack.init(alignment: .leading) {
                        Text("測(cè)試卡片")
                            .font(.title)
                            .foregroundColor(Color.white)
                            // 添加陰影，防止背景是白色時(shí)看不清字
                            .shadow(radius: 10)
                        Text("副標(biāo)題")
                            .foregroundColor(Color.white)
                            .shadow(radius: 10)
                            .font(.callout)
                        Spacer()
                    }
                    
                    // 撐開(kāi), 分為左右兩邊布局
                    Spacer()
                    
                    // 右邊布局, 標(biāo)示文字和更多按鈕
                    VStack {
                        Text("作者")
                            .foregroundColor(Color.white)
                            .shadow(radius: 10)
                            .font(.callout)
                        
                        Spacer()
                        
                        Button.init(action: {
                            print("點(diǎn)擊了更多")
                        }, label: {
                            Image("more")
                                .renderingMode(.original)
                                .resizable()
                                .frame(width: 20, height: 20)
                                .shadow(radius: 10)
                        })
                    }
                    
                }
                .padding()
            }
            .frame(width: 300, height: 200)
            
        }
    }
}