Skip to content

HorizontalDivider — 全站统一的分隔线 ​

列表项之间、分组之间的那条细线。全站只有这一个实现 —— 以前同时存在 ListItemDivider / SectionDivider / InsetListItemDivider,再加上各处手写的 HorizontalDivider,同一个界面上能看出好几种观感,现在全部收敛到这里。

基本用法 ​

kotlin
HorizontalDivider()                       // 默认:左右各缩进 16dp

Column {
    ListItem(title = "第一项")
    HorizontalDivider()
    ListItem(title = "第二项")
}

HorizontalDivider(startIndent = 0.dp, endIndent = 0.dp)   // 通栏,撑满整宽

参数 ​

参数类型默认值说明
modifierModifierModifier修饰符
startIndentDp16.dp左端缩进,与列表项内容对齐
endIndentDp16.dp右端缩进
thicknessDp1 个物理像素线宽,默认按屏幕密度反算成 1 / density
colorColoroutlineVariant @ 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 垂直内边距)已经分得开。分隔线用在语义分组之间(比如「设置」组和「关于」组),不是每一行。