Junior — Middle
Explain the working principle of the Box component in Jetpack Compose and its use in interfaces.
sobes.tech AI
Answer from AI
In Jetpack Compose, the Box component is a container that allows overlaying child elements on top of each other, positioning them in the same space. It is similar to FrameLayout in traditional Android Views.
Box is useful when you need to place multiple elements that should overlap or be located in one place, such as an icon over an image or text over a background.
Example of using Box:
Box(modifier = Modifier.size(100.dp)) {
Image(painter = painterResource(id = R.drawable.background), contentDescription = null)
Text("Hello", modifier = Modifier.align(Alignment.Center))
}
Here, the text "Hello" will be centered over the image. Box also supports aligning children with Modifier.align and allows setting margins, sizes, and other parameters via Modifier.