container/io.daio.wild.container/ExperimentalContainer

ExperimentalContainer

@Composable

fun ExperimentalContainer(onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, onLongClick: () -> Unit? = null, style: Style = StyleDefaults.None, interactionSource: MutableInteractionSource? = null, selected: Boolean? = null, content: @Composable BoxScope.() -> Unit)

ExperimentalContainer is a building block component that can be used for any selectable TV element or on its own as a selectable container. The Container handles an additional state compared to Container to indicate whether it is currently selected.

The experimental version uses the []

Since

0.4.0

Parameters

onClick

Callback to be called when the container is clicked. If this and onLongClick are null, the container will not be focusable on TV.

modifier

Modifier to be applied to the layout corresponding to the container.

enabled

Whether or not the container is enabled.

selected

Whether or not the container is currently selected.

onLongClick

Callback to be called when the container is long clicked. If this and onClick are null, the container will not be focusable on TV.

style

The Style to supply to the Container. See StyleDefaults.style.

interactionSource

An optional hoisted MutableInteractionSource for observing and emitting Interactions for this container.

content

Defines the Composable content inside the container.

Example:

ExperimentalContainer(
    style =
        StyleDefaults.style(
            colors = StyleDefaults.colors(
                backgroundColor = Color.Black,
                contentColor = Color.White,
                focusedBackgroundColor = Color.Blue,
                focusedContentColor = Color.Yellow,
                pressedBackgroundColor = Color.Black.copy(alpha = 0.6f)
            ),
            scale = StyleDefaults.scale(focusedScale = 1.1f),
            shapes = StyleDefaults.shapes(RoundedCornerShape(8.dp))
        ),
    modifier = Modifier.size(300.dp, 100.dp),
    onClick = { /* Handle click */},
    onLongClick = { /* Handle long click */}
) {
    val color = LocalContentColor.current
    BasicText(text = "Interactive Container", color = { color })
}

Example usage as a selectable container.

var selected by remember { mutableStateOf(false) }
ExperimentalContainer(
    onClick = {
        selected = !selected
    },
    selected = selected,
    style =
        StyleDefaults.style(
            colors = StyleDefaults.colors(
                backgroundColor = if (selected) Color.Green else Color.Black,
                contentColor = Color.White,
                focusedBackgroundColor = Color.Red,
                focusedContentColor = Color.Black,
                pressedBackgroundColor = Color.Black.copy(alpha = 0.6f)
            ),
            scale = StyleDefaults.scale(focusedScale = 1.1f),
            shapes = StyleDefaults.shapes(RoundedCornerShape(8.dp))
        )
) {
    val color = LocalContentColor.current
    BasicText(
        text = if (selected) "Selected Container" else "Unselected Container",
        color = { color },
    )
}