🖥️練習用 SwiftUI 畫 Mac mini:總結篇

整合 Mac mini 三面視角,加上電源開關與狀態顯示。雖然簡單,但是初學者能學到許多重要的基本知識。

系列已經到了尾聲,我們來做兩件事情:

  1. 把 Mac mini 的三面放在一個畫面當中切換
  2. 加上電源開關與狀態顯示效果

本文的程式碼概念並不複雜,可以學到 enum、CaseIterable、extension、Swift Observation 的基本使用方式。資深開發者可以輕鬆看完,而如果你是初學者,把每一行都讀懂會對熟悉 SwiftUI 很有幫助(不妨貼給 AI 解釋)。

集中顯示與切換

讓我們新增一個 MacminiM4View,來放三種角度的畫面。並新增 Picker 切換視角。

把三個視角建立成一個 enum,並且使用 extension 延伸出每個視角的顯示文字:

enum ViewPoint: CaseIterable {
  case top
  case side
  case bottom
}

extension ViewPoint { // 延伸出 title。不同的視角就顯示不同的文字
  var title: String {
    switch self {
    case .top:
      "Top"
    case .side:
      "Side"
    case .bottom:
      "Bottom"
    }
  }
}

請注意,這個 enum 有標上 CaseIterable,能夠自動產生所有 cases 的集合。用途我們很快就會看到。

核心概念如下: