创建垂直分隔线 Jetpack Compose

Posted 2023-04-18

【中文标题】创建垂直分隔线 Jetpack Compose

【英文标题】：Create Vertical Divider Jetpack Compose

【发布时间】：2021-08-27 08:05:17

【问题描述】：

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

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

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

【问题讨论】：

你只是忘了指定.height(1.dp)

【参考方案1】：

您可以使用Divider 函数和width(xx.dp) 修饰符，将intrinsic measurements 应用于其父容器。

类似：

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")

【讨论】：

你能解释一下为什么需要内在函数吗？我阅读了 Compose 文档中的布局，但仍然不明白

@wiryadev 不需要，例如，如果您有固定高度。但是，如果您想在不固定高度的情况下获得答案中报告的布局，则必须使用它。

【参考方案2】：

这里有一个VerticalDivider Composable，你可以像内置的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