代码之家  ›  专栏  ›  技术社区  ›  HelloCW

当我使用Jetpack Compose时,材料组件是否提供编辑文本对话框?

  •  0
  • HelloCW  · 技术社区  · 3 年前

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

    代码A来自 article

    问题1: 我不知道代码A是否可以在Jetpack Compose中使用,你能告诉我吗?

    有人告诉我,对话框在 Material library 用于Jetpack Compose

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

    问题2: 当我使用Jetpack Compose时,材料组件是否提供编辑文本对话框?

    代码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();
    
    0 回复  |  直到 3 年前
        1
  •  3
  •   Vadik Sirekanyan alb.noah    3 年前

    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 作为一个内容,结果将如下所示:

    screenshot

    您可以看到完整的工作演示 here