當我使用 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作為內容調用此可組合函數，結果將如下所示：

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