列表视图在垂直滚动的单列列表中将内容显示为订单项。如果用户依靠阅读文本和查看数据来进行选择,那么此视图效果最佳。
与网格项相比,列表项的垂直空间要小,因此可在屏幕上显示更多项。
解剖学
在列表视图中,每一行都包含一个表示一个列表项的图块。主要操作可以填充图块,以便用户从图块中的任何位置执行操作。对于以图标和文本表示的补充操作,只有包含图标和文本的区域才可供操作。

2. 切换器按钮
3. 切换器按钮关闭
4. 主要文本和次要文本
5. 内容图块
规格
单行列表项

两行式列表项

两行式列表项已反转

含标题的多行列表项

多行列表项(无标题)

包含文字溢出的列表项

包含拆分操作的列表项

指示器项在列表项中的位置

缩放布局
这些参考布局展示了如何调整列表项以适应各种宽度和高度的屏幕。(宽度和高度类别在布局部分定义。)请注意,所有降采样或上采样之前,所有像素值都是渲染的像素。
标准屏幕、宽屏幕和超宽屏幕

带内容图块的标准屏幕、宽屏幕和超宽屏幕

超宽屏幕

样式
Typography(排版)
类型样式 | 字体 | 重量 | 大小 (dp) |
---|---|---|---|
正文 1 | Roboto | 正常 | 32 |
正文 3 | Roboto | 正常 | 24 |
颜色
元素 | 颜色(日间模式) | 颜色(夜间模式) |
---|---|---|
主要类型 / 图标 | White | 白色 @ 88% |
次要类型 / 图标 | 白色 @ 72% | 白人 60% |
分隔线 | 白色 @ 22% | 白色 @ 12% |
列表项背景 | 黑色 | 黑色 |
尺寸
元素 | 大小 (dp) |
---|---|
列表项高度 | 96(短屏幕)/116(标准屏幕)/128(高屏幕) |
主图标 | 44 |
三级图标 | 24 |
内容图块 | 列表项高度减去 1dp |
中等头像 | 76 |
分隔线粗细 | 1 |
示例





