如何知道當前是否正在渲染 Composable（Composable 不在 Lazy Composable 中）？

Question

如果我的布局大到足以使屏幕垂直滾動，我怎么知道當前是否正在渲染（完全或部分）某個 Composable？

---

重要的是要強調在此布局中沒有使用Lazy Composable（如LazyColumn ）。

Answer 1

您可以使用 Modifier.globallyPositioned{it.positionOnWindow} 查看 Composable 在屏幕上的位置，並將其與父 Composable 高度/寬度或屏幕高度/寬度進行比較。

@Composable
private fun MyComposable() {
    var parentSize by remember { mutableStateOf(IntSize.Zero) }
    var text by remember {
        mutableStateOf("")
    }

    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = text)
        Column(modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
            .onSizeChanged {
                parentSize = it
            }
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(800.dp)
                    .background(Color.Red)
            )
            Box(modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .background(Color.Yellow)
                .onGloballyPositioned {
                    text = "parentSize: $parentSize" +
                            "positionInParent: ${it.positionInParent()}\n" +
                            "positionInRoot: ${it.positionInRoot()}\n" +
                            "positionInWindow: ${it.positionInWindow()}\n"
                }
            )
        }
    }
}