如何将 Materials "Responsive layout grid" 应用到 Android Compose？

Question

我想根据 Material 响应式布局网格对齐我的组件，如 from https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins 所示。

我不一定希望我的内容包含在列中，而是将基线放在列的开头或结尾。

一个简单的例子：

// FIXME: What to do? 
@Composable
fun example() {
    Button(onClick = { 
        }, text = "Stretch me between start of column 2 and end of column 4"
    )
}

我最好的猜测是我需要以某种方式使用这个库：https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary 但是我还是一头雾水...

如何在 Jetpack Compose 中实现我想做的事情？

Answer 1

要求不明确。如果这不是您要找的，请发表评论。

在 4 列网格系统中有一个宽度为 2 列的按钮。您可以使用 weight 和 Spacer 来达到要求。

这从第 2 列的开头开始到第 3 列的结尾结束。

Row(
    modifier = Modifier.fillMaxWidth(),
) {
    Spacer(modifier = Modifier.weight(1f))
    Button(
        onClick = { /*TODO*/ },
        modifier = Modifier
            .fillMaxWidth()
            .weight(2f),
    ) {
        Text(text = "Center Button")
    }
    Spacer(modifier = Modifier.weight(1f))
}

使用 weight 和 padding 修饰符以及 Spacer 我们可以实现大部分网格要求。

如何将 Materials "Responsive layout grid" 应用到 Android Compose？

How to apply Materials "Responsive layout grid" to Android Compose?

android

material-design

android-jetpack-compose