Android Compose如何实现覆盖按钮的全屏可点击透明Surface？

要实现全屏、可点击的透明覆盖层，让按钮可见但无法被点击，核心是让覆盖层处于按钮的上层来拦截点击事件。你之前的写法是把Surface作为内容的父容器，导致Surface在下层、按钮在上层，点击会直接触发按钮。正确的做法是用Box布局，将内容和覆盖层分层放置：

• 先放置原有内容（包括按钮）在下层
• 再添加一个全屏的透明可点击组件在上层，拦截所有点击事件

修改后的代码如下：

@Composable
fun ShowAnswers(question: Question, onSurfaceClick: () -> Unit, questionsLeft: Int) {
    Box(modifier = Modifier.fillMaxSize()) {
        // 原有内容区域，位于下层
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxSize()
                .padding(8.dp)
        ) {
            Text(
                text = stringResource(id = R.string.questions_left, questionsLeft),
                fontSize = 24.sp
            )
            Spacer(modifier = Modifier.height(20.dp))
            QuestionCard(question = question)
            Spacer(modifier = Modifier.height(20.dp))
            ShowCorrectAnswer(question = question)
        }

        // 全屏透明可点击覆盖层，位于上层
        Surface(
            modifier = Modifier
                .fillMaxSize()
                .clickable { onSurfaceClick() },
            color = Color.Transparent // 保持背景透明，不遮挡下层内容
        ) {}
    }
}

关键说明： #

• Box布局遵循后添加的组件在上层的绘制顺序，最后添加的Surface会覆盖在所有内容之上
• Modifier.fillMaxSize()确保覆盖层占满整个屏幕
• 设置color = Color.Transparent让覆盖层完全透明，下层的按钮和文本仍清晰可见
• 覆盖层的clickable会拦截所有点击操作，下层的按钮无法再接收到点击事件，完美满足需求

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