🖥️練習用 SwiftUI 畫 Mac mini:從俯視角開始

講解用 SwiftUI 畫 Mac mini M4 俯視圖的實作重點,作為暖身練習。

前一篇文章💻學習 SwiftUI:為什麼從畫 Mac 開始?的反應比預期熱烈。所以我決定延伸一下,分篇說明怎麼畫 Mac mini。

這是我的實作與 Preview 截圖:

MacminiM4TopView 與 Preview
MacminiM4TopView 與 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()
}

以下說明實作重點。