hi! does anyone know how to center vertically the ...
# compose
p
hi! does anyone know how to center vertically the Icon or trailing elements in a ListItem? ...
j
I think you want something like`Row(`
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxSize()
) { ... }
p
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
you will find icon left and vertically center aligned
we use these in LazyColumn/ScalingLazyColumn all the time
p
great, let me take a look
c
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.