Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/**
* A simple ListItem that displays text, detail text, a start icon, and an optional end icon.
*/
@Composable
fun ContactListItem(
text: @Composable () -> Unit,
modifier: Modifier = Modifier,
detailText: @Composable (() -> Unit)? = null,
startIcon: @Composable (() -> Unit)? = null,
endIcon: @Composable (() -> Unit)? = null,
) {
// Render a horizontal row of items with a min height of 64dp.
Row(modifier = modifier.preferredHeightIn(min = 64.dp)) {
Spacer(modifier = Modifier.width(16.dp))
// If specified, center the start icon vertically at the start of the list item.
if (startIcon != null) {
Box(modifier = Modifier.align(Alignment.CenterVertically)) {
startIcon()
}
Spacer(modifier = Modifier.width(16.dp))
}
// Render the text and detail text vertically within the list item.
Column(modifier = Modifier.align(Alignment.CenterVertically).weight(1f)) {
ProvideEmphasis(EmphasisAmbient.current.high) {
ProvideTextStyle(MaterialTheme.typography.subtitle1) {
// If not explicitly set by the caller, apply a high-emphasis,
// subtitle1 text style to the text.
text()
}
}
if (detailText != null) {
ProvideEmphasis(EmphasisAmbient.current.medium) {
ProvideTextStyle(MaterialTheme.typography.body2) {
// If not explicitly set by the caller, apply a medium-emphasis,
// body2 text style to the text.
detailText()
}
}
}
}
// If specified, center the end icon at the end of the list item.
if (endIcon != null) {
Box(modifier = Modifier.align(Alignment.CenterVertically)) {
endIcon()
}
}
Spacer(modifier = Modifier.width(16.dp))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment