🖥️練習用 SwiftUI 畫 Mac mini:從俯視角開始
講解用 SwiftUI 畫 Mac mini M4 俯視圖的實作重點,作為暖身練習。
前一篇文章💻學習 SwiftUI:為什麼從畫 Mac 開始?的反應比預期熱烈。所以我決定延伸一下,分篇說明怎麼畫 Mac mini。
這是我的實作與 Preview 截圖:

程式碼如下:
import SwiftUI
struct MacminiM4TopView: View {
private let bodyWidth = 512.0
var body: some View {
RoundedRectangle(cornerRadius: bodyWidth / 4)
.aspectRatio(1, contentMode: .fit)
.foregroundStyle(
LinearGradient(
colors: [Color(white: 0.9), Color(white: 0.8)],
startPoint: .topTrailing,
endPoint: .bottomLeading
)
)
.frame(width: bodyWidth)
.overlay {
Image(systemName: "apple.logo")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: bodyWidth / 3.5)
.foregroundStyle(Color.black)
}
}
}
#Preview("Top View") {
MacminiM4TopView()
}
以下說明實作重點。