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。与之相关的还有SecureFieldTextEditor

image

Button

Button组件用于显示按钮,相当于UIKit的UIButton。与之相关的组件有EditButtonPasteButtonSignInWithAppleButton,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的方式。与之相关的组件LazyHStackLazyVStack

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(圆形),ContainerRelativeShapeEllipse(椭圆),OffsetShapePath(路径),Rectangle(矩形),RotatedShapeRoundedRectangle(圆角矩形),ScaledShapeTransformedShape。这些结构体都是一个完整的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体系)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272