在Modifier.clickable中调用Composable实现ListItem点击弹AlertDialog失效问题

核心问题说明 #

• Composable函数仅可在Composition树的渲染上下文中调用，不可在Modifier.clickable的点击回调这类普通Lambda中直接执行，你的代码将弹窗渲染逻辑放在点击回调里，属于调用位置错误，所以弹窗不会正常弹出。
• 状态控制逻辑错误：你初始将openDialog设为true，且点击时判断状态为true才触发弹窗，逻辑完全倒置，正确逻辑是点击时修改状态为true，触发重组，重组时通过状态判断是否渲染弹窗。
• 弹窗Composable未加入当前Composition树，仅在回调中调用不会被Compose框架识别渲染。

修正后代码 #

@ExperimentalMaterialApi
@Composable
fun UsersList() {
    Column(modifier = Modifier
        .fillMaxSize()
        .background(elevation)) {
        TopAppBar(
            title = { Text("用户列表") },
            navigationIcon = {
                IconButton(onClick = { /*TODO*/ }) {
                    Icon(Icons.Filled.ArrowBack, contentDescription = null)
                }
            },
            backgroundColor = elevation2,
            contentColor = Color.White
        )
        LazyColumn() {
            item {
                // 初始状态设为false，默认不显示弹窗
                val openDialog = remember { mutableStateOf(false) }

                ListItem(
                    text = { Text("姓名",  color = Color.White) },
                    icon = { Icon(Icons.Filled.Face, contentDescription = null, tint = Color.White) },
                    // 点击时仅修改状态，触发重组
                    modifier = Modifier.clickable { openDialog.value = true },
                )
                
                // 在Composition树中通过状态判断是否渲染弹窗
                if (openDialog.value) {
                    OpenAlertDialog(openDialog)
                }
            }
        }

    }
}

@Composable
fun OpenAlertDialog(openDialog: MutableState<Boolean>) {
    AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(text = "标题")
        },
        text = {
            Text(
                "这里通常放辅助说明文本，介绍弹窗的用途和相关细节。"
            )
        },
        confirmButton = {
            TextButton(
                onClick = {
                    openDialog.value = false
                }
            ) {
                Text("确认")
            }
        },
        dismissButton = {
            TextButton(
                onClick = {
                    openDialog.value = false
                }
            ) {
                Text("取消")
            }
        }
    )
}

额外优化建议 #

如果不想传递MutableState，可以把状态变更通过回调的方式往外抛，降低组件耦合度：

// 改造弹窗组件，不直接持有状态
@Composable
fun OpenAlertDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        title = { Text(text = "标题") },
        text = { Text("这里通常放辅助说明文本，介绍弹窗的用途和相关细节。") },
        confirmButton = {
            TextButton(onClick = onConfirm) { Text("确认") }
        },
        dismissButton = {
            TextButton(onClick = onDismiss) { Text("取消") }
        }
    )
}

// 调用处改为
if (openDialog.value) {
    OpenAlertDialog(
        onDismiss = { openDialog.value = false },
        onConfirm = { openDialog.value = false }
    )
}

内容的提问来源于stack exchange，提问作者Juan Domínguez