android - 如何在 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参数影响绘图顺序: