How to customize the alignment of leadingContent and trailingContent of androidx.compose.material3.ListItem?

Question

Given the following androidx.compose.material3.ListItem code snippet ...

ListItem(
    leadingContent = {
        LeadingIcon()
    },
    trailingContent = {
        TrailingIcon()
    },
    overlineText = {
        Text(
            text = item.text,
        )
    },
    headlineText = {
        Text(
            text = item.title,
            overflow = Ellipsis,
            maxLines = 1,
        )
    },
    supportingText = {
        if (item.subtitle.isNotEmpty()) {
            Text(
                text = item.subtitle,
                overflow = Ellipsis,
                maxLines = 1,
            )
        }
    }
)

Is there a way to vertically center the leading and trailing content/icons?
It would also be desired that the item shrinks its height if no subtitle is given. The icons should then still be centered.

Related

• Can ListItem leadingContent be top aligned in Jetpack Compose Material3?
• https://m3.material.io/components/lists/specs#583e3432-0dc0-4a18-bfb4-a0924f67891b
• Jetpack Compose: Center Icon or Trailing elements in a ListItem

Answer 1

I don't think this looks the best, but you could try setting two fixed heights for the content with item.subtitle and without item.subtitle, and wrap the Icon in a Column and set the alignment to center:

ListItem(
    modifier = Modifier.height(
        if (item.subtitle.isNotEmpty()) 84.dp else 64.dp
    ),
    leadingContent = {
        Column(
            modifier = Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.Center
        ) {
            LeadingIcon()
        }
    },
    trailingContent = {
        Column(
            modifier = Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.Center
        ) {
            TrailingIcon()
        }
    },
    ...
)