https://kotlinlang.org logo
#compose
Title
# compose
m

mattinger

03/07/2022, 6:47 PM
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.
c

Chris Sinco [G]

03/07/2022, 8:34 PM
Do you have a screenshot of the result you want?
m

mattinger

03/07/2022, 10:11 PM
@Chris Sinco [G]
I did try to use drawWithContent and a cliprect, but it seemed to not do much
Copy code
fun Modifier.drawWithFirstItemBorder(): Modifier = composed {
    drawWithContent {
        clipRect(
            left = 0f,
            right = 0f,
            top = 0f,
            bottom = size.height - 1.dp.toPx(),
            clipOp = ClipOp.Difference
        ) {
            this@drawWithContent.drawContent()
        }
    }
        .border(
            shape = RoundedCornerShape(
                topStart = XDSCornerRadius.medium,
                topEnd = XDSCornerRadius.medium
            ),
            width = 1.dp,
            color = XfinityTheme.colors.strokeNeutralBase
        )
}
And this what i got when i tried this:
c

Chris Sinco [G]

03/07/2022, 11:46 PM
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
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
@Andrey Kulikov may also have some other ideas
m

mattinger

03/09/2022, 3:17 PM
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.
c

Chris Sinco [G]

03/09/2022, 3:38 PM
So the Column approach does not work for you?
4 Views