创建垂直分隔线 Jetpack Compose

Question

如何使用 Jetpack Compose 创建垂直分隔线？我尝试使用 Spacer 和 Box 来做到这一点，但它根本没有出现。这是我尝试过的：

Box(
    modifier = Modifier
        .fillMaxHeight()
        .width(2.dp)
        .background(color = Color.Black)
)

但这根本行不通。那么如何在 Jetpack Compose 中做垂直分隔线呢？

Answer 1

这是一个VerticalDivider可组合项，您可以像内置Divider水平项一样使用它。

@Composable
fun VerticalDivider(
    modifier: Modifier = Modifier,
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    thickness: Dp = 1.dp
) {
    Box(
        modifier
            .fillMaxHeight()
            .width(thickness)
            .background(color = color)
    )
}

private const val DividerAlpha = 0.12f

Answer 2

您可以使用Divider带有width(xx.dp)修饰符的函数，将内部测量值应用到其父容器。

就像是：

Row(Modifier
    .height(IntrinsicSize.Min)
    .fillMaxWidth()
    .background(Color.Yellow)) {

        Text("First Text")

        Divider(
            color = Color.Red,
            modifier = Modifier
                .fillMaxHeight()
                .width(1.dp)
        )

        Text("Second text")
}