如何在 Android Jetpack Compose 中更改布局子项的绘制顺序？

Question

默认情况下，在 Jetpack Compose 中，布局子项的渲染顺序与代码中子项的顺序匹配。在以下示例中，船（文本）将被绘制在水面（框）上。

@Composable
fun DrawingOrderExample(submarineMode: Boolean) {
    Box(contentAlignment = Alignment.Center) {
        Box(
            modifier = Modifier
                .size(32.dp)
                .background(Color.Cyan.copy(alpha = .5f))
        )

        Text("⛵")
    }
}

我可以根据submarineMode参数强制将船拖到水下吗？

Answer 1

您可以使用 zIndex() 修饰符更改子级绘制顺序：

...

import androidx.compose.ui.zIndex

Box {
    Text("Drawn second", Modifier.zIndex(1f))
    Text("Drawn first")
}

船舶示例：

@Composable
fun DrawingOrderExample(submarineMode: Boolean) {
    Box(contentAlignment = Alignment.Center) {
        Box(
            modifier = Modifier
                .size(32.dp)
                .background(Color.Cyan.copy(alpha = .5f))
        )

        val shipZIndex = if (submarineMode) -1f else 1f

        Text(
            text = "⛵",
            modifier = Modifier.zIndex(shipZIndex) // <- here's the trick
        )
    }
}

现在 submarineMode 参数影响绘制顺序：

Answer 2

只需将 Box 包装在 if 语句中，并为 if 和 else 块分别创建两个框。没有坏处