expandableItem

Function

Android

public fun ScalingLazyListScope.expandableItem(
    state: ExpandableState,
    key: Any? = null,
    content: @Composable (expanded: Boolean) -> Unit,
): Unit

Adds a single item, that will be expanded/collapsed according to the ExpandableState.

Example of an expandable text:

The item should support two levels of information display (for example, a text showing a few lines in the collapsed state, and more in the expanded state)

Parameters


state	The `ExpandableState` connected to this item.
key	A stable and unique key representing the item. Using the same key for multiple items in the list is not allowed. Type of the key should be saveable via Bundle on Android. If null is passed the position in the list will represent the key. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one.
content	the content displayed by the item, according to its expanded/collapsed state.

Code Examples

ExpandableTextSample

@Composable
fun ExpandableTextSample() {
    val expandableState = rememberExpandableState()
    ScalingLazyColumn(modifier = Modifier.fillMaxSize()) {
        expandableItem(expandableState) { expanded ->
            Text(
                "Account Alert: you have made a large purchase.\n" +
                    "We have noticed that a large purchase was charged to " +
                    "your credit card account. " +
                    "Please contact us if you did not perform this purchase. " +
                    "Our Customer Service team is available 24 hours a day, " +
                    "7 days a week to answer your account or product support question.",
                maxLines = if (expanded) 20 else 3,
                modifier = Modifier.padding(horizontal = 10.dp),
            )
        }
        expandableButton(expandableState) {
            OutlinedCompactChip(
                label = {
                    Text("Show More")
                    Spacer(Modifier.size(6.dp))
                    Icon(painterResource(R.drawable.ic_expand_more_24), "Expand")
                },
                onClick = { expandableState.expanded = true },
            )
        }
    }
}