如何在行/列/卡片撰写中添加左边框

Question

我正在尝试添加左/开始垂直边框来查看（列），但无法获得解决方案。截至目前，我们试图在列内使用分隔线来实现，它也需要一个高度，但这取决于列内的内容，有时它可能会增长。

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

Answer 1

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

就像是：

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
}

如果您想使用 a，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))
}