/*
Design+Code - SwiftUI for iOS 13
https://designcode.io/swiftui-layout-and-stacks
*/
import SwiftUI
import PlaygroundSupport
struct Card: View {
var body: some View {
// 卡片最外框
VStack(spacing: 0) {
// 卡片標題區：UIDesign & Swift logo
HStack {
// 文字區塊
VStack(alignment: .leading) { // 讓所有文字「靠左對齊」
Text("UI Design")
.font(.title) // 字體加大
.fontWeight(.semibold) // 字體加粗
Text("Certificate")
.foregroundColor(.blue)
}
Spacer() // 將「文字區塊」與「Swift 商標」推向兩側
// Swift 商標圖
Image(uiImage: imageLiteral(resourceName: "swift.png"))
.resizable() // 讓圖的大小「隨外框調整」（而不是用原尺寸）
.clipShape(Circle()) // 將圖修為「圓形」
.frame(width: 40, height: 40) // 限制尺寸為 40x40
} // 卡片標題區
.padding(.horizontal, 20) // 左右留白 20
.padding(.top, 20) // 上面留白 20
// 卡片設計圖
Image(uiImage: imageLiteral(resourceName: "UNESCO.png"))
.resizable() // 讓圖的大小「隨外框調整」（而不是用原尺寸）
.aspectRatio(contentMode: .fill) // 讓圖片「保持原比例」⭐️
// ⭐️ 設定圖片大小，並讓圖片「靠上緣對齊」（而不是預設的「置中」）
.frame(width: 300, height: 140, alignment: .top)
} // 卡片最外框
// ⭐️ 讓卡片內容「靠上緣對齊」（而不是預設的「置中」）
.frame(width: 340, height: 220, alignment: .top)
.background(Color.black)
.cornerRadius(20) // 將卡片「裁成圓角」
}
}
struct ContentView: View {
var body: some View {
VStack {
Card()
} //
// 讓外框自動採用「最大的寬度與高度」（而不是採用最小的）
// ⚠️ 注意：
// 不要寫成 `frame(width: .infinity, height: .infinity)`
// 否則會當掉！
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.gray)
}
}
PlaygroundPage.current.setLiveView(ContentView())
