如何在Row/Column/Card Compose中添加左边框

Question

我试图向视图(Column)添加一个左/开始垂直边框，但无法得到解决方案。目前正在尝试使用列内的分隔线来实现，它还需要一个高度，但这取决于列中的内容，有时它可能会增长。

 Column(modifier = Modifier.padding(start = 34.dp)) {
                Divider(
                    color = Color.Red,
                    modifier = Modifier
                        .height(100.dp)
                        .padding(end = 34.dp).width(2.dp)
                )

- J.K

Answer 1

您可以使用drawLine函数来使用drawWithCache修饰符。

例如：

Column(modifier =
    Modifier
        .padding(start = 34.dp)
        .size(100.dp, 75.dp)
        .drawWithCache {
            onDrawWithContent {

                // draw behind the content the vertical line on the left
                drawLine(
                    color = Color.Red, 
                    start = Offset.Zero, 
                    end = Offset(0f, this.size.height),
                    strokeWidth= 1f
                )

                // draw the content
                drawContent()
            }
        }
){
    //...content
}

如果您想使用一个Divider，您可以使用fillMaxHeight()将内在测量应用到其父容器中。

类似这样：

Row(modifier = Modifier.height(IntrinsicSize.Min)) {

    Divider(
        color = Color.Red,
        modifier = Modifier
            .fillMaxHeight()  //important
            .width(2.dp)
    )
     
   Box(Modifier.fillMaxWidth().height(100.dp).background(Yellow))
}

- Gabriele Mariotti

Answer 2

你可以使用Modifier.drawBehind和drawLine来实现这一点。 代码

        TextButton(
            onClick = {
                //Click Functions
            },
            modifier = Modifier.drawBehind {
                val strokeWidth = 1 * density
                //Draw line function for left border
                drawLine(
                    Color.LightGray,
                    Offset(0f, strokeWidth),
                    Offset(0f, size.height),
                    strokeWidth
                )
            }
        )
        {
            Text("Left Border")
        }

输出

- Ashvin solanki

---

非常感谢！你的回答帮了很多忙） - Сергей Беляков