SwiftUI学习(2)-SwiftUI框架的UI组件成员

我们学习Swift UI最大的障碍有一点在于我们并不知道其有多少组件可用，这大大限制了我们对SwiftUI的理解，

如果我们单纯使用UIKit，那么SwiftUI的优势将大打折扣。接下来我们将尝试梳理SwiftUI的各种组件。

基础组件

View

View是一个协议，是视图的基础协议，几乎所有的组件都遵循这个协议。其定义如下。该协议要求实现body的get方法.

body的get方法里面进行视图的自定义，通过自定义视图可以创建各种组件。

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实现。

弹出类组件

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才能实现。HGrid相当于按行分组，VGrid相当于按列分组(比如瀑布流)。

image

HStack、VStack、ZStack

HStack、VStack相当于UIStackView，H是水平方向，V是竖直方向。ZStack可以理解为相对于屏幕里外方向，也就是相当于以前superView和subView的方式。与之相关的组件LazyHStack、LazyVStack。

Form

Form可以将组件变成一个表单。它与VStack比较相似。比如它与Picker相结合，可以轻松实现设置页面。

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协议，所以它也是一个View，它可以被理解为UIKit下UIView设置一个背景色。

Shape

Shape是一个协议，用于显示一个形状，其本身遵循View协议。其派如下结构体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的方式实现
  • Tabbar和NavigationBar不作为独立对象使用
  • Grid需要借助ScrollView实现

• 不支持

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