StackItemScope

sealed interface StackItemScope

Receiver scope used by item content in VerticalStack.

Summary

Public functions
open Modifier

Adds a decoration shape for this item, which is used in graphical effects applied to stack items, e.g., item masking and depth effects.

Public functions

Modifier.itemDecoration

open fun Modifier.itemDecoration(shape: Shape): Modifier

Adds a decoration shape for this item, which is used in graphical effects applied to stack items, e.g., item masking and depth effects. For each distinct shape inside a stack item, this modifier should be applied to match that shape's bounds. For simple items with just one shape (such as a card), only one modifier is needed.

Applying this modifier is optional but highly recommended. If not applied, the item will render normally but will not have the expected depth effect or masking behavior. Omitting this modifier is a valid use case when no visual item decoration effects are desired.

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextMotion
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.CardDefaults
import androidx.xr.glimmer.LocalTextStyle
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.stack.VerticalStack

VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
    item(key = 0) {
        Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
            Text(
                "Item-0",
                style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
            )
        }
    }
    items(count = 10, key = { it + 1 }) { index ->
        Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
            Text(
                "Item-${index + 1}",
                style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
            )
        }
    }
}
 
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextMotion
import androidx.compose.ui.unit.dp
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.CardDefaults
import androidx.xr.glimmer.LocalTextStyle
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.stack.VerticalStack

VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
    items(count = 10, key = { it }) { index ->
        Column {
            Card(modifier = Modifier.fillMaxWidth().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-$index",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
            Row {
                Card(modifier = Modifier.weight(0.5f).itemDecoration(CardDefaults.shape)) {
                    Text(
                        "Card A",
                        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                    )
                }
                Card(modifier = Modifier.weight(0.5f).itemDecoration(CardDefaults.shape)) {
                    Text(
                        "Card B",
                        style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                    )
                }
            }
        }
    }
}
Parameters
shape: Shape

The shape of the element this modifier is applied to.