Hi All. Looking to to create a Lazy Column where ...

# compose

[mattinger]

Hi All. Looking to to create a Lazy Column where the header scrolls with the content, but there is a border only around the actual items themselves. I’ve seen some stuff about using drawWithContent and clipping, but this seems like a large amount of effort to accomplish a basic pattern.

[Chris Sinco [G]]

Do you have a screenshot of the result you want?

[mattinger]

@Chris Sinco [G]

[mattinger]

[mattinger]

I did try to use drawWithContent and a cliprect, but it seemed to not do much

[mattinger]

fun Modifier.drawWithFirstItemBorder(): Modifier = composed {
    drawWithContent {
        clipRect(
            left = 0f,
            right = 0f,
            top = 0f,
            bottom = size.height - 1.dp.toPx(),
            clipOp = ClipOp.Difference
        ) {
            [e-mail]()
        }
    }
        .border(
            shape = RoundedCornerShape(
                topStart = XDSCornerRadius.medium,
                topEnd = XDSCornerRadius.medium
            ),
            width = 1.dp,
            color = XfinityTheme.colors.strokeNeutralBase
        )
}

[mattinger]

And this what i got when i tried this:

[Chris Sinco [G]]

I see - have you also considered using Column with verticalScroll instead of LazyColumn? That makes this kind of styling much easier, especially if your list of items isn’t very high (~ under 50) / fixed

[Chris Sinco [G]]

This is also an approach you can take, which is to draw only parts of the border of each item based on whether it’s the first, last, or anything in-between: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1621543721448900?thread_ts=1621532094.436900&cid=CJLTWPH7S

[Chris Sinco [G]]

@Andrey Kulikov may also have some other ideas

[mattinger]

Yeah, i did consider using Column with a card inside of it. That card would have the border and a column of items in it. I did also consider drawing the borders piecemeal like you mentioned about, but that's extremely intrusive to be honest, and very easy to get wrong.

[Chris Sinco [G]]

So the Column approach does not work for you?