Jetpack 撰写框未按预期工作

Question

我无法理解盒子是如何工作的，为什么盒子覆盖了我们屏幕的某些层，例如 我们是三个盒子

@Composable
fun TestScope() {
     1
    Box(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Black)) {
        2
        Box(
            Modifier
                .fillMaxSize()
                .clickable { }
                .background(color = Color.Yellow)
        ) {

        }
         3
        Box(modifier = Modifier
            .fillMaxHeight(0.4f).fillMaxWidth()
            .background(color = Color.Blue)) {

        }
    }
}

如果我单击框 3 并且仅单击其空间，我仍然可以单击其下方的框 2 吗？

Answer 1

Compose 中的单击事件从顶部可组合项传递到底部可组合项。然而，Surface 可组合项可以防止这种情况发生，并防止单击事件进一步向下传播。因此，当您单击 Box 3 时，单击事件将发送到 Box 2。如果将 Box 3 放置在 Surface 内，Box 3 上的单击事件将不会发送到 Box 2。

Answer 2

这是预料之中的。任何不处理单击事件的可组合项对于这些单击事件实际上都是透明的，并且可以由其下面的可组合项捕获。这与视图系统没有什么不同，在视图系统中，您可以在另一个不透明视图后面有一个可点击的视图 - 只要不透明视图不处理点击，这些点击就会通过它到达下面的视图。

Answer 3

这是预期的，但如果您想阻止单击激活下面的框，您可以在其上放置一个空的可单击项，如下所示：

@Composable
fun TestScope() {
// Box 1
Box(modifier = Modifier
    .fillMaxSize()
    .background(color = Color.Black)) {
    
    // Box 2
    Box(
        Modifier
            .fillMaxSize()
            .clickable { }
            .background(color = Color.Yellow)
    ) {
        // Content of box 2
    }
    
    // Box 3
    Box(modifier = Modifier
        .fillMaxHeight(0.4f).fillMaxWidth()
        .background(color = Color.Blue)
        // THIS does the trick:
        .clickable(
            // This removes click indication
            interactionSource = null,
            indication = null
        ) { /* Empty click callback */ }) {
            // Content of box 3
        }
    }
}