Jetpack Compose 警报对话框中的 TextField 新行问题

Question

我想使用 Jetpack Compose 创建警报对话框。在此警报对话框中包含来自

TextField

的

Compose

组件。

我创建了该警报对话框，但这里有一个问题，当我按下设备键盘上的 Enter 按钮以添加新行时，我的内容会向上移动。

这是我的代码；

@Composable
fun SimpleAlert(
    title: String = "Ask a Question",
    onDismiss: () -> Unit,
    onSubmit: (text: String) -> Unit
) {

        val text = remember { mutableStateOf("") }
        val textHint = "Write your question..."
        val textLength = remember { mutableStateOf(0) }
        val isAnonymous = remember { mutableStateOf(false) }


        AlertDialog(
            onDismissRequest = {
                onDismiss()
            },
            title = {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                ) {
                    Row(
                        horizontalArrangement = Arrangement.End,
                        modifier = Modifier
                            .fillMaxWidth()
                    ) {
                        Image(
                            painter = painterResource(id = R.drawable.ic_exit),
                            contentDescription = "",
                            modifier = Modifier.
                            background(Color.Gray, CircleShape).clickable {
                                onDismiss()
                            }
                        )
                    }
                    Text(
                        text = title,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center
                    )
                }
            },
            text = {
                Column(
                    verticalArrangement = Arrangement.Center
                ) {
                    TextField(
                        value = text.value,
                        onValueChange = {
                            if (it.length <= 200) {
                                textLength.value = it.length
                                text.value = it
                            }
                        },
                        label = {
                          Text(text = textHint)
                        },
                        modifier = Modifier
                            .padding(top = 16.dp)
                            .sizeIn(minHeight = 120.dp)
                            .background(Color.Transparent)
                    )
                }

            },
            buttons = {
                Row(
                    modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Switch(checked = isAnonymous.value, onCheckedChange = {
                            isAnonymous.value = it
                        })
                        Text(text = "Anonymously")
                    }

                    Text(text = "${textLength.value}/200")
                }
                Button(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 24.dp),
                    onClick = {
                        onSubmit(text.value)
                    }) { Text(text = "Submit") }
            }
            )
}

Answer 1

这绝对是您正在寻找的

 TextField(
                value = text.value,
                onValueChange = {
                    if (it.length <= 200) {
                        textLength.value = it.length
                        text.value = it
                    }
                },
                label = {
                    Text(text = textHint)
                },
                modifier = Modifier
                    .padding(top = 16.dp)
                    .sizeIn(minHeight = 120.dp)
                    .background(Color.Transparent),
                keyboardOptions = KeyboardOptions.Default.copy(
                    imeAction = ImeAction.Done
                ),
                keyboardActions = KeyboardActions(
                    onDone = {
                       //Do something here
                    },
                ),
            )

Answer 2

要解决此问题，只需使用

Dialog

而不是

AlertDialog

。

---

_{此答案作为 edit 发布到问题 TextField New Line Issue in Alert Dialog with Jetpack Compose，由 OP Mustafa Berk 在 CC BY-SA 4.0 下发布。}