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

Question

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

\n

@Composable\nfun DrawingOrderExample(submarineMode: Boolean) {\n    Box(contentAlignment = Alignment.Center) {\n        Box(\n            modifier = Modifier\n                .size(32.dp)\n                .background(Color.Cyan.copy(alpha = .5f))\n        )\n\n        Text("\xe2\x9b\xb5")\n    }\n}\n

\n

我可以根据论证强制把船拖到水下吗submarineMode？

\n

Answer 1

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

\n

...\n\nimport androidx.compose.ui.zIndex\n\nBox {\n    Text("Drawn second", Modifier.zIndex(1f))\n    Text("Drawn first")\n}\n

\n

船舶示例：

\n

@Composable\nfun DrawingOrderExample(submarineMode: Boolean) {\n    Box(contentAlignment = Alignment.Center) {\n        Box(\n            modifier = Modifier\n                .size(32.dp)\n                .background(Color.Cyan.copy(alpha = .5f))\n        )\n\n        val shipZIndex = if (submarineMode) -1f else 1f\n\n        Text(\n            text = "\xe2\x9b\xb5",\n            modifier = Modifier.zIndex(shipZIndex) // <- here\'s the trick\n        )\n    }\n}\n

\n

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

\n

\n

\n