如何让Jetpack Compose中Scaffold的floatingActionButton不被穿透点击

在Jetpack Compose的Scaffold里设置了fillMaxWidth的Row作为floatingActionButton，点击Row的空白区域时会穿透到下方主视图的按钮上——这是因为默认情况下Row这类布局容器不会消费点击事件，点击会直接传递给下层可交互组件。

要解决这个问题，只需要给Row添加一个能消费点击事件的Modifier即可，两种常用方式如下：

方法一：使用clickable（最简单） #

给Row的Modifier添加clickable，如果不需要实际点击逻辑，设置空实现的onClick = {}即可，空白区域的点击会被Row消费，不会穿透：

Scaffold(modifier = Modifier.fillMaxWidth(),
    floatingActionButton = {
        Box(modifier = Modifier.padding(start = 32.dp)) {
            Row(
                modifier = Modifier
                    .border(
                        width = 1.dp,
                        color = Color(0xFFC1C1C1),
                        shape = RoundedCornerShape(size = 12.dp)
                    )
                    .fillMaxWidth()
                    .height(80.dp)
                    .background(
                        color = Color(LocalAppCustomResources.current.attachmentBackGround),
                        shape = RoundedCornerShape(size = 12.dp)
                    )
                    .padding(16.dp)
                    .clickable { } // 添加这一行消费点击
            ) {
                // 内部按钮组件
            }
        }
    }
) { innerPadding ->
    // 主视图内容
}

方法二：使用pointerInput（更灵活，适合自定义触摸逻辑） #

如果需要更精细的触摸控制，可以用pointerInput拦截所有触摸事件：

Scaffold(modifier = Modifier.fillMaxWidth(),
    floatingActionButton = {
        Box(modifier = Modifier.padding(start = 32.dp)) {
            Row(
                modifier = Modifier
                    .border(
                        width = 1.dp,
                        color = Color(0xFFC1C1C1),
                        shape = RoundedCornerShape(size = 12.dp)
                    )
                    .fillMaxWidth()
                    .height(80.dp)
                    .background(
                        color = Color(LocalAppCustomResources.current.attachmentBackGround),
                        shape = RoundedCornerShape(size = 12.dp)
                    )
                    .padding(16.dp)
                    .pointerInput(Unit) {
                        awaitPointerEventScope {
                            while (true) {
                                val event = awaitPointerEvent()
                                event.changes.forEach { it.consume() } // 消费所有触摸事件
                            }
                        }
                    }
            ) {
                // 内部按钮组件
            }
        }
    }
) { innerPadding ->
    // 主视图内容
}

注意：Row内部的可点击组件优先级高于外层的点击拦截逻辑，正常点击内部按钮不会受影响。

内容的提问来源于stack exchange，提问作者Slava