---
url: /design/components.md
---
# 系统组件设计目录

## PagedList：分页列表

* 每项由主标题、可选副信息、可选前导图标与可选尾部状态／箭头组成。
* Read Pico 当前设置列表主标签 36 px／44 px 行框，副信息 24 px／32 px 行框；首页最近阅读标题 32 px／40 px 行框，元信息 26 px／34 px 行框。整项触摸；设置行当前为 96 px 高、项间 16 px，其他列表按内容计算，不把单页行槽当作通用固定值。
* 默认使用留白划分行，不默认绘制卡片边框。高密度列表若仅靠留白仍难以快速区分相邻完整条目，可按[分隔线规则](/design/separators)使用 1–2 px 轻分隔线；不要同时叠加灰底、卡片边框和分隔线重复表达同一层级。
* 项目必须完整显示，列表按实际可用高度和字体度量分页，不硬编码每页固定行数。
* 不建议展开／折叠菜单；需要二级设置时打开新的页面。
* 分组标题必须与至少一个条目同页，避免孤立标题。
* 返回列表恢复原页和原选择；内容更新时优先保持用户当前浏览位置。

## IconGrid：方形图标加名称宫格

* 基准设备默认 3 列 × 3 行，或 3 列 × 4 行；不能为增加项目缩小字号和热区。
* 上方正方形图标区域，下方名称；Read Pico 应用宫格当前使用 64 × 64 px 图标槽、32 px 名称与 40 px 行框，名称最多两行，同页高度一致。64 px 只适用于此布局，不规定所有应用图标的尺寸。
* 图标和名称构成一个点击单元。
* **补充示例**：在完整 612 px 宽内容区内，列 Gap = 24 时，三列单元宽为 (612−48)/3 = 188 px；单元内图标可使用更小的居中方形槽，不要求图标本身铺满 188 px。
* 实际行数必须计入系统栏、分页指示器、行间距、标题和名称高度；放不下 3×4 时退回 3×3 或更少完整行。

## CoverGrid：长方形封面宫格

* 以竖向长方形封面为主要内容，不默认在封面下再显示名称。
* 参考设备建议最多 3 列、3–4 行，最终以完整封面比例与触摸区域能否容纳为准，不机械套用方形宫格。
* 保留封面长宽比，默认完整适配，禁止随意拉伸或裁掉书名。
* 无封面时使用干净占位图；若占位图内显示生成的书名，遵守 20 px 最低字号。
* 配置书名语义标签，并提供详情页或列表视图，以便识别文字模糊、相似封面或缺失封面的书籍。
* 封面边缘如需细线用于表示图像边界，可作为内容表达例外；不据此给所有界面区域加框。

## 建议补充的基础组件

| 组件                      | 行为建议                          |
| ----------------------- | ----------------------------- |
| IconButton / TextButton | 可见形状与热区分离；明确禁用、按下、执行中、完成状态    |
| ChoiceRow               | 单选／多选使用勾选或形状变化，不只变灰           |
| SettingRow              | 简单开关可行内切换；复杂配置进入二级页           |
| PageIndicator           | 方向、页数与当前页由组件统一管理              |
| EmptyState              | 说明当前无内容，并提供一个明确后续操作           |
| ErrorState              | 错误原因、保留的内容与重试入口；禁止仅显示模糊图标     |
| ProgressState           | 静态阶段文字或离散更新的进度，不做持续动画         |
| ConfirmationPage        | 删除等不可轻易恢复的操作显示对象与后果，确认和取消明确分开 |
| TextInput               | 优先调用系统输入界面；输入内容、清除与提交有明确可见入口  |

这些是建议补齐的组件范围，不表示要求立即实现全部组件。页面布局框线与控件自身必要的勾选框、输入范围边界应分开理解；控件形状可以保留，避免成为装饰性“框套框”。

## 分页容量计算（补充建议）

假设内容区高 1000 px，标题与间隔占 68 px，底部分页指示器占 24 px，实际列表项高 96 px，项间留白 16 px。N 项需满足 `N × 96 + (N − 1) × 16 ≤ 908`，在这些假设下最多 8 项。字号、内容或容器变化后重新计算，8 不作为固定组件容量。

三列 188 px 宽的示例仅适用于完整 612 px 宽内容区。若右侧预留 24 px 纵向指示器槽，列宽为 `(588 − 2 × 24) / 3 = 180 px`。图标、名称、热区必须位于各自单元内。

## 组件规格模板（补充建议）

每个组件注明职责、必选与可选内容、可用矩形、字体度量、热区、正常 / 空 / 加载 / 失败 / 禁用状态、导航与返回、变化区域和验收结果。组件名称表达设计意图，不对应已存在函数。

分页指示器规则见[导航与分页](/design/interaction-and-states)，分隔线例外见[分隔线规则](/design/separators)。

设置行的推荐行槽、图文间距、宫格容量及交互分页槽见[系统组件留白](/design/spacing-and-regions)。该页提供完整计算例子；80 px 最低推荐行高与舒适行槽分别理解，不硬编码每页条目数。