container/io.daio.wild.container/Container

Container

@Composable

fun Container(modifier: Modifier = Modifier, color: Color = Color.Unspecified, contentColor: Color = Color.Unspecified, shape: Shape = RectangleShape, border: Border = BorderDefaults.None, content: @Composable BoxScope.() -> Unit)

Container is a building block component that can be used for any static element or as an interactive container.

Since

0.3.1

Parameters

modifier

Modifier to be applied to the container layout for styling and positioning.

color

Background color of the container.

contentColor

Color for content elements within the container.

shape

Defines the shape of the container.

border

Optional border to apply around the container.

content

A Composable lambda that defines the content inside the container.

@Composable

fun Container(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)

Container 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.

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:

Container(
    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) }
Container(
    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 },
    )
}