← Back to Foundation
Box
Component
in
Foundation
. Since 0.1.0-dev15Overview
Code Examples
A convenience composable that combines common layout and draw logic.
In order to define the size of the Box, the androidx.compose.foundation.layout.width, androidx.compose.foundation.layout.height and androidx.compose.foundation.layout.size modifiers can be used. The Box will try to be only as small as its content. However, if it is constrained otherwise, Box will allow its content to be smaller and will position the content inside, according to gravity.
The specified padding will be applied inside the Box. In order to apply padding outside the Box, the androidx.compose.foundation.layout.padding modifier should be used.
Overloads
Box
@Composable
fun Box(
modifier: Modifier = Modifier,
shape: Shape = RectangleShape,
backgroundColor: Color = Color.Transparent,
border: BorderStroke? = null,
padding: Dp = border?.width ?: 0.dp,
paddingStart: Dp = Dp.Unspecified,
paddingTop: Dp = Dp.Unspecified,
paddingEnd: Dp = Dp.Unspecified,
paddingBottom: Dp = Dp.Unspecified,
gravity: ContentGravity = ContentGravity.TopStart,
children: @Composable () -> Unit = emptyContent()
)
Parameters
Name | Description |
---|---|
modifier | The modifier to be applied to the Box |
shape | The shape of the box |
backgroundColor | The Color for background with. If Color.Transparent, there will be no background |
border | BorderStroke object that specifies border appearance, such as size and color. If null , there will be no border |
padding | The padding to be applied inside Box, along its edges. Unless otherwise specified, content will be padded by the BorderStroke.width, if border is provided |
paddingStart | sets the padding of the start edge. Setting this will override padding for the start edge |
paddingTop | sets the padding of the top edge. Setting this will override padding for the top edge |
paddingEnd | sets the padding of the end edge. Setting this will override padding for the end edge |
paddingBottom | sets the padding of the bottom edge. Setting this will override padding for the bottom edge |
gravity | The gravity of the content inside Bo |