SegmentedListItem

MultiSelectionSegmentedListItemSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun MultiSelectionSegmentedListItemSample() {
    val count = 4
    val colors =
        ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
        repeat(count) { idx ->
            var checked by rememberSaveable { mutableStateOf(false) }
            SegmentedListItem(
                checked = checked,
                onCheckedChange = { checked = it },
                colors = colors,
                shapes = ListItemDefaults.segmentedShapes(index = idx, count = count),
                leadingContent = { Checkbox(checked = checked, onCheckedChange = null) },
                trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
                supportingContent = { Text("Additional info") },
                content = { Text("Item ${idx + 1}") },
            )
        }
    }
}

SegmentedListItemWithExpansionSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun SegmentedListItemWithExpansionSample() {
    var expanded by rememberSaveable { mutableStateOf(false) }
    val numChildren = 3
    val itemCount = 1 + if (expanded) numChildren else 0
    val childrenChecked = rememberSaveable { mutableStateListOf(*Array(numChildren) { false }) }
    val colors =
        ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
    ) {
        Spacer(Modifier.height(100.dp))
        SegmentedListItem(
            onClick = { expanded = !expanded },
            modifier =
                Modifier.semantics { stateDescription = if (expanded) "Expanded" else "Collapsed" },
            colors = colors,
            shapes = ListItemDefaults.segmentedShapes(index = 0, count = itemCount),
            leadingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
            trailingContent = {
                Icon(
                    if (expanded) Icons.Default.ExpandLess else Icons.Default.ExpandMore,
                    contentDescription = null,
                )
            },
            content = { Text("Click to expand/collapse") },
        )
        AnimatedVisibility(
            visible = expanded,
            enter = expandVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
            exit = shrinkVertically(MaterialTheme.motionScheme.fastSpatialSpec()),
        ) {
            Column(verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap)) {
                repeat(numChildren) { idx ->
                    SegmentedListItem(
                        checked = childrenChecked[idx],
                        onCheckedChange = { childrenChecked[idx] = it },
                        colors = colors,
                        shapes =
                            ListItemDefaults.segmentedShapes(index = idx + 1, count = itemCount),
                        leadingContent = {
                            Icon(Icons.Default.Favorite, contentDescription = null)
                        },
                        trailingContent = {
                            Checkbox(checked = childrenChecked[idx], onCheckedChange = null)
                        },
                        content = { Text("Child ${idx + 1}") },
                    )
                }
            }
        }
    }
}

SingleSelectionSegmentedListItemSample

@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun SingleSelectionSegmentedListItemSample() {
    val count = 4
    val colors =
        ListItemDefaults.colors(containerColor = MaterialTheme.colorScheme.surfaceContainer)
    Column(
        modifier = Modifier.selectableGroup(),
        verticalArrangement = Arrangement.spacedBy(ListItemDefaults.SegmentedGap),
    ) {
        var selectedIndex: Int? by rememberSaveable { mutableStateOf(null) }
        repeat(count) { idx ->
            val selected = selectedIndex == idx
            SegmentedListItem(
                selected = selected,
                onClick = { selectedIndex = if (selected) null else idx },
                colors = colors,
                shapes = ListItemDefaults.segmentedShapes(index = idx, count = count),
                leadingContent = { RadioButton(selected = selected, onClick = null) },
                trailingContent = { Icon(Icons.Default.Favorite, contentDescription = null) },
                supportingContent = { Text("Additional info") },
                content = { Text("Item ${idx + 1}") },
            )
        }
    }
}