我想通过使用框行和列来创建下面的布局.我知道我可以用不同的方法来实现这一点,比如使用约束布局或创建自定义布局,但是我想知道有没有比这些方法更简单的方法.

What i want

enter image description here

我try 了一些方法,但最后都给了我相同的结果,如下所示.

@Composable
fun Squares() {
Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Box(modifier = Modifier
        .size(50.dp)
        .background(Color.Green)
    )
    Column {
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Red)
        )
        Box(
            modifier = Modifier
                .size(100.dp)
                .background(Color.Yellow)
        )
    }
}
}

What i've tried

enter image description here

如何垂直放置红色方框的绿色方框中心?(我需要一个通用的解决方案,方框大小只是为了演示)

推荐答案

可以使用alignBy修改器.

从文档中:

Row内,具有alignBy的所有组件将使用指定的HorizontalAlignmentLines或从alignmentLineBlock获得的值垂直对齐,形成一个同级组.

使用:

Row(){

   Box(modifier = Modifier
        .size(50.dp)
        .alignBy { it.measuredHeight / 2 }
        .background(Color.Green)
    )
    Column(Modifier.alignBy { it.measuredHeight / 4 }) {
        //....your code
    }

}

然后,绿色Box(it.measuredHeight / 2)的1/2与Column(it.measuredHeight / 4)的四分之一垂直对齐

enter image description here

Android相关问答推荐

RippleTheme在作曲material 1.7.0中被废弃

Jetpack编写:通过viewModels()vs viewModel View ModernName()'

Jetpack编写Lazy列滑动删除动画不顺利结束

fillMaxHeight中的分数在列内不起作用(android jetpack compose)

如何在安卓系统上使用Float16霓虹灯?

Jetpack编写使用自定义主题覆盖库中主题部分

Android 14上的慢速意图广播交付

Lateinit变量结果始终以kotlin格式未初始化

为什么它显示我的空白屏幕?

将 React Native 应用程序背景带到前台

Android Compose 为什么 Checkbox 在父对象可点击时需要 onCheckChanged?

Jetpack Compose 如何使一个项目相对于另一个项目垂直居中

AirDroid Business 如何能够从屏幕截图中排除覆盖?

来自位图的 WearOS 图标不显示 colored颜色

我们也可以或应该对主要小部件使用预览 compose 功能吗?

react 从输入中找到路径'lib/arm64-v8a/libfbjni.so'的本机2个文件

为什么官方文档用大写字母表示val变量?

如何在 Jetpack Compose 中更改 ModalNavigationDrawer 的抽屉容器 colored颜色 ?

使用 Jetpack Compose 的深层链接导航到可组合项

AndroidX Room 生成类错误:类是公共的,应在名为 class.java 的文件中声明