数据展示
NINGSHEN.TOP
Story
Reference
Implementation
03
数据展示类控件
给用户"看信息"的东西——文字、图片、列表、图表、指示器
📱💻⌚📺🥽全平台
Text
Text · UILabel · NSTextField · p/span
显示一段只读文本。
Apple 字体系统的核心载体。
常用修饰符
- • .bold() 加粗
- • .italic() 斜体
- • .lineLimit(2) 行数限制
- • .foregroundColor(.secondary) 次要颜色
Apple Font System — Dynamic Type
Large Title · 34pt
页面大标题
Title · 28pt
一级标题
Title 2 · 22pt
二级标题
Title 3 · 20pt
三级标题
Headline · 17pt Bold
Body · 17pt Regular. 这是正文文本样式，用于阅读主要内容。The quick brown fox jumps over the lazy dog.
Callout · 16pt
Subheadline · 15pt Secondary
Footnote · 13pt
Caption · 12pt
📱💻⌚📺🥽全平台
Label
Label · UILabel · 图标+文字
图标 + 文字的标准组合。
通常用于控件标识。
Text vs Label
TextLabel
纯文字图标 + 文字
显示内容控件标识
SF Symbols
Apple 提供 5000+ 系统图标，统一风格、自动适配字号。
Live Demo — SF Symbols 风格
⚙️ 设置›
📁 文件›
🔍 搜索›
🗑️ 删除›
Web 使用 Emoji 替代 SF Symbols
📱💻⌚📺🥽全平台
Image
Image · UIImageView · NSImageView · img
显示图像。支持多种缩放模式。
缩放模式对比
SwiftUICSS
.scaledToFit()object-fit: contain
.scaledToFill()object-fit: cover
.clipShape(.circle)border-radius: 50%
Live Demo — object-fit
contain
scaledToFit
cover
scaledToFill
circle
clipShape
AsyncImage
SwiftUI: AsyncImage(url:)
HTML: <img loading="lazy">
📱💻⌚📺🥽全平台
List
List · UITableView · NSTableView · ul/table
垂直排列的可滚动行集合。
iOS 最核心的数据展示方式。
ListStyle 样式
InsetGroupediOS 默认
Plain无分组圆角
Sidebar侧边栏
列表行特性
- • NavigationLink · 导航箭头
- • Toggle · 开关
- • swipeActions · 滑动操作
- • refreshable · 下拉刷新
Live Demo — InsetGrouped Style
近期项目
📄 项目报告PDF 昨天 ›
📊 会议记录周一 ›
📝 设计稿3天前 ›
收藏
⭐ 重要文档12项 ›
📁 工作归档34项 ›
设置
深色模式
通知
清除缓存
跨体系命名对照表
数据展示类控件
| Apple Official | Ant Design | Element UI | Material Design |
|---|---|---|---|
| Text | Typography | — | Typography |
| Label | — | — | — |
| Image | Image | el-image | Image |
| List | List | el-table | List |