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