Android开发系列（六）Jetpack Compose之Box

2024/10/24 5:18:10 来源：https://blog.csdn.net/leesino/article/details/139792023 浏览: 次关键词：Android开发系列（六）Jetpack Compose之Box

Box是一个用来组合和控制子元素布局的组件。它可以在一个矩形区域内排列一个或多个子元素，并根据所提供的参数来控制它们的位置、大小和样式。

Box的功能类似传统的FrameLayout。

下面通过示例了解Box的使用方法，首先看一个最简单的示例，如下所示

这里定义两个Box，是一对父子关系。父Box的大小为整个屏幕的大小，子Box是一个正方向，边长为100dp。

由于父Box将contentAlignment设置为Center，也就是内容为中间对齐，因此子Box显示在中间。

Box可以设置子控件的对齐方式，子控件也可以设置它在Box中的对齐方式，如下所示。


@Composable
fun BoxSample() {Box {Box(Modifier.fillMaxSize().background(Color.Cyan))Box(Modifier.matchParentSize().padding(top = 20.dp, bottom = 20.dp).background(Color.Yellow))Box(Modifier.matchParentSize().padding(40.dp).background(Color.Magenta))Box(Modifier.align(Alignment.Center).size(300.dp, 300.dp).background(Color.Green))Box(Modifier.align(Alignment.TopStart).size(150.dp, 150.dp).background(Color.Red))Box(Modifier.align(Alignment.BottomEnd).size(150.dp, 150.dp).background(Color.Blue))}}

该示例的效果如下图所示。