https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
p

Pablo Reyes

11/16/2021, 4:38 PM
hi! does anyone know how to center vertically the Icon or trailing elements in a ListItem? ...
j

John Nichol

11/16/2021, 4:47 PM
I think you want something like`Row(` 
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxSize()
) { ... }
p

Pablo Reyes

11/16/2021, 4:52 PM
thanks! but that doesn't work.. I'm using
Copy code
ListItem(
        Modifier.clickable(onClick = onClick),
        icon = {
         .... // Here are the elements I want to center
        }
}
If I use a Column/Row inside the Icon it does nothing 😕.
j

John Nichol

11/16/2021, 4:54 PM
you will find icon left and vertically center aligned
we use these in LazyColumn/ScalingLazyColumn all the time
p

Pablo Reyes

11/16/2021, 4:55 PM
great, let me take a look
c

Chris Sinco [G]

11/17/2021, 5:25 AM
The 
ListItem
component is an experimental Material component so it definitely has some quirks and probably bugs. One thing to note though is that it's designed to be very close to the Material spec of list item templates (see the demo on this guideline page), so deviating from that may cause unforeseen issues, e.g. putting text in the Icon slot.
I would suggest actually rolling your own ListItem since it seems you need to customize the content in the slots more than the design spec accommodates for. In looking at the implementation of ListItem, there's not a lot going on in there besides highly templated layout decisions, so I think you could achieve the same thing pretty quickly.
3 Views
Powered by