android - 0dp 大小的可组合项甚至可以组合吗

Question

大小为 0dp 的可组合项是否会被组合或重新组合，或者只是在运行时被 jetpack compose 忽略？这是为了了解性能是否明智，使用 if 语句隐藏可组合项与将其大小设置为 0dp 相同。

Answer 1

简短的回答，是的。可组合项基于 UI 结构而不是大小修饰符进入和退出组合，Under the hood of Jetpack Compose — part 2 of 2文章很好地解释了这一点。条件可组合 block 在满足条件时进入组合并保持组合状态，或者如果它们读取的状态发生变化则重新组合，然后在条件不再有效时退出组合。你可以查看this answer用于条件组合。

例如，您可以在下面的示例中设置布局和绘制 Composable，即使它的大小为 0.dp

@Composable
private fun CompositionSample() {

    val context = LocalContext.current

    Box(
        Modifier
            .size(0.dp)
            .layout { measurable, constraints ->
                val placeable = measurable.measure(constraints)

                Toast
                    .makeText(
                        context,
                        "Layout Phase width: ${placeable.width}, height: ${placeable.height}",
                        Toast.LENGTH_SHORT
                    )
                    .show()
                layout(placeable.width, placeable.height) {
                    placeable.placeRelative(0, 0)
                }
            }
            .drawWithContent {
                Toast
                    .makeText(context, "Draw Phase $size", Toast.LENGTH_SHORT)
                    .show()
                drawContent()
            }
    ) {
        Toast.makeText(context, "BoxScope", Toast.LENGTH_SHORT).show()
        Column {
            Toast.makeText(context, "ColumnScope", Toast.LENGTH_SHORT).show()
        }
    }
}

即使 Composable 由于 verticalScroll() 或 horizo​​ntalScroll() 修饰符而在屏幕上不可见，它也会进入合成。这就是为什么 LazyLists subcomposes屏幕上的项目，以及滚动方向上的另一个尚不可见的项目，与滚动修饰符相比性能更高。

@Composable
private fun HorizontalComposableSample() {

    val context = LocalContext.current

    Row(
        Modifier
            .fillMaxWidth()
            .horizontalScroll(rememberScrollState())
    ){
        Box(
            Modifier
                .size(1000.dp, 200.dp)
                .background(Color.Red))
        Column(modifier= Modifier
            .size(200.dp)
            .background(Color.Green)) {
            Toast.makeText(context, "ColumnScope", Toast.LENGTH_SHORT).show()
        }
    }
}

可组合项不必是 UI 元素即可进入或退出组合。

@Composable
private fun NonUIComposableSample() {

    val context = LocalContext.current

    var counter by remember { mutableStateOf(0) }
    var color by remember { mutableStateOf(Color.Red) }

    if (counter in 3..5) {
        DisposableEffect(Unit) {

            Toast.makeText(context, "Entering Composition counter: $counter", Toast.LENGTH_SHORT).show()
            color = Color.Yellow
            onDispose {
                color = Color.Green
                Toast.makeText(context, "Exiting Composition counter: $counter", Toast.LENGTH_SHORT).show()
            }
        }
    }

    Button(onClick = { counter++ }) {
        Text("Counter: $counter", color = color)
    }

}

在此示例中，当计数器为 3 时，使用 DisposableEffect 的 block 进入合成，当计数器小于 6 时保持合成，然后在不再满足条件时退出。