Add separator in LazyColum in jetpack compose-CodePudding

I am learning LazyColum in

2 Without separator in both Top and Bottom

But problem is that I don't know in idiomatic way in jetpack compose. I did this in Xml using Recyclerview.

import androidx.compose.foundation.lazy.items

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        items(messages) { message ->
            MessageRow(message)
        }
    }
}

Can you guys help me on this? Many Thanks

CodePudding user response：

Just make it part of your item

LazyColumn {

    items(messages) { message ->
        MessageRow(message)
        Box(Modifier.fillMaxWidth().height(1.dp).background(Color.Red)) //for after every element
    }
}

If you want to add it only on the top/bottom of the list you can use item:

LazyColumn {
    item { Box(Modifier.fillMaxWidth().height(1.dp).background(Color.Red)) }
    items(messages) { message ->
        MessageRow(message)
    }
}

To make it conditional use itemsIndexed

LazyColumn {
    itemsIndexed(messages) { index, message ->
        if(index == 0) {
        //First element, either show divider or don't
        }
        ....
        MessageRow(message)
        ....
        if (index == messages.size) {
        // last item, show divider or don't
        }
    }
}

CodePudding user response：

You just have to add Divider composable to your MessageRow :

@Composable
fun MessageRow(message:Message){
    Column(){
        Divider(Modifier.fillMaxWidth(), thickness = 1.dp, color = Color.LightGray) //above your row
        Row(Modifier.fillMaxWidth){
            
        }
    }
}