---
url: /design/home-and-widgets.md
---
# 首页与小组件设计

## 首页结构

首页上部显示当前阅读，下部显示最近阅读或可替换小组件。首页截图用于参考信息层级与大体分区，文字规则优先于图中的历史样式。

可采用以下**建议归整坐标**复现基准页面，不强制所有首页永久固定：

| 区域      | 基准位置                       |
| ------- | -------------------------- |
| 状态栏     | y = 0…40                   |
| App Bar | y = 56…104                 |
| 当前阅读卡片  | x = 36，y = 120，宽 612，高 300 |
| 小组件标题行  | x = 36，y = 444，宽 612，高 48  |
| 小组件内容   | x = 36，y = 508，宽 612，高 600 |
| 底栏      | y = 1136…1200              |

这里把原 CSS 的 446.87、510 等坐标归整到留白体系，不要求与截图逐像素一致。小组件标题与内容间距 16 px；内容底部 y = 1108，为底栏及热区留出空间。

## 小组件契约

* 基准内容尺寸固定为 **612 × 600 px**，不包含上方由宿主管理的标题行。
* 宿主已经提供外部留白，小组件可贴其内容边界制作，不再强制增加 36 px 内边距。
* 应用可声明支持小组件，提供标题、标题左侧图标与内容实现，例如替换“最近阅读”文字和图标。
* 小组件布局不额外强制套用列表或宫格模板，但仍遵守公共字体、颜色、白底、交互和刷新规则。
* 小组件自绘与应用自绘共享相同组件逻辑；坐标使用本地原点 (0, 0)，显示与触摸都限制在宿主分配矩形内。
* **补充建议**：宿主管理标题行和切换入口，组件不重复绘制标题。
* 内容过多时摘要展示并进入应用；确需组件内部分页时使用同样的整页规则，不与首页手势冲突。
* 加载、无数据、错误与离线状态都应有稳定的静态展示。
* 刷新按数据变化请求，由系统合并调度；隐藏时不持续刷屏，不使用秒级时钟或动画维持活跃。

## 坐标转换与宿主职责（补充建议）

基准内容区在屏幕 `(36, 508, 612, 600)`；小组件本地 `(10, 20)` 显示在屏幕 `(46, 528)`。触摸先检查是否命中内容区，再减去宿主原点得到本地坐标。绘制、热区和刷新都裁剪到 `[0, 612) × [0, 600)`。

| 行为 | 宿主 | 小组件 |
| --- | --- | --- |
| 标题与切换入口 | 管理容器并绘制 | 声明标题和图标，不重复绘制 |
| 尺寸与坐标 | 分配矩形、裁剪与坐标转换 | 在本地范围排版与处理输入 |
| 更新 | 合并并提交系统调度 | 按真实数据变化请求更新 |
| 隐藏 / 移除 | 停止显示调度并恢复画面 | 不产生无意义刷新 |
| 空 / 错误 / 离线 | 保持宿主结构稳定 | 提供静态说明与可行入口 |

“更多”应指向完整内容，“更换”应指向组件切换；二者具体行为需分别定义，不能混用文案。小组件需要的内部留白按内容选择，不再重复施加宿主的外边距。

当前阅读图文组、宿主标题与小组件内部留白的补充建议见[系统组件留白](/design/spacing-and-regions)，该页同时保存本次提供的首页参考图。参考图表达信息结构，字号与灰阶仍按文字规范执行。