列表项

列表视图以单列列表的形式显示内容,并可垂直滚动。当用户依赖阅读文本和查看数据来进行选择时,此视图最为合适。

列表项比网格项占用更少的垂直空间,因此屏幕上可以显示更多项目。

标注图标
网格组件
网格提供了一种替代显示模式,可以突出显示图像。

解剖学

在列表视图中,每一行包含一个代表一个列表项的图块。主要操作可以填充整个图块,因此用户可以从图块内的任何位置发起操作。对于以图标和文本表示的辅助操作,只有包含图标和文本的区域才能执行操作。

1. 主图标
2. 开关按钮
3. 关闭开关按钮
4. 一手和二手文本
5. 内容图块

规格

单行列表项

两行列表项

双行列表项反转

带标题的多行列表项

无标题的多行列表项

列表项文本溢出

包含拆分操作的列表项

列表项中的指示器图标位置

缩放布局

这些参考布局展示了如何调整列表项以适应不同宽度和高度的屏幕。(宽度和高度类别在“布局”部分中定义。)请注意,所有像素值均为渲染像素,未进行任何下采样或上采样。

标注图标
布局
不同屏幕尺寸的边距、关键线和内边距
标注图标
布局标签
E、M、KL、P、Flex 的定义

标准屏幕、宽屏和超宽屏

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

超宽屏幕

款式

排版

字体样式字体重量大小(dp)
正文 1机器人常规的32
身体 3机器人常规的24

颜色

元素颜色(日间模式)颜色(夜间模式)
主要类型/图标白色的白色 @ 88%
次要类型/图标白色 @ 72%白色 @ 60%
分隔线白色 @ 22%白色 @ 12%
列表项背景黑色的黑色的

浆纱

元素大小(dp)
列表项高度96(短屏)/ 116(标准屏)/ 128(长屏)
主图标44
三级图标24
内容图块列表项高度减去 1dp
中等头像76
分隔线粗细1

示例

设置列表 - 日
设置列表 - 夜间
设置列表 - 日
设置列表 - 夜间
媒体列表 - 日
媒体列表 - 夜间