外观
HorizontalDivider — 全站统一的分隔线
列表项之间、分组之间的那条细线。全站只有这一个实现 —— 以前同时存在 ListItemDivider / SectionDivider / InsetListItemDivider,再加上各处手写的 HorizontalDivider,同一个界面上能看出好几种观感,现在全部收敛到这里。
基本用法
kotlin
HorizontalDivider() // 默认:左右各缩进 16dp
Column {
ListItem(title = "第一项")
HorizontalDivider()
ListItem(title = "第二项")
}
HorizontalDivider(startIndent = 0.dp, endIndent = 0.dp) // 通栏,撑满整宽参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modifier | Modifier | Modifier | 修饰符 |
startIndent | Dp | 16.dp | 左端缩进,与列表项内容对齐 |
endIndent | Dp | 16.dp | 右端缩进 |
thickness | Dp | 1 个物理像素 | 线宽,默认按屏幕密度反算成 1 / density |
color | Color | outlineVariant @ 70% | 线的颜色 |
要点
- 粗细是 1 个物理像素,不是
1.dp。 设计稿里的1px指的是物理像素;而 Compose 里写1.dp,在 3x 屏上会被放成 3 个物理像素 —— 观感从「发丝线」变成一条灰带,这才是以前「分割线太粗」的真正原因。默认值已经按1 / density反算好了,不要手动传thickness。 - 缩进是用
padding实现的,不是把线的两端切掉。所以startIndent/endIndent不影响线的 alpha 或粗细。 - 不要再手写
HorizontalDivider。 直接调 Material3 那个版本,拿到的是1.dp的默认粗细和没叠 alpha 的outlineVariant—— 跟这条不是同一条线。 - 要做「从图标右缘开始」的分隔线时,
startIndent应该是 20 + 48 + 14 = 82.dp(列表项水平内边距 + 图标容器宽度 + 图标与文字间距)。别凭感觉给数字。
说明
- 颜色为什么是
outlineVariant再叠 70% alpha:outlineVariant是 M3 给「分隔线」的角色色,但它同时被用作卡片描边,直接用会偏重。分隔线本来就该比描边更淡,所以再压一层 alpha。 - 为什么值得单独抽一个组件:分隔线是「规范型」组件 —— 没有交互、没有状态,唯一的成本就是各处写得不一致。收敛成一个函数之后,改规格只需要改一个地方。
- 列表里不必每行都插分隔线:行与行之间靠留白(
ListItem自己是 16dp 垂直内边距)已经分得开。分隔线用在语义分组之间(比如「设置」组和「关于」组),不是每一行。