Android Compose TextField：如何设置精确的 3 行

Question

我想TextField用 3 行来创建：

即使其中没​​有任何文本TextField，我也想看到 3 行，即我需要经典 xml 布局中的直接等效项EditText.lines。

我的不起作用的代码是：

OutlinedTextField(
            value = currentText,
            onValueChange = { currentText = it },
            label = { Text ("Label") },
            maxLines = 3,
            modifier = Modifier.fillMaxWidth().wrapContentHeight().padding(16.dp),
            singleLine = false
        )

你可以帮帮我吗？

Answer 1

我们可以通过设置 OutlinedTextField 的高度来显示多行编辑文本。下面的例子进行了测试。

                OutlinedTextField(
                    modifier = Modifier
                        .fillMaxWidth().height(120.dp)
                        .padding(start = 15.dp, top = 10.dp, end = 15.dp)
                        .background(Color.White, RoundedCornerShape(5.dp)),
                    shape = RoundedCornerShape(5.dp),
                    value = text,
                    onValueChange = { text = it },
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
                    maxLines = 3,
                    textStyle = MaterialTheme.typography.caption
                )

下面附上图片。

Answer 2

1.4.0-alpha02从 M2和 M3开始，您可以在和中1.1.0-alpha02使用该属性：minLinesTextFieldOutlinedTextField

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text ("Label") },
    minLines = 3,
    maxLines = 3,
    modifier = Modifier.fillMaxWidth().wrapContentHeight().padding(16.dp)
)

可与M2、M3配合使用。

Answer 3

此功能有一个功能请求，我建议您对其加注星标，并可能对其发表评论，因为它已经有一段时间没有更新了。

在那之前你可以使用这个技巧。我用额外的行渲染一个不可见的文本字段，以便它占据正确的大小，然后将该大小应用于真实的文本字段。我还传递modifier和作为fortextStyle的键，这样如果您更改它们，高度将被重新计算。如果您传递的任何其他参数可能会更改视图的大小，您也应该传递它们以记住。rememberheightUpdateNeeded

@Composable
fun MinLinesOutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    minLines: Int,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small,
    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
) {
    val heightState = remember { mutableStateOf<Int?>(null) }
    var heightUpdateNeeded by remember(modifier, textStyle) { mutableStateOf(true) }
    val height = with(LocalDensity.current) {
        heightState.value?.toDp()
    } // to use if nullable unwrapping
    Box(modifier.height(IntrinsicSize.Min).width(IntrinsicSize.Min)) {
        if (heightUpdateNeeded) {
            OutlinedTextField(
                value = value + "\n".repeat(minLines),
                onValueChange = onValueChange,
                enabled = enabled,
                readOnly = readOnly,
                textStyle = textStyle,
                label = label,
                placeholder = placeholder,
                leadingIcon = leadingIcon,
                trailingIcon = trailingIcon,
                isError = isError,
                visualTransformation = visualTransformation,
                keyboardOptions = keyboardOptions,
                keyboardActions = keyboardActions,
                singleLine = singleLine,
                maxLines = maxLines,
                interactionSource = interactionSource,
                shape = shape,
                colors = colors,
                modifier = Modifier
                    .fillMaxSize()
                    .alpha(0f)
                    .onSizeChanged {
                        heightUpdateNeeded = false
                        println("onSizeChanged $it")
                        heightState.value = it.height
                    }
            )
        }
        if (height != null) {
            OutlinedTextField(
                value = value,
                onValueChange = onValueChange,
                enabled = enabled,
                readOnly = readOnly,
                textStyle = textStyle,
                label = label,
                placeholder = placeholder,
                leadingIcon = leadingIcon,
                trailingIcon = trailingIcon,
                isError = isError,
                visualTransformation = visualTransformation,
                keyboardOptions = keyboardOptions,
                keyboardActions = keyboardActions,
                singleLine = singleLine,
                maxLines = maxLines,
                interactionSource = interactionSource,
                shape = shape,
                colors = colors,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(height)
            )
        }
    }
}