如何处理从作为变量传入的Composable启动的Dialog关闭请求

要解决Dialog内部无法触发关闭的问题，用Kotlin带接收者的函数字面量是合适的思路，具体实现步骤如下：

1. 定义Dialog控制接口 #

先创建一个简单的接口，作为lambda的接收者，提供关闭Dialog的能力：

interface DialogController {
    fun dismiss()
}

2. 修改通用组件实现 #

更新GenericSettingWithDialog的dialogContent参数类型，让它成为带DialogController接收者的Composable lambda，同时在Dialog内部传入该接口的实现：

@Composable
fun GenericSettingWithDialog(
    name: String,
    state: State<String>,
    dialogContent: @Composable DialogController.() -> Unit
) {
    var isDialogShown by remember { mutableStateOf(false) }

    // 点击打开Dialog的设置行
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { isDialogShown = true }
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = name, modifier = Modifier.weight(1f))
        Text(text = state.value, color = Color.Gray)
        Icon(Icons.Default.KeyboardArrowRight, contentDescription = null)
    }

    // Dialog显示逻辑
    if (isDialogShown) {
        Dialog(onDismissRequest = { isDialogShown = false }) {
            Surface(
                shape = MaterialTheme.shapes.medium,
                color = MaterialTheme.colorScheme.surface
            ) {
                // 传入DialogController实现，让内部可以调用关闭
                object : DialogController {
                    override fun dismiss() {
                        isDialogShown = false
                    }
                }.dialogContent()
            }
        }
    }
}

3. 使用示例 #

现在你可以在dialogContent里直接调用dismiss()来关闭Dialog，比如实现EditText类型的设置：

@Composable
fun EditTextPreferenceSetting(
    name: String,
    valueState: MutableState<String>
) {
    GenericSettingWithDialog(
        name = name,
        state = valueState
    ) {
        var input by remember { mutableStateOf(valueState.value) }

        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = name, style = MaterialTheme.typography.titleMedium)
            TextField(
                value = input,
                onValueChange = { input = it },
                modifier = Modifier.fillMaxWidth().padding(vertical = 8.dp)
            )
            Row(modifier = Modifier.fillMaxWidth().justifyContent(end)) {
                TextButton(onClick = { dismiss() }) {
                    Text("取消")
                }
                TextButton(onClick = {
                    valueState.value = input
                    dismiss()
                }) {
                    Text("确认")
                }
            }
        }
    }
}

再比如实现列表选择类型的设置：

@Composable
fun ListPreferenceSetting(
    name: String,
    valueState: MutableState<String>,
    options: List<String>
) {
    GenericSettingWithDialog(
        name = name,
        state = valueState
    ) {
        Column(modifier = Modifier.fillMaxWidth()) {
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier.padding(16.dp)
            )
            options.forEach { option ->
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .clickable {
                            valueState.value = option
                            dismiss()
                        }
                        .padding(16.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(text = option)
                    Spacer(modifier = Modifier.weight(1f))
                    if (option == valueState.value) {
                        Icon(Icons.Default.Check, contentDescription = "已选中")
                    }
                }
            }
        }
    }
}

这样设计的好处是，通用组件完全负责Dialog的显示/隐藏状态管理，而具体的Dialog内容只需关注自身业务逻辑，通过接收者提供的dismiss()就能轻松关闭Dialog，实现了职责分离。

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