SwiftUI - 百行代碼變十行，Swift再創輝煌

蘋果開發者大會 WWDC 2019 在北京時間今天凌晨開幕。在這場大會上除了「史上最難看 Mac 主機」、首次出現的iPadOS以外，我們還終於可以對飽受詬病的iTunes說再見了。而對於開發者來說，新發布的 SwiftUI 可能是最吸引人的特性，在 蘋果公司軟件工程高級副總裁Craig Federighi的演示中，我們可以輕鬆地把一百行的前端代碼縮減到十幾行。

下面來一張牛逼哄哄的SwiftUI效果圖，給大家打打牙祭

• 初體驗：左邊加大括號21行，右邊出現一些類似SB的東西，佈局UI，設置屬性貌似都可以完成

SwiftUI 的特點是什麼

SwiftUI 使用聲明式語法，所以我們可以簡單地聲明用戶界面的樣式。

• 開發者可以聲明需要由一串文本輸入框構成的組件
• 然後定義每一個輸入框的字體對齊方式、字體樣式、字體顏色。
• 這些代碼比以往更加易懂，省時並易於維護。

這種聲明式的方式甚至允許使用複雜的功能，如動畫（animation）。只需要幾行代碼，即可添加動畫在任何控件上，並且可以使用易於調用的特效。在運行時，SwifthUI 會自行控制創建流暢動作的所有步驟，並且可以解決程序衝突，保證 app 穩定運行。動畫特效變得如此容易，我們可以發掘使 app 更加靈動的方式。

作爲一個開發者，有一個學習的氛圍跟一個交流圈子特別重要，這是一個我的iOS交流羣：763164022，不管你是小白還是大牛歡迎入駐 ，分享BAT,阿里面試題、面試經驗，討論技術， 大家一起交流學習成長！

爲什麼需要 SwiftUI

下面是來自王巍對UIKit的詬病

UIKit 提供的是一套符合直覺的，基於控制流的命令式的編程方式。最主要的思想是在確保 View或者 View Controller 生命週期以及用戶交互時，相應的方法 (比如 viewDidLoad 或者某個 target-action 等) 能夠被正確調用，從而構建用戶界面和邏輯。不過，不管是從使用的便利性還是穩定性來說，UIKit 都面臨着巨大的挑戰。我個人勉強也能算是 iOS開發的“老司機”了，但是掉到 UIKit 的坑裏這件事，也幾乎還是我每天的日常。UIKit的基本思想要求 View Controller 承擔絕大部分職責，它需要協調 model，view 以及用戶交互。這帶來和巨大的 side effect 以及大量的狀態，如果沒有妥善安置，它們將在 View Controller 中混雜在一起，同時作用於 view 或者邏輯，從而使狀態管理愈發複雜，甚至不可維護。不僅是用戶代碼，UIKit本身內部也經常受困於可變狀態，各種奇怪的 bug 也頻頻出現。

的確，我們平時開發很多的時間都浪費在了這個方面，然而作爲牛逼的，我也相信必然會一統江湖的 Swift 也是不忍心讓開發人員掉入這樣的坑中，SwiftUI 只是一個開始---打開新世界的開始

聲明式語法

SwiftUI 使用了聲明式語法，所以開發者能夠十分輕易地描述用戶界面應該做什麼。例如，編寫需要包含文本字段的項目列表時，開發者可以用代碼描述每個字段的對齊方式、字體和顏色。代碼也比以前更簡單，更易於閱讀。

這種聲明式風格非常適用於像動畫這樣複雜的元素。通過 SwiftUI，開發者可輕鬆地將動畫添加到幾乎任何控件。

擁有更直觀的新設計工具

Xcode 11 包含更直觀的新設計工具，可讓開發者通過拖拽的方式使用 SwiftUI 構建界面，在這過程中可以直接設置控件的相關屬性。 當在設計工具中工作時，所編輯的內容會立刻反映到代碼上，如果從模擬器切換到手機，手機也能立馬看到預覽效果。

爲所有的蘋果設備提供原生體驗

SwiftUI 是真正的原生 UI 框架，建立在蘋果數十年打磨用戶界面的經驗上。開發者通過少量代碼和交互式設計就能使用這個框架。

SwiftUI 示例代碼

爲視圖的任何狀態聲明內容和佈局。SwiftUI知道該狀態何時發生變化，並更新視圖的呈現以匹配該狀態。

List(landmarks) { landmark in
   HStack {
      Image(landmark.thumbnail)
      Text(landmark.name)
      Spacer()

      if landmark.isFavorite {
         Image(systemName: "star.fill")
            .foregroundColor(.yellow)
      }
   }
}

• 構建可複用的組件

將小的、單一職責的視圖組合成更大、更復雜的接口。在爲任何蘋果平臺設計的應用程序之間共享自定義視圖。

struct FeatureCard: View {
   var landmark: Landmark

   var body: some View {
      landmark.featureImage
         .resizable()
         .aspectRatio(3/2, contentMode: .fit)
         .overlay(TextOverlay(landmark))
   }
}

• 簡便的動畫創建方式

創建平滑的動畫就像添加一個方法調用一樣簡單。SwiftUI在需要時自動計算和動畫轉換。

VStack {
   Badge()
      .frame(width: 300, height: 300)
      .animation(.basic())
   Text(name)
      .font(.title)
      .animation(Animation.basic().delay(0.25))
}

SwiftUI 支持的設備要求版本較高，將在7月份開啓公測，官方介紹如下：

iOS 13.0+ Beta
macOS 10.15+ Beta
UIKit for Mac 13.0+ Beta
tvOS 13.0+ Beta
watchOS 6.0+ Bet