I have a lazy column that looks like this: ```Lazy...

# compose

[Justin Xu]

I have a lazy column that looks like this:

LazyColumn {
    items() {
    ...
    }
    items() {
    ...
    }
}

Where I want each items to be surrounded by a Box with a different color. How do I achieve this inside LazyListScope?

[ephemient]

you can fake it by giving each item a background (and maybe padding)

[Justin Xu]

@Loney Chou For more context, I want to display two lists using the items block in the original question, and want to lazily load the items in each list. But if I need to do

item {
    Box {
    ... items here ...
    }
}

, would this lazily load everything inside the item block at once then?

[ephemient]

either the whole item is loaded, or it is not

[ephemient]

what I mean by "faking it":

fun LazyListScope.columnItems(
    count: Int,
    backgroundColor: Color = Color.Unspecified,
    paddingValues: PaddingValues = PaddingValues.Absolute(),
    key: ((Int) -> Any)? = null,
    contentType: (Int) -> Any? = { null },
    itemContent: @Composable LazyItemScope.(index: Int) -> Unit
) {
    if (count != 0) {
        items(count = count, key = key, contentType = contentType) { index ->
            val layoutDirection = LocalLayoutDirection.current
            Box(
                modifier = Modifier
                    .background(backgroundColor)
                    .fillParentMaxWidth()
                    .padding(
                        start = paddingValues.calculateStartPadding(layoutDirection),
                        top = if (index == 0) paddingValues.calculateTopPadding() else 0.dp,
                        end = paddingValues.calculateEndPadding(layoutDirection),
                        bottom = if (index == count - 1) paddingValues.calculateBottomPadding() else 0.dp
                    )
            ) {
                itemContent(index)
            }
        }
    } else {
        item {
            Box(modifier = Modifier.background(backgroundColor).fillParentMaxWidth().padding(paddingValues))
        }
    }
}

it'll look like a box containing all the items, without being a box

[Justin Xu]

Ahh okay I see, thanks