StackLayout

A layout component that stacks its children on top of each other. Each child is positioned absolutely within the container, allowing them to overlap.

The first child establishes the container's size and remains in normal flow. Subsequent children are absolutely positioned to overlay on top of the first child.

Children are rendered in the order they are added, with later children appearing on top of earlier ones. You can control the stacking order by specifying a custom zIndex when adding children.

You can provide a key when adding children to ensure stable component identity across renders when children are added/removed/reordered.

Example usage:

StackLayout(style = Style.width(200.dp).height(200.dp)) {
  // First child establishes the container size
  child(Image(drawable = drawableRes(R.drawable.background_image)))

  // Second child with custom zIndex to control stacking order
  child(component = Badge(count = 5), zIndex = 10)

  // Third child overlays on top of the Image but below the Badge
  child(
    Text(
      text = "Overlay Text",
      textSize = 16.sp,
      style = Style.alignSelf(YogaAlign.CENTER)
    )
  )
  // Third child with custom zIndex to control stacking order
  child(component = Badge(count = 5), zIndex = 10)
}

Parameters