Android Compose，按钮顶部的可点击表面

Question

是否可以创建全屏、可点击、透明的表面/框，使组合按钮和其他可组合按钮重叠。我想让按钮对用户可见但无法访问。

当我将它们(按钮(设置为禁用时，它们会转到我无法在屏幕上显示的不可点击区域(位于可点击表面的顶部(。其他可堆肥，如文本、盒子等，表现得像"；在"；可点击的表面。

@Composable
fun ShowAnswers(question: Question, onSurfaceClick: () -> Unit, questionsLeft: Int) {
Surface(modifier = Modifier.clickable { onSurfaceClick() }) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.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)
}
}
}

ShowCorrectAnswer(…(包含我需要"；"重叠"；

Answer 1

您可以使用一个简单透明的Box将问题覆盖在Surface上。

类似于：

var isActive by remember { mutableStateOf(false) }
Box(modifier = Modifier.fillMaxSize()) {
Surface() {
Column() {

//....
QuestionCard(question = question)
//....
Button(onClick = { isActive = true }) {
//...
}

}
}
if (isActive){
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Transparent)
.clickable(
enabled=isActive,
interactionSource = interactionSource,
indication =  null)
{
//do something
}
)
}
}

Answer 2

在列之后的曲面内部添加fillMaxSize Box，解决了问题。但是把盒子放在柱子之前会使它看起来"；在"；

@Composable
fun ShowAnswers(question: Question, onSurfaceClick: () -> Unit, questionsLeft: Int) {
Surface {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.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)
}
**Box(modifier = Modifier
.fillMaxSize()
.background(Color.Transparent)
.clickable { onSurfaceClick() })**
}
}