SwiftUI：iOS 常用视图组件速查

适合：Java(Android) + JS(Vue/React) 开发者。

目标：看完知道 iOS 有哪些组件、对应什么、什么时候用。

推荐学习 SwiftUI，UIKit 只需要认识即可（很多老项目还在用）。

一、整体层级

一个 App 大概就是这样：

text 复制代码

App
 │
NavigationStack
 │
View
 ├── Text
 ├── Image
 ├── Button
 ├── TextField
 ├── List
 ├── ScrollView
 ├── VStack
 ├── HStack
 └── ZStack

可以理解成

复制代码

HTML
 ↓
body
 ↓
div
 ↓
button
 ↓
img
 ↓
input

二、布局组件（最重要）

VStack

垂直排列

swift 复制代码

VStack {

    Text("A")

    Text("B")

}

效果

复制代码

A
B

对应

复制代码

CSS

display:flex;

flex-direction:column;

Android

复制代码

LinearLayout

vertical

HStack

水平排列

swift 复制代码

HStack {

    Text("A")

    Text("B")

}

效果

复制代码

A B

对应

复制代码

display:flex;

flex-direction:row;

ZStack

层叠

swift 复制代码

ZStack {

Image()

Text()

}

类似

复制代码

position:absolute

或者 Android

复制代码

FrameLayout

Spacer

占满剩余空间

swift 复制代码

HStack {

Text("左")

Spacer()

Text("右")

}

效果

复制代码

左                右

等于 CSS

复制代码

justify-content:space-between

三、文本

Text

swift 复制代码

Text("Hello")

修改

swift 复制代码

Text("Hello")

.font(.title)

.bold()

.foregroundStyle(.red)

对应 HTML

复制代码

<span>

<p>

四、图片

Image

本地

swift 复制代码

Image("logo")

SF Symbols

swift 复制代码

Image(systemName:"house")

网络图片

一般使用

复制代码

AsyncImage

swift 复制代码

AsyncImage(url:url)

五、按钮

swift 复制代码

Button("登录"){

}

或者

swift 复制代码

Button{

}label:{

Text("登录")

}

对应

复制代码

<button>

六、输入框

TextField

swift 复制代码

TextField("请输入用户名",text:$username)

密码

swift 复制代码

SecureField("密码",text:$password)

对应

复制代码

<input>

七、文本编辑

swift 复制代码

TextEditor(text:$content)

对应

复制代码

<textarea>

八、开关

swift 复制代码

Toggle("开启通知",isOn:$isOpen)

对应

Android

复制代码

Switch

HTML

复制代码

checkbox

九、选择器

Picker

swift 复制代码

Picker("城市",selection:$city){

Text("北京")

Text("上海")

}

类似

复制代码

<select>

十、Slider

swift 复制代码

Slider(value:$progress)

对应

复制代码

SeekBar

十一、Stepper

数字加减

swift 复制代码

Stepper(value:$count){

Text("\(count)")

}

十二、DatePicker

swift 复制代码

DatePicker(

"日期",

selection:$date

)

日期选择。

十三、ProgressView

加载

swift 复制代码

ProgressView()

进度

swift 复制代码

ProgressView(value:0.5)

十四、List（★★★★★）

最常用。

swift 复制代码

List(users){

user in

Text(user.name)

}

就是

复制代码

RecyclerView

UITableView

也是

复制代码

HTML ul li

十五、ScrollView

滚动

swift 复制代码

ScrollView{

}

横向

swift 复制代码

ScrollView(.horizontal){

}

十六、LazyVStack

大量数据使用

swift 复制代码

ScrollView{

LazyVStack{

}

}

类似

复制代码

RecyclerView

按需加载。

十七、Grid

网格

swift 复制代码

LazyVGrid(...)

对应

复制代码

GridLayout

CSS Grid

十八、NavigationStack（★★★★★）

导航

swift 复制代码

NavigationStack{

HomeView()

}

进入页面

swift 复制代码

NavigationLink("详情"){

DetailView()

}

就是

复制代码

push

pop

十九、TabView（★★★★★）

底部导航

swift 复制代码

TabView{

Home()

Profile()

}

对应

复制代码

BottomNavigationView

TabBar

二十、Sheet

弹窗

swift 复制代码

.sheet(

isPresented:$show

){

Detail()

}

底部弹出。

二十一、Alert

提示框

swift 复制代码

.alert(

"title",

isPresented:$show

){

}

二十二、ConfirmationDialog

操作菜单

类似

复制代码

ActionSheet

右键菜单

swift 复制代码

Menu{

}

二十四、Popover

小气泡

iPad 使用较多。

导航栏按钮

swift 复制代码

.toolbar{

}

二十六、Form

表单

swift 复制代码

Form{

}

自动分组。

设置页大量使用。

二十七、Section

分组

swift 复制代码

Section{

}

List 中经常使用。

二十八、Divider

分割线

swift 复制代码

Divider()

二十九、Group

逻辑分组。

不会增加布局。

三十、常见 Modifier（修饰符）

所有 View 都能调用。

大小

swift 复制代码

.frame()

内边距

swift 复制代码

.padding()

背景

swift 复制代码

.background()

圆角

swift 复制代码

.cornerRadius()

边框

swift 复制代码

.border()

阴影

swift 复制代码

.shadow()

透明

swift 复制代码

.opacity()

隐藏

swift 复制代码

.hidden()

点击

swift 复制代码

.onTapGesture{}

长按

swift 复制代码

.onLongPressGesture{}

生命周期

swift 复制代码

.onAppear{}

.onDisappear{}

动画

swift 复制代码

.animation()

三十一、状态管理（★★★★★）

变量

swift 复制代码

@State

父子绑定

swift 复制代码

@Binding

共享对象

swift 复制代码

@StateObject

@ObservedObject

@EnvironmentObject

开发天天写。

三十二、页面生命周期

进入页面

swift 复制代码

.onAppear{

}

离开页面

swift 复制代码

.onDisappear{

}

类似

复制代码

onResume

onPause

三十三、最常见页面组合

登录页

text 复制代码

NavigationStack

↓

VStack

↓

Image

↓

TextField

↓

SecureField

↓

Button

列表页

text 复制代码

NavigationStack

↓

List

↓

NavigationLink

详情页

text 复制代码

ScrollView

↓

VStack

↓

Image

↓

Text

↓

Button

个人中心

text 复制代码

NavigationStack

↓

List

↓

Section

↓

NavigationLink

商城首页

text 复制代码

NavigationStack

↓

ScrollView

↓

LazyVStack

↓

LazyVGrid

三十四、UIKit 对照（老项目）

SwiftUI	UIKit
View	UIView
Text	UILabel
Image	UIImageView
Button	UIButton
TextField	UITextField
TextEditor	UITextView
List	UITableView
LazyVGrid	UICollectionView
NavigationStack	UINavigationController
TabView	UITabBarController
Alert	UIAlertController
Sheet	Present ViewController
ScrollView	UIScrollView
Toggle	UISwitch
Slider	UISlider
Picker	UIPickerView
ProgressView	UIProgressView
DatePicker	UIDatePicker

三十五、开发中每天都会写的组件（按优先级）

⭐⭐⭐⭐⭐（必须掌握）

NavigationStack
VStack
HStack
Spacer
Text
Image
Button
TextField
List
ScrollView
NavigationLink
TabView
.padding()
.frame()
.background()
.toolbar()
@State

⭐⭐⭐⭐（经常用）

LazyVStack
LazyVGrid
Section
Form
ProgressView
Alert
Sheet
Divider
Toggle
Picker
AsyncImage

⭐⭐⭐（按需掌握）

TextEditor
Slider
Stepper
DatePicker
ConfirmationDialog
Menu
Popover
Group

最后给前端/Android 开发者的思维转换

Web/Android	SwiftUI
div	VStack / HStack / ZStack
span / p	Text
img	Image
button	Button
input	TextField
textarea	TextEditor
ul/li	List
RecyclerView	List / LazyVStack
GridLayout	LazyVGrid
flex-column	VStack
flex-row	HStack
position:absolute	ZStack
Router	NavigationStack
BottomNavigation	TabView
Dialog	Alert / Sheet
State（React/Vue）	@State
Props	@Binding
Global Store	@EnvironmentObject

一句话总结

如果你已经熟悉前端或 Android，可以把 SwiftUI 理解为：

布局 = Flex（VStack/HStack/ZStack）
页面 = React/Vue 的组件（View）
状态 = React Hooks（@State、@Binding）
导航 = Router（NavigationStack）
列表 = RecyclerView / v-for（List、ForEach）

掌握这些核心组件，就已经能完成绝大多数企业级 iOS 应用页面开发。

SwiftUI：iOS 常用视图组件速查

一、整体层级

二、布局组件（最重要）

VStack

HStack

ZStack

Spacer

三、文本

Text

四、图片

Image

五、按钮

六、输入框

TextField

七、文本编辑

八、开关

九、选择器

十、Slider

十一、Stepper

十二、DatePicker

十三、ProgressView

十四、List（★★★★★）

十五、ScrollView

十六、LazyVStack

十七、Grid

十八、NavigationStack（★★★★★）

十九、TabView（★★★★★）

二十、Sheet

二十一、Alert

二十二、ConfirmationDialog

二十三、Menu

二十四、Popover

二十五、Toolbar

二十六、Form

二十七、Section

二十八、Divider

二十九、Group

三十、常见 Modifier（修饰符）

三十一、状态管理（★★★★★）

三十二、页面生命周期

三十三、最常见页面组合

三十四、UIKit 对照（老项目）

三十五、开发中每天都会写的组件（按优先级）

最后给前端/Android 开发者的思维转换

一句话总结