前一篇文章💻學習 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()
}
以下說明實作重點。
繼續閱讀
解鎖全文
訂閱⟪13報+⟫,閱讀本篇全文,並解鎖 200 篇以上專欄與短篇。
- 完整專欄文章與深度分享
- Apple 開發者週報完整版
- 會員限定短篇抒發
- 支持 13 寫作
延伸閱讀
⚡️App 效能研討會重點整理:成為 SwiftUI Instruments 高手
這場 Meet with Apple 研討會不但內容超級實用,而且少見採用現場活動兼直播形式,讓人回想到以前的 WWDC!我幫你把重點位置都標記好,可以直接在 13+ 網頁點連結跳轉。
🖥️練習用 SwiftUI 畫 Mac mini:底部
講解用 SwiftUI 畫 Mac mini M4 底部的實作重點:金屬機殼與塑膠殼的同心圓角、畫出一整圈散熱孔的技巧。
🖥️練習用 SwiftUI 畫 Mac mini:正面
講解用 SwiftUI 畫 Mac mini M4 正面的實作重點:機殼光澤、插孔與電源燈、以及底部散熱孔的畫法。