分隔线

分隔线是用于分隔列表或其他容器中各个项目的细线。您可以使用 HorizontalDivider 和 VerticalDivider 可组合函数在应用中实现分隔线。

API Surface

这两个组件都提供用于修改其外观的参数：

  • thickness：使用此参数可指定分隔线粗细。
  • color：使用此参数可指定分隔线的颜色。

水平分隔线示例

以下示例演示了 HorizontalDivider 组件的实现。它使用 thickness 参数来控制线条的高度：

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}
Divider.kt

此实现会在两个文本组件之间呈现一条细水平线：

一个 Android 应用界面，显示两个文本项：“列表中的第一个项目”和“列表中的第二个项目”，两者之间以细水平线分隔。
图 1. 分隔两个文本组件的水平分隔线。

垂直分隔线示例

以下示例演示了 VerticalDivider 组件的实现。它使用 color 参数为线条提供自定义颜色：

@Composable
fun VerticalDividerExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("First item in row")
        VerticalDivider(color = MaterialTheme.colorScheme.secondary)
        Text("Second item in row")
    }
}
Divider.kt

此实现会在两个文本组件之间呈现一条细的竖线：

一个 Android 应用屏幕，显示两个文本项：“First item in row”和“Second item in row”，两者之间用一条细细的竖线分隔。
图 2. 分隔两个文本组件的垂直分隔线。

其他资源