列表是承载一组元素的容器,内置滚动与焦点行为。

设计原则
组织清晰:以清楚、便于扫读的纵向排列呈现信息。
项目一致:各列表项应使用一致的视觉结构。
焦点与导航明确:对于依赖方向切换的界面,列表必须清楚标出当前获得焦点的项目。
支持交互:列表项通常代表可选择的内容或可执行的操作。
使用与布局
列表可以容纳多种同级内容,并使用可重复的元素结构。与堆栈不同,列表会填满应用视图的容器。


用遮罩提示还有更多内容。当列表项目超过当前视图可容纳的范围时,在列表边缘使用黑色遮罩。

必要时为列表添加标题。可以使用静态标题或吸顶标题,帮助用户理解内容。


用深度表达焦点
列表项在未获得焦点时使用深度 0,获得焦点时使用深度 +4,并在两种状态间过渡。

列表项可以直接执行操作
列表项本身可以代表一项操作,应将操作归于该列表项。
应高亮轻点时实际会被触发的控件,即使此时还能滚动其他内容。如果列表或卡片能够在另一元素后方滚动,也应只让响应轻点的项目获得焦点。


组件构成
列表由可滚动容器和间距一致的列表项组成。当内容超出视口时,应采用纵向滚动,并尽量减小越界滚动的幅度。

A. 容器:可滚动区域。
B. 列表项。
C. 系统栏。

列表项是列表中的每一个独立元素,包含:
A. 形状。
B. 边框。
C. 前置图标。
D. 文字内容。
E. 后置指示元素。
自定义
列表的大部分自定义设置都作用于列表项。
| 属性 | 可自定义 | 默认值 |
|---|---|---|
| 列表项:形状 | 是 | 40 dp |
| 列表项:前置与后置图标 | 是 | Medium Symbol Icon |
| 列表项:内边距 | 是 | 2d dp、20 dp(原文如此) |
| 列表项:内容 | 是 | 单行:一个 Text 组件,以 Body Small 呈现主标签。 双行:一个 Column 内包含两个 Text 组件,分别呈现主标签与次标签。 主标签:Title Small;次标签:Body Small。 |
| 列表:纵向排列间距(verticalArrangement) | 是 | 20 dp |