WWDC19 蘋(píng)果宣布全新 UI 框架 SwiftUI

2019 年 WWDC 大會(huì)上，蘋(píng)果在壓軸環(huán)節(jié)向大眾宣布了基于 Swift 語(yǔ)言構(gòu)建的全新 UI 框架 —— SwiftUI。開(kāi)發(fā)者可通過(guò)它快速為所有的 Apple 平臺(tái)創(chuàng)建美觀、動(dòng)態(tài)的應(yīng)用程序。

在介紹過(guò)程中，蘋(píng)果公司軟件工程高級(jí)副總裁 Craig Federighi 演示了如何將一百行代碼簡(jiǎn)化為大約十幾行。

據(jù)官方介紹，SwiftUI 是一個(gè)創(chuàng)新且非常方便使用的框架，開(kāi)發(fā)者通過(guò) Swift 語(yǔ)言的強(qiáng)大功能即可為蘋(píng)果的所有硬件設(shè)備構(gòu)建用戶界面 —— 只需使用一套工具和 API。

此外，SwiftUI 使用了聲明式的 Swift 語(yǔ)法，可讀性比較高，編寫(xiě)起來(lái)也比較容易理解。SwiftUI 可與新的 Xcode 設(shè)計(jì)工具無(wú)縫協(xié)作，讓代碼和設(shè)計(jì)完美同步，還提供對(duì)動(dòng)態(tài)類型、暗黑模式、本地化和可訪問(wèn)性的自動(dòng)支持。

下面簡(jiǎn)單介紹一下 SwiftUI。

聲明式語(yǔ)法

SwiftUI 使用了聲明式語(yǔ)法，所以開(kāi)發(fā)者能夠十分輕易地描述用戶界面應(yīng)該做什么。例如，編寫(xiě)需要包含文本字段的項(xiàng)目列表時(shí)，開(kāi)發(fā)者可以用代碼描述每個(gè)字段的對(duì)齊方式、字體和顏色。代碼也比以前更簡(jiǎn)單，更易于閱讀。

這種聲明式風(fēng)格非常適用于像動(dòng)畫(huà)這樣復(fù)雜的元素。通過(guò) SwiftUI，開(kāi)發(fā)者可輕松地將動(dòng)畫(huà)添加到幾乎任何控件。

擁有更直觀的新設(shè)計(jì)工具

Xcode 11 包含更直觀的新設(shè)計(jì)工具，可讓開(kāi)發(fā)者通過(guò)拖拽的方式使用 SwiftUI 構(gòu)建界面，在這過(guò)程中可以直接設(shè)置控件的相關(guān)屬性。

當(dāng)在設(shè)計(jì)工具中工作時(shí)，所編輯的內(nèi)容會(huì)立刻反映到代碼上，如果從模擬器切換到手機(jī)，手機(jī)也能立馬看到預(yù)覽效果。

為所有的蘋(píng)果設(shè)備提供原生體驗(yàn)

SwiftUI 是真正的原生 UI 框架，建立在蘋(píng)果數(shù)十年打磨用戶界面的經(jīng)驗(yàn)上。開(kāi)發(fā)者通過(guò)少量代碼和交互式設(shè)計(jì)就能使用這個(gè)框架。

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))
   }
}

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

SwiftUI 支持的設(shè)備要求版本較高，將在7月份開(kāi)啟公測(cè)，官方介紹如下：

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

SwiftUI 文檔地址 | SwiftUI 官方教程 | SwiftUI 官方示例代碼