How to add left border in a Row/Column/Card Compose-CodePudding

I'm trying to add a left/start vertical border to view (Column), Not able to get the solution. as of now was trying to achieve using a divider inside the column it also need a height, but it depends on the contents inside the column, sometime it may grow.

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

CodePudding user response：

You can use the drawWithCache modifier.

Something like:

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.Red, Offset.Zero, Offset(0f, this.size.height), 1f)
                // draw the content
                drawContent()

            }
        }
) {
        //...
}

If you want to use a Divider you can use fillMaxHeight() applying an

CodePudding user response：

You can achive this with Modifier.drawBehind and drawLine

Code

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

Output