列表

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

Glimmer 列表

设计原则

组织清晰:以清楚、便于扫读的纵向排列呈现信息。

项目一致:各列表项应使用一致的视觉结构。

焦点与导航明确:对于依赖方向切换的界面,列表必须清楚标出当前获得焦点的项目。

支持交互:列表项通常代表可选择的内容或可执行的操作。

使用与布局

列表可以容纳多种同级内容,并使用可重复的元素结构。与堆栈不同,列表会填满应用视图的容器。

同一视图内的可选择列表项
一个视图中可以显示一个或多个可选择的列表项。
列表边缘的黑色渐隐遮罩

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

带标题的列表

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

在一个视图中放置多个列表;这会增加视觉负担,也使焦点关系难以理解。
避免:在一个视图中放置多个列表;这会增加视觉负担,也使焦点关系难以理解。
列表项用不同深度表现焦点

用深度表达焦点

列表项在未获得焦点时使用深度 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