关于Jetpack Compose中EditText对话框的两项技术问询

问题背景 #

我在Jetpack Compose项目中需要一个带输入框的对话框，以下是一段传统Android View系统的代码（Code A）：

AlertDialog.Builder alert = new AlertDialog.Builder(this); 

final EditText edittext = new EditText(ActivityContext);
alert.setMessage("Enter Your Message");
alert.setTitle("Enter Your Title");

alert.setView(edittext);

alert.setPositiveButton("Yes Option", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int whichButton) {
        //What ever you want to do with the value
        Editable YouEditTextValue = edittext.getText();
        //OR
        String YouEditTextValue = edittext.getText().toString();
    }
});

alert.setNegativeButton("No Option", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int whichButton) {
        // what ever you want to do with No option.
    }
});

alert.show();

问题1：Code A能否直接在Jetpack Compose中使用？ #

问题2：Jetpack Compose的Material库仅提供Alert Dialog、Simple Dialog和Confirmation Dialog，是否有原生的带EditText的对话框组件？ #

问题解答 #

问题1：Code A的可用性 #

Code A是传统Android View系统的代码，不能直接在Jetpack Compose中使用。Compose基于声明式UI模型，和View系统是两套独立的UI框架，直接调用View系统的AlertDialog.Builder和EditText会破坏Compose的状态管理逻辑，也不符合Compose的开发范式。

虽然可以通过AndroidView组件将View系统控件嵌入Compose，但这种方式会增加复杂度，无法充分利用Compose的优势，不推荐使用。

问题2：Material库的输入框对话框实现 #

Material库没有提供专门的“EditText对话框”组件，但可以基于Compose的AlertDialog自定义实现，这也是Compose声明式UI的灵活之处——自由组合组件。

以下是完整的Compose实现示例：

@Composable
fun EditTextDialog(
    showDialog: Boolean,
    onDismiss: () -> Unit,
    onConfirm: (String) -> Unit
) {
    var inputText by remember { mutableStateOf("") }

    if (showDialog) {
        AlertDialog(
            onDismissRequest = onDismiss,
            title = { Text(text = "Enter Your Title") },
            text = {
                OutlinedTextField(
                    value = inputText,
                    onValueChange = { inputText = it },
                    label = { Text(text = "Enter Your Message") },
                    singleLine = true
                )
            },
            confirmButton = {
                TextButton(onClick = {
                    onConfirm(inputText)
                    onDismiss()
                }) {
                    Text(text = "Yes Option")
                }
            },
            dismissButton = {
                TextButton(onClick = onDismiss) {
                    Text(text = "No Option")
                }
            }
        )
    }
}

// 使用示例
@Composable
fun DemoScreen() {
    var showDialog by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { showDialog = true }) {
            Text(text = "打开输入对话框")
        }
    }

    EditTextDialog(
        showDialog = showDialog,
        onDismiss = { showDialog = false },
        onConfirm = { input ->
            // 处理输入内容
            println("输入的内容：$input")
        }
    )
}

该示例通过Compose的AlertDialog结合OutlinedTextField（Compose的输入框组件），实现了和Code A完全一致的功能，完全符合Compose的开发模式。

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