SwiftUI：iOS 常用视图组件速查

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

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

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

一、整体层级

一个 App 大概就是这样：

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

可以理解成

HTML ↓ body ↓ div ↓ button ↓ img ↓ input

二、布局组件（最重要）

VStack

垂直排列

VStack{Text("A")Text("B")}

效果

A B

对应

CSS display:flex; flex-direction:column;

Android

LinearLayout vertical

HStack

水平排列

HStack{Text("A")Text("B")}

效果

A B

对应

display:flex; flex-direction:row;

ZStack

层叠

ZStack{Image()Text()}

类似

position:absolute

或者 Android

FrameLayout

Spacer

占满剩余空间

HStack{Text("左")Spacer()Text("右")}

效果

左 右

等于 CSS

justify-content:space-between

三、文本

Text

Text("Hello")

修改

Text("Hello").font(.title).bold().foregroundStyle(.red)

对应 HTML

<span> <p>

四、图片

Image

本地

Image("logo")

SF Symbols

Image(systemName:"house")

网络图片

一般使用

AsyncImage

AsyncImage(url:url)

五、按钮

Button("登录"){}

或者

Button{}label:{Text("登录")}

对应

<button>

六、输入框

TextField

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

密码

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

对应

<input>

七、文本编辑

TextEditor(text:$content)

对应

<textarea>

八、开关

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

对应

Android

Switch

HTML

checkbox

九、选择器

Picker

Picker("城市",selection:$city){Text("北京")Text("上海")}

类似

<select>

十、Slider

Slider(value:$progress)

对应

SeekBar

十一、Stepper

数字加减

Stepper(value:$count){Text("\(count)")}

十二、DatePicker

DatePicker("日期",selection:$date)

日期选择。

十三、ProgressView

加载

ProgressView()

进度

ProgressView(value:0.5)

十四、List（★★★★★）

最常用。

List(users){userinText(user.name)}

就是

RecyclerView UITableView

也是

HTML ul li

十五、ScrollView

滚动

ScrollView{}

横向

ScrollView(.horizontal){}

十六、LazyVStack

大量数据使用

ScrollView{LazyVStack{}}

类似

RecyclerView

按需加载。

十七、Grid

网格

LazyVGrid(...)

对应

GridLayout CSS Grid

十八、NavigationStack（★★★★★）

导航

NavigationStack{HomeView()}

进入页面

NavigationLink("详情"){DetailView()}

就是

push pop

十九、TabView（★★★★★）

底部导航

TabView{Home()Profile()}

对应

BottomNavigationView TabBar

二十、Sheet

弹窗

.sheet(isPresented:$show){Detail()}

底部弹出。

二十一、Alert

提示框

.alert("title",isPresented:$show){}

二十二、ConfirmationDialog

操作菜单

类似

ActionSheet

二十三、Menu

右键菜单

Menu{}

二十四、Popover

小气泡

iPad 使用较多。

二十五、Toolbar

导航栏按钮

.toolbar{}

二十六、Form

表单

Form{}

自动分组。

设置页大量使用。

二十七、Section

分组

Section{}

List 中经常使用。

二十八、Divider

分割线

Divider()

二十九、Group

逻辑分组。

不会增加布局。

三十、常见 Modifier（修饰符）

所有 View 都能调用。

大小

.frame()

内边距

.padding()

背景

.background()

圆角

.cornerRadius()

边框

.border()

阴影

.shadow()

透明

.opacity()

隐藏

.hidden()

点击

.onTapGesture{}

长按

.onLongPressGesture{}

生命周期

.onAppear{}.onDisappear{}

动画

.animation()

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

变量

@State

父子绑定

@Binding

共享对象

@StateObject@ObservedObject@EnvironmentObject

开发天天写。

三十二、页面生命周期

进入页面

.onAppear{}

离开页面

.onDisappear{}

类似

onResume onPause

三十三、最常见页面组合

登录页

NavigationStack ↓ VStack ↓ Image ↓ TextField ↓ SecureField ↓ Button

列表页

NavigationStack ↓ List ↓ NavigationLink

详情页

ScrollView ↓ VStack ↓ Image ↓ Text ↓ Button

个人中心

NavigationStack ↓ List ↓ Section ↓ NavigationLink

商城首页

NavigationStack ↓ ScrollView ↓ LazyVStack ↓ LazyVGrid

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

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

⭐⭐⭐⭐⭐（必须掌握）

• 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 开发者的思维转换

一句话总结

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

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

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