[SwiftUI] 製作客製化CardView

import SwiftUI

struct CardView: View {
    //CardView客製化參數
    var image:String
    var category:String
    var heading:String
    var author:String
    
    var body: some View {
        VStack {
            Image(image)
                .resizable()//自動調整圖片大小
                .aspectRatio(contentMode: .fit)
            HStack {
                VStack (alignment: .leading){//讓文字框向前靠齊
                    Text(category)
                        .font(.headline)
                        .foregroundColor(.secondary)
                    Text(heading)
                        .font(.title)
                        .fontWeight(.black)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    Text(author.uppercased())
                        .font(.caption)
                        .foregroundColor(.secondary)
                }
                .layoutPriority(100)//調整佈局優先度
                Spacer()//用Spacer將HStack填滿達到將文字往左推的效果
            }.padding()
        }.cornerRadius(10)//讓HStack有圓角
        .overlay(RoundedRectangle(cornerRadius: 10)
                    .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1))//外面加上一個正方形框達到陰影效果
        .padding([.top,.horizontal])//用padding調整上方及左右間距
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView(image: "swiftui-button", category: "SwiftUI", heading: "Drawing a Border with Rounded Corners", author: "Simon Ng")
    }
}