我們學習Swift UI最大的障礙有一點在于我們并不知道其有多少組件可用，這大大限制了我們對SwiftUI的理解，

如果我們單純使用UIKit，那么SwiftUI的優(yōu)勢將大打折扣。接下來我們將嘗試梳理SwiftUI的各種組件。

基礎組件

View

View是一個協(xié)議，是視圖的基礎協(xié)議，幾乎所有的組件都遵循這個協(xié)議。其定義如下。該協(xié)議要求實現(xiàn)body的get方法.

body的get方法里面進行視圖的自定義，通過自定義視圖可以創(chuàng)建各種組件。

public protocol View { 

associatedtype Body : View

@ViewBuilder var body: Self.Body { get }

}

Text

Text組件用于顯示文本，相當于UIKit的UIlabel。

image

Image

Image組件用于顯示圖片，相當于UIKit的UIImageView。

image

TextField

Textfield組件用于顯示輸入文本框，相當于UIKit的UITextField。與之相關的還有SecureField，TextEditor。

image

Button

Button組件用于顯示按鈕，相當于UIKit的UIButton。與之相關的組件有EditButton，PasteButton，SignInWithAppleButton，MenuButton。

image

Label

Label組件用于顯示標簽，其不同于UILabel，它有一個文本和一個圖片組成，有點類似于以前帶圖片和title的UIButton。

image

toolbar與ToolBarItem

注意，這里的toolbar是小寫,toolbar本身是一個方法是view的一個方法，每個view可以支持toolbar方法，toolbar里面需要ToolbarItem進行組合。相當于UIKit的UIToolbarItem。

image

Slider

Slider是滑竿，類似于UIKit下的UISlider。

image

Stepper

Stepper類似于UIKit的UIStepper。

image

Toggle

Toggle是開關組件，其相當于UIKit下的UISwitch。

image

ProgressView

相當于UIKit的UIProgressView。

linear樣式

circle樣式

Link

Link相當于一個超鏈接。設置一個title和一個url，可以進行跳轉。

image

NavigationLink

SwiftUI都是view，沒有Controller，那么我們如何push一個頁面呢，這就需要用到NavigationLink，前提是你有一個NavigationView。

image

Map

SwiftUI本身沒有提供用于顯示地圖的組件，需要引入MapKit。MapKit中的Map相當于MapKit中的MKMapView。

image

Gauge

Gague是測量儀，僅限于AppleWatch可用。

特殊組件

Spacer

Spacer相當于一個沒有任何頁面渲染的空視圖，在HStack和VStack中，它可以占面剩余空間，非常適合SwiftUI主導的搭積木式的布局。

Divider

Divider是一個分割線，解決了需要自定義分割線的痛點。

image

GeometryReader

GeometryReader是非常特殊的一種視圖，在SwiftUI中，我們很少關心父視圖的怎樣，通常是父視圖是適應子視圖大小變化，但是某些情況，

我們可能需要子視圖適應父視圖，這時候我們就得拿到父視圖的寬高信息，這時候我們可以借助GeometryReader實現(xiàn)。

彈出類組件

Menu

Menu組件用于顯示菜單，相當于UIKit的UIMenuController。與之相關的還有ContextMenu。

image

ActionSheet

ActionSheet相當于UIKit的UIActionSheet。

image

Picker

Picker相當于UIKit的UIPickerView，不過在SwiftUI里面，它支持多種Style，更像是Segment，PopupOver和PickerView的大雜燴，與之相關的組件還有，ColorPicker,DatePicker。

wheel樣式

segment樣式

menu樣式

Alert

Alert相當于UIKit的UIAlertController。

image

容器類組件

ScrollView

ScrollView相當于UIKit的UIScrollView

image

List

List相等于UIKit中的UITableView。

image

LazyVGrid、LazyHGrid、GridItem

GridItem相當于UIKit的UICollectionViewCell，LazyVGrid和LazyHGrid相當于UICollectionView。SwiftUI的CollectionView需要借助ScrollView和LazyHGrid以及LazyVGrid才能實現(xiàn)。HGrid相當于按行分組，VGrid相當于按列分組(比如瀑布流)。

image

HStack、VStack、ZStack

HStack、VStack相當于UIStackView，H是水平方向，V是豎直方向。ZStack可以理解為相對于屏幕里外方向，也就是相當于以前superView和subView的方式。與之相關的組件LazyHStack、LazyVStack。

Form

Form可以將組件變成一個表單。它與VStack比較相似。比如它與Picker相結合，可以輕松實現(xiàn)設置頁面。

image

image

TabView、TabbarItem

TabView是選項卡，其相等于UIKit中的TabbarViewController。Tabbar本身不在單獨作為一個對象使用。

image

NavigationView

NavigationView是導航頁面，相當于UIKit的UINavigationViewController。NavigationBar本身不在作為一個單獨的對象使用。

inline樣式

automatic樣式or large樣式

AnyView

AnyView被稱為可擦寫視圖，它也是一個容器視圖。SwiftUI的組件都是一次性渲染，可擦寫視圖每次都會移除子視圖，重新布局渲染，所以轉換成AnyView后或被AnyView裝飾后性能上會大打折扣。

渲染類組件

Color

Color雖然指的是顏色，但是其也遵循View協(xié)議，所以它也是一個View，它可以被理解為UIKit下UIView設置一個背景色。

Shape

Shape是一個協(xié)議，用于顯示一個形狀，其本身遵循View協(xié)議。其派如下結構體Capsule（膠囊，類似于button樣式），Circle（圓形），ContainerRelativeShape，Ellipse（橢圓），OffsetShape，Path（路徑），Rectangle（矩形），RotatedShape，RoundedRectangle（圓角矩形），ScaledShape，TransformedShape。這些結構體都是一個完整的View組件可以直接使用，尤其在mask，overlay，clip等操作時比較常見。

LinearGradient、AngularGradient、RadialGradient

LinearGradient、AngularGradient、RadialGradient這三個都表示漸變色。Color和Shape都被定義成了View，當然也不難理解漸變會被定義成View。Gradient本身不是View，因為Gradient沒有定義漸變函數。而LinearGradient（線性漸變）、AngularGradient（角度漸變）、RadialGradient（弧度漸變）是真正的View。以下是一個LinearGradient的例子。

image

總結

• 跟UIKit的對應關系

  • UIView ==> View
  • UILabel ==> Text
  • UIImageView ==> Image
  • UITextField ==> TextField 掩碼顯示 SecureField
  • UITextView ==> TextEditor
  • UIButton ==> Button、Label
  • UISlider ==> Silder
  • UIStepper ==> Stepper
  • UISwitch ==> Toggle
  • UIProgressView ==> ProgressView
  • UIMenuController ==> Menu
  • UIActionSheet ==> ActionSheet
  • UIAlertController ==> Alert
  • UIPickerView、UISegmentedControl、UIPopoverController ==> Picker,DatePicker,ColorPicker
  • UIScrollView ==> Scroll
  • UITableView ==> List
  • UICollectionView ==> LazyVGrid、LazyHGrid、GridItem
  • UIStackView ==> HStack、VStack、LazyHStack、LazyVStack
  • UITabbarViewController ==> TabView
  • UINavigationViewController ==> NavigationView
  • 其他：Map ==> MKMapView

• 新增組件

  • Spacer
  • Divider
  • Link
  • Color
  • Shape
  • LinearGradient、AngularGradient、RadialGradient
  • ZStack、GeometryReader、AnyView （這三個視圖，用于解決渲染問題）

• 方式替換

  • push通過NavigationLink的方式實現(xiàn)
  • Tabbar和NavigationBar不作為獨立對象使用
  • Grid需要借助ScrollView實現(xiàn)

• 不支持

  • 不支持webView，需要借助WebKit的WKWebView（非SwiftUI體系）