当我使用 Jetpack Compose 时，Material Components 是否提供编辑文本对话框？

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+50声望赏金。 HelloCW正在从有信誉的来源寻找答案。

在我的项目中使用 Jetpack Compose 时，我需要一个编辑文本对话框。

代码 A 来自文章。

Q1：我不知道代码 A 是否可以在 Jetpack Compose 中使用，您能告诉我吗？

有人告诉我，Jetpack Compose 的Material 库中提供了对话框

材料库似乎只提供警报对话框、简单对话框和确认对话框。

Q2：当我使用 Jetpack Compose 时，Material Components 是否提供编辑文本对话框？

代码 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();

Answer 1

Jetpack Compose 的 AlertDialog 实现允许您添加标题、按钮和文本作为内容。

如果您想添加 EditText（或者更确切地说是 TextField）而不仅仅是文本，您可以为对话框创建自己的布局，如下所示：

@Composable
fun MyAlertDialog(
    title: @Composable () -> Unit,
    content: @Composable () -> Unit,
    dismissButton: @Composable () -> Unit,
    confirmButton: @Composable () -> Unit,
    onDismiss: () -> Unit,
) {
    Dialog(onDismiss) {
        Surface(shape = MaterialTheme.shapes.medium) {
            Column {
                Column(Modifier.padding(24.dp)) {
                    title.invoke()
                    Spacer(Modifier.size(16.dp))
                    content.invoke()
                }
                Spacer(Modifier.size(4.dp))
                Row(
                    Modifier.padding(8.dp).fillMaxWidth(),
                    Arrangement.spacedBy(8.dp, Alignment.End),
                ) {
                    dismissButton.invoke()
                    confirmButton.invoke()
                }
            }
        }
    }
}

如果您使用OutlinedTextField作为内容调用此可组合函数，结果将如下所示：

你可以在这里看到完整的工作演示。