创建垂直分隔符 Jetpack Compose

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

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

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

您可以使用Divider https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#Divider(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)可与width(xx.dp)修饰符应用内在测量 https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements到其父容器。

就像是：

Row(Modifier
    .height(IntrinsicSize.Min) //intrinsic measurements
    .fillMaxWidth()
    .background(Color.Yellow)
) {
        Text("First Text")

        Divider(
            color = Color.Red,
            modifier = Modifier
                .fillMaxHeight()  //fill the max height
                .width(1.dp)
        )

        Text("Second text")
}

正如中所解释的doc https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements:

Row 可组合项minIntrinsicHeight将是最大的minIntrinsicHeight它的孩子。这Divider元素的minIntrinsicHeight is 0因为如果没有给出约束，它不占用空间；这TextField minIntrinsicHeight将是给定特定宽度的内容的宽度。因此，Row元素的高度限制将是最大值minIntrinsicHeight of the TextField的内容。这Divider然后将其高度扩展到由给出的高度约束Row.