NavigationStack
NavigationStack · UINavigationController · Router
管理一个"页面堆栈"。
用户点进去、返回、再点进去。
vs NavigationSplitView
Stack: 单列推入/弹出
SplitView: 两栏/三栏分栏
Live Demo — 交互模拟
点击行进入下一级
当前层级深度: 0
NavigationSplitView
NavigationSplitView · UISplitViewController
经典的分栏布局。
侧边栏 + 内容 + 详情。
折叠行为
📱 iPhone: 降级为单列 Stack
📱 iPad竖屏: 侧边栏折叠为覆盖层
💻 macOS: 始终并排显示
Live Demo — 三栏布局
设计周报
本周设计总结...
项目更新
新版本已发布...
项目更新
来自: 产品团队
TabView
TabView · UITabBarController · Tab导航
底部标签栏或顶部标签。
切换不同的顶级内容区域。
iOS 18+ 新特性
- • 用户可长按编辑Tab顺序
- • iPad上可变为侧边栏
Live Demo — iOS Tab Bar
首页
Tab Content Area
position: fixed; bottom: 0;
backdrop-filter: blur(20px)
Sidebar
Sidebar · NSSplitViewController · aside/nav
macOS 和 iPadOS 的主导航区域。
紧凑行距，分组结构。
Live Demo — macOS Finder Style
当前选中: 应用程序
跨体系命名对照表
导航与结构类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| NavigationStack | Router / Breadcrumb | — | — |
| NavigationSplitView | Layout | el-container | — |
| TabView | Tabs | el-tabs | Tabs |
| Sidebar | Sider | el-aside | Drawer |
Toolbar
toolbar · UIToolbar · UIBarButtonItem
放置操作按钮的区域。
导航栏、底部工具栏、键盘上方等。
macOS 特性
用户可右键自定义工具栏，拖拽增删按钮
Live Demo — macOS Toolbar
Toolbar 按钮区域演示
iOS 导航栏 Toolbar 位置
NavigationBar
UINavigationBar · navigationTitle
屏幕顶部的横条。
显示标题和操作按钮。
外观样式
- • .automatic 滚动时磨砂背景
- • .visible 始终显示背景
- • .hidden 始终透明
Live Demo
设置
.inline 模式
Stack
VStack · HStack · ZStack · Flexbox
Apple 的声明式布局核心。
三种基本容器组合所有界面。
CSS 等价
VStack → flex-direction: column
HStack → flex-direction: row
ZStack → position: relative/absolute
Lazy 版本
LazyVStack / LazyHStack 按需加载
Live Demo
VStack
HStack
ZStack
间距控制
VStack(spacing: 8) { ... }
HTML: gap: 8px
Section
Section · section · 分组
在 List/Form 里分组。
带标题头和可选的脚注说明。
Live Demo — iOS Settings Style
跨体系命名对照表
导航与结构类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| Toolbar | — | — | AppBar / ToolBar |
| NavigationBar | PageHeader | el-page-header | TopAppBar |
| VStack / HStack | Space / Flex | — | Stack (Box) |
| ZStack | — | — | Stack (position) |
| Section | — | — | List subheader |
GroupBox
GroupBox · NSBox · fieldset
视觉分组容器。
给一组相关内容套上圆角背景框。
HTML 近似
<fieldset> + <legend>
或带边框的 div 容器
SwiftUI
GroupBox("标题") {
// 内容
}
Live Demo — macOS Style
已使用 45GB / 128GB
DisclosureGroup
DisclosureGroup · details/summary
点击标题展开/折叠内容。
常用于设置面板、侧边栏。
<details>
<summary>标题</summary>
内容...
</details>
交互特征
▸ 折叠状态（箭头朝右）
▾ 展开状态（箭头朝下）
Live Demo — Vue Implementation
OutlineGroup
OutlineGroup · NSOutlineView · Tree View
树型结构展示。
文件目录、多级分类等递归层级。
HTML 近似
嵌套的 <details> 元素
或自定义递归组件
Live Demo — Xcode Navigator Style
跨体系命名对照表
导航与结构类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| GroupBox | Card | el-card | Card |
| DisclosureGroup | Collapse | el-collapse | Accordion |
| OutlineGroup | Tree | el-tree | TreeView |
ViewThatFits
ViewThatFits · 响应式视图选择
系统自动选择能放得下的第一个视图。
响应式设计的核心工具。
1. 尝试第一个视图
检查是否适合可用空间
2. 不合适则跳过
继续尝试下一个
3. 渲染第一个合适的
都不合适则显示最后一个
HTML 近似
CSS Container Queries
@container (min-width: 300px) { ... }
Live Demo — 拖拽调整宽度
SafeArea
ignoresSafeArea · safeAreaInset · env()
不被系统UI遮挡的可用区域。
刘海、灵动岛、Home Indicator。
Live Demo — iPhone 示意图
安全区域
CSS Env Variables
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
GeometryReader
GeometryReader · ResizeObserver
读取父容器的尺寸和位置。
用于动态布局计算。
设计注意
Apple 建议尽量少用。
优先使用 Stack + Spacer + Frame。
它是"最后手段"。
Web 等价
ResizeObserver API
或使用 CSS % / vw / vh 单位
Live Demo — 实时读取尺寸
0 × 0
单位: px
Width
0
Height
0
调整浏览器窗口大小观察变化
跨体系命名对照表
导航与结构类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| ViewThatFits | — | — | — |
| SafeArea | — | — | — |
| GeometryReader | — | — | — |
ViewThatFits、SafeArea、GeometryReader 是 SwiftUI 独有的声明式布局特性