示例索引
经过统一布局和预览校验的完整页面样板。
这里收录可以直接复制到 AppUI 预览里运行的页面样板。示例不是 API 清单，而是完整页面：有状态、有真实按钮动作、有稳定布局，并且代码尽量贴近实际 App。
#预期效果
示例骨架运行后会出现一个原生导航页，包含状态文字、主按钮和表单反馈，用于验证 cookbook 的基础结构。
#可复制的页面样板
| 页面 | 优先学习点 | 适合改成 |
|---|---|---|
| 待办列表 | List、ForEach、搜索、稳定 id | 任务清单、收藏列表、消息列表 |
| 设置表单 | Form、Section、输入控件、toolbar | 设置页、资料编辑、偏好配置 |
| 紧凑仪表盘 | ScrollView、LazyVGrid、卡片按钮、固定尺寸 | 数据面板、运营看板、学习进度 |
| 原生列表详情 | NavigationStack、NavigationLink、列表详情 | 项目列表、课程目录、文件浏览 |
| 网络列表 | 加载状态、刷新、错误展示 | API 列表、搜索结果、远程内容 |
| 表格数据审核 | Table、筛选、批量动作 | 数据审核、订单表、日志表 |
| 聊天界面 | 底部输入、安全区、消息滚动 | AI 对话、客服、评论流 |
| 媒体采集相册 | 图片采集、网格、预览状态 | 相册选择、素材库、头像上传 |
| 相册浏览器 | LazyVGrid、AsyncImage、详情导航、.sheet | 素材库、作品集、商品图片 |
| 原生表单设置 | 表单控件、颜色选择、storage 持久化 | 偏好设置、资料编辑、控制面板 |
| 图表与画布实验室 | Chart、Canvas、DrawingContext | 指标图、阈值图、可视化实验 |
| 定位地图 | location、权限、MapView 标记 | 签到、位置记录、门店地图 |
| 运动传感器仪表盘 | motion、haptics、姿态图表 | 传感器工具、运动记录、硬件测试 |
| 通知提醒 | 通知授权、安排/取消提醒、表单保存 | 喝水提醒、待办提醒、定时通知 |
| 血压分析 | HealthKit 血压、摘要、趋势图 | 健康记录、个人指标看板 |
| 安全凭据库 | keychain、biometric、SecureField | Token 管理、私密笔记、账号保险箱 |
| 实时活动与后台任务 | Live Activity、后台时间、完成通知 | 同步进度、倒计时、上传任务 |
| 快捷指令启动器 | run_shortcut、open_url、系统设置入口 | 自动化面板、深链入口、调试工具 |
| 视频播放器 | VideoPlayer、片源搜索、播放设置 | 课程播放、素材预览、媒体工具 |
| WebView 与系统分享 | WebView、本地 HTML、ShareLink | 报告预览、帮助页、导出分享 |
#质量标准
- 示例入口应该能直接运行和预览，用户复制后可以看到完整页面。
- 所有按钮、输入、刷新、搜索都必须连接真实命名函数；点击后状态要有可见变化。
- 示例里的代码只展示一种主流程，不把同一段代码同时放在指南和 cookbook 里重复维护。
- 普通数据列表使用
List + Section + ForEach；只有仪表盘、画廊、聊天等特殊布局才使用ScrollView。 - 动态列表必须提供稳定 key，不能用临时下标代替真实 id。
#示例骨架
新示例优先按这个骨架写：状态在顶部，动作函数独立命名，视图函数只负责组装 View。
已复制
import appui
state = appui.State(title="Demo", saved=False)
def mark_saved():
state.saved = True
def status_row():
icon = "checkmark.circle.fill" if state.saved else "circle"
label = "Saved" if state.saved else "Not saved"
return appui.Label(label, system_image=icon)
def body():
return appui.NavigationStack(
appui.Form([
appui.Section("Status", [
status_row(),
appui.Button("Save", action=mark_saved).button_style("bordered_prominent"),
])
]).navigation_title(state.title)
)
appui.run(body, state=state)