SwiftUI与UIKit常用组件对比大全

SwiftUI 与 UIKit 常用组件对比大全

在学习 SwiftUI 之前，我为大家整理了一份 SwiftUI 与 UIKit 中常用组件的对比表，涵盖了 视图、容器、动画、手势、样式、状态管理 等多个方面。（可能有误或有遗漏，欢迎指正 ）

无论你是否有使用过 UIKit 的经验，这份对比表都可以帮助你快速了解 SwiftUI 和 UIKit 之间的对应关系。
即使你从未接触过 UIKit，这也不会影响你学习 SwiftUI，因为 SwiftUI 设计更加直观和现代化。

希望这份整理能为你的开发学习提供帮助！❤️

---

视图组件对比

SwiftUI 提供了许多简洁的视图组件，与 UIKit 的传统组件一一对应：

SwiftUI	UIKit	描述
Text	UILabel	文本视图
Image	UIImageView	图像视图
Button	UIButton	按钮
TextField	UITextField	单行文本输入框
SecureField	UITextField（secure）	安全输入框
Toggle	UISwitch	开关
Slider	UISlider	滑块
Stepper	UIStepper	计数器
ProgressView	UIProgressView	进度条
Picker	UIPickerView	数据选择器
DatePicker	UIDatePicker	日期选择器
ScrollView	UIScrollView	滚动视图
List	UITableView	列表视图
ForEach	循环创建 UIView	循环视图
Spacer	UILayoutGuide / UIView	弹性空白视图
Divider	UIView (height/width设置为1)	分割线
Form	UITableView (Grouped Style)	分组表单
Color	UIColor / CGColor	颜色表示
Shape (Circle, Rectangle, etc.)	CAShapeLayer 或 UIView	几何形状

---

容器与导航

SwiftUI 的容器组件更加现代化，提供灵活的布局方式，与 UIKit 中的容器组件一一对应：

SwiftUI	UIKit	描述
HStack	UIStackView (horizontal)	水平堆叠容器
VStack	UIStackView (vertical)	垂直堆叠容器
ZStack	UIView (层叠子视图)	层叠容器
LazyVStack / LazyHStack	UITableView / UICollectionView	延迟加载的垂直/水平列表
LazyGrid	UICollectionView	延迟加载的网格
GeometryReader	UIView + frame 和 bounds	读取父视图尺寸
ScrollViewReader	UIScrollView + Programmatic Scroll	滚动到指定位置
NavigationView	UINavigationController	导航容器
NavigationStack	UINavigationController（现代化方式）	层级导航
TabView	UITabBarController	标签视图
Toolbar	UIToolbar	工具栏

---

手势与交互

SwiftUI 提供了统一的手势接口，而 UIKit 使用的是独立的 UIGestureRecognizer：

SwiftUI	UIKit	描述
.gesture	UIGestureRecognizer	添加手势识别器
.dragGesture()	UIPanGestureRecognizer	拖动手势
.magnificationGesture()	UIPinchGestureRecognizer	缩放手势
.rotationGesture()	UIRotationGestureRecognizer	旋转手势
.onHover	UIHoverGestureRecognizer	鼠标悬停（macOS, iPadOS）
.onTapGesture	UITapGestureRecognizer	点击手势
.onLongPressGesture	UILongPressGestureRecognizer	长按手势

---

动画与过渡

SwiftUI 的动画功能更加直观，与 UIKit 的动画机制相辅相成：

SwiftUI	UIKit	描述
.animation()	UIView.animate()	添加动画
.transition()	UIView 的过渡效果	过渡动画
.matchGeometryEffect()	UIView 的动画布局调整	动画匹配几何布局变化
.withAnimation()	UIView.animate()	包装一段带动画的视图更新

---

样式与修饰符

SwiftUI 的样式系统使用修饰符链式调用，UIKit 则依赖视图属性配置：

SwiftUI	UIKit	描述
.clipShape()	layer.mask 或 CAShapeLayer	剪切视图形状
.overlay()	添加 subview	在视图上覆盖子视图
.mask()	maskView	使用视图作为遮罩
.blur()	UIVisualEffectView	添加模糊效果
.rotationEffect()	transform.rotation	旋转视图
.scaleEffect()	transform.scale	缩放视图
.padding()	layoutMargins	设置内边距

---

状态管理

SwiftUI 的状态管理更加清晰，与 UIKit 的传统方式有本质区别：

SwiftUI	UIKit	描述
@State	@property 或者局部变量	状态变量
@Binding	Delegate 或者 KVO	父子视图之间的数据绑定
@ObservedObject	Delegate 或 Notification	观察外部状态
@EnvironmentObject	全局依赖注入	全局状态
@AppStorage	UserDefaults	应用级别的存储
@SceneStorage	UserDefaults (Scene-based)	场景级别的存储

---

小结

SwiftUI 的设计更加现代化，且使用声明式语法，大幅简化了界面开发的工作量。如果你有 UIKit 的经验，对比学习会更容易理解。如果是第一次接触 iOS 开发，直接从 SwiftUI 入手也是完全可以的。

赶快打开 Xcode，尝试用 SwiftUI 创建你的第一个 App 吧！🎉