Box布局容器讲解

原创

艳艳代码杂货店

修改于 2021-09-26 09:37:46

6810

文章被收录于专栏：艳艳代码杂货店艳艳代码杂货店

布局容器

Box

首先介绍一下Box布局,和FrameLayout的特性一样,是按顺序排的

复制fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
)

modifier 修饰符(下一篇讲)
contentAlignment 内容对齐方式(之前在Image图片使用的时候提过了,详见上一篇)
propagateMinConstraints 是否应将传入的最小约束传递给内容,不太懂具体是什么效果 😂

Row

复制Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable RowScope.() -> Unit
)

horizontalArrangement 子元素的水平方向排列效果
verticalAlignmentment 子元素的垂直方向对齐效果

horizontalArrangement

由上述代码提示图片,取值有五种,分别为:

Arrangement.Start 左排列
Arrangement.Center 居中排列
Arrangement.End 右排列
Arrangement.SpaceBetween 左右对齐排列,最左和最右组件元素靠边
Arrangement.SpaceArround 左右对齐排列,最左和左右组件元素有间隔,且间隔相同,中间则是平分
Arrangement.SpaceEvenly 左右对齐排列,且各组件元素间距相同

注意:使用此布局也是需要Row布局的宽度并不是自适应的

复制Column() {
    Row(horizontalArrangement = Arrangement.Start,modifier = Modifier.fillMaxWidth()) {
        Box(
            Modifier
                .background(Color.Green)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Blue)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Red)
                .size(100.dp)) {
        }
    }
    Row(horizontalArrangement = Arrangement.Center,modifier = Modifier.fillMaxWidth()) {
        Box(
            Modifier
                .background(Color.Green)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Blue)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Red)
                .size(100.dp)) {
        }
    }
    Row(horizontalArrangement = Arrangement.End,modifier = Modifier.fillMaxWidth()) {
        Box(
            Modifier
                .background(Color.Green)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Blue)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Red)
                .size(100.dp)) {
        }
    }
    Row(horizontalArrangement = Arrangement.SpaceBetween,modifier = Modifier.fillMaxWidth()) {
        Box(
            Modifier
                .background(Color.Green)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Blue)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Red)
                .size(100.dp)) {
        }
    }
    Row(horizontalArrangement = Arrangement.SpaceAround,modifier = Modifier.fillMaxWidth()) {
        Box(
            Modifier
                .background(Color.Green)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Blue)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Red)
                .size(100.dp)) {
        }
    }
    Row(horizontalArrangement = Arrangement.SpaceEvenly,modifier = Modifier.fillMaxWidth()) {
        Box(
            Modifier
                .background(Color.Green)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Blue)
                .size(100.dp)) {
        }
        Box(
            Modifier
                .background(Color.Red)
                .size(100.dp)) {
        }
    }
}

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

image