JetPack组成：随着文本的增长，Textfield在Alertdialog之外对齐

发布于 2025-02-11 07:05:24 字数 1320 浏览 1 评论 0原文

如果您运行以下合并并输入文本字段中的长多线文本，则会看到随着文本的增长，Textfield会离开AlertDialog。

有办法解决这个问题吗？

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun MyComposable() {
    var text by remember {
        mutableStateOf("Press enter a couple of times to see the problem")
    }
    AlertDialog(
        onDismissRequest = { },
        title = {
            OutlinedTextField(
                value = text,
                onValueChange = { text = it },
                textStyle = MaterialTheme.typography.h5,
                label = { Text(text = "Text") },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
            )
        },
        confirmButton = {
            TextButton(
                onClick = {}
            ) {
                Text("Done")
            }
        },
        dismissButton = {
            TextButton(
                onClick = { }
            ) {
                Text("Cancel")
            }
        }
    )
}

原文

If you run the following composable and enter a long multiline text into the textfield, you will see that as the text grows, the textfield leaves the AlertDialog.

Is there a way to fix this?

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun MyComposable() {
    var text by remember {
        mutableStateOf("Press enter a couple of times to see the problem")
    }
    AlertDialog(
        onDismissRequest = { },
        title = {
            OutlinedTextField(
                value = text,
                onValueChange = { text = it },
                textStyle = MaterialTheme.typography.h5,
                label = { Text(text = "Text") },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
            )
        },
        confirmButton = {
            TextButton(
                onClick = {}
            ) {
                Text("Done")
            }
        },
        dismissButton = {
            TextButton(
                onClick = { }
            ) {
                Text("Cancel")
            }
        }
    )
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昔日梦未散 2025-02-18 07:05:24

修改器。heighin限制内容的高度在MINDP和MAXDP之间受到传入的测量约束所允许的限制。如果传入的约束更加限制，则请求的大小将遵守传入的约束，并试图尽可能接近首选尺寸。

Column {
    var text by remember { mutableStateOf("some text")}
    OutlinedTextField(value = text,
        onValueChange = {text = it},
        textStyle = MaterialTheme.typography.headlineSmall,
        label = { Text(text = "Text") },
        modifier = Modifier.fillMaxWidth()
            .heightIn(min = 0.dp, max = 150.dp))
}

Textfield将在HefterIn修饰符中指定的最大高度，然后开始滚动。

Modifier.heightIn constrain the height of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

Column {
    var text by remember { mutableStateOf("some text")}
    OutlinedTextField(value = text,
        onValueChange = {text = it},
        textStyle = MaterialTheme.typography.headlineSmall,
        label = { Text(text = "Text") },
        modifier = Modifier.fillMaxWidth()
            .heightIn(min = 0.dp, max = 150.dp))
}