[譯] SwiftUI 官方教程 （一）

因爲 API 變更，此文章部份內容已失效，最新完整中文教程及代碼請查看 github.com/WillieWangW…

微信技術羣

SwiftUI 表明將來構建 App 的方向，歡迎加羣一塊兒交流技術，解決問題。

SwiftUI 簡介

SwiftUI 是一種爲任何 Apple 平臺聲明用戶界面的現代化方式。之前所未有的速度，建立漂亮、動態的應用程序。

只須要描述一次的佈局

爲你的視圖聲明任何狀態的內容和佈局，一旦狀態發生改變， SwiftUI 會自動更新視圖的渲染。

List(landmarks) { landmark in
   HStack {
      Image(landmark.thumbnail)
      Text(landmark.name)
      Spacer()
      
      if landmark.isFavorite {
         Image(systemName: "star.fill")
            .foregroundColor(.yellow)
      }
   }
}
複製代碼

構建可複用的組件

將小型、獨立視圖組合到更大，更復雜的界面中。在任何爲 Apple 平臺所設計的應用之間，共享您的自定義視圖。

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))
}
複製代碼

在 Xcode 中實時預覽

無需運行應用程序，便可設計、構建和測試應用程序的界面。使用可交互的預覽來測試您的控件和佈局。