如何在 Jetpack Compose 中正确设置 TextField 的高度？

Question

所以我有这个文本字段，

var value = remember { mutableStateOf("") }

OutlinedTextField(
    value = value.value,
    placeholder = {
        Text("Search Users")
    },
    singleLine = true,
    modifier = Modifier.height(40.dp),
    onValueChange = {
        value.value = it
    },
)

我将高度设置为

40.dp

，如您所见。不过看起来是这样的

看起来文本/占位符被切断。如何解决这个问题？

Answer 1

我使用 OutlinedTextField 遇到了同样的问题。显然，这是具有精确填充的材质组件，这会导致文本裁剪（即使字体大小较小）。

这是结果：

解决方案是使用BasicTextField，代码如下：

@Composable
private fun CustomTextField(
modifier: Modifier = Modifier,
leadingIcon: (@Composable () -> Unit)? = null,
trailingIcon: (@Composable () -> Unit)? = null,
placeholderText: String = "Placeholder",
fontSize: TextUnit = MaterialTheme.typography.body2.fontSize
) {
var text by rememberSaveable { mutableStateOf("") }
BasicTextField(modifier = modifier
    .background(
        MaterialTheme.colors.surface,
        MaterialTheme.shapes.small,
    )
    .fillMaxWidth(),
    value = text,
    onValueChange = {
        text = it
    },
    singleLine = true,
    cursorBrush = SolidColor(MaterialTheme.colors.primary),
    textStyle = LocalTextStyle.current.copy(
        color = MaterialTheme.colors.onSurface,
        fontSize = fontSize
    ),
    decorationBox = { innerTextField ->
        Row(
            modifier,
            verticalAlignment = Alignment.CenterVertically
        ) {
            if (leadingIcon != null) leadingIcon()
            Box(Modifier.weight(1f)) {
                if (text.isEmpty()) Text(
                    placeholderText,
                    style = LocalTextStyle.current.copy(
                        color = MaterialTheme.colors.onSurface.copy(alpha = 0.3f),
                        fontSize = fontSize
                    )
                )
                innerTextField()
            }
            if (trailingIcon != null) trailingIcon()
        }
    }
)
}

用改变的背景形状调用它：

CustomTextField(
        leadingIcon = {
            Icon(
                Icons.Filled.Search,
                null,
                tint = LocalContentColor.current.copy(alpha = 0.3f)
            )
        },
        trailingIcon = null,
        modifier = Modifier
            .background(
                MaterialTheme.colors.surface,
                RoundedCornerShape(percent = 50)
            )
            .padding(4.dp)
            .height(20.dp),
        fontSize = 10.sp,
        placeholderText = "Search"
)

Answer 2

这是我的材质 TextField，能够更改 contentPadding。然后你可以打电话到任何地方。

@Composable
fun MyTextField(
    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(),
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = TextFieldDefaults.TextFieldShape,
    colors: TextFieldColors = TextFieldDefaults.textFieldColors(),
    contentPadding: PaddingValues = PaddingValues(start = 10.dp, end = 10.dp, top = 5.dp, bottom = 5.dp)
) {
    // If color is not provided via the text style, use content color as a default
    val textColor = textStyle.color.takeOrElse {
        colors.textColor(enabled).value
    }
    val mergedTextStyle = textStyle.merge(TextStyle(color = textColor))

    @OptIn(ExperimentalMaterialApi::class)
    BasicTextField(
        value = value,
        modifier = modifier
            .background(colors.backgroundColor(enabled).value, shape)
            .indicatorLine(enabled, isError, interactionSource, colors),
        onValueChange = onValueChange,
        enabled = enabled,
        readOnly = readOnly,
        textStyle = mergedTextStyle,
        cursorBrush = SolidColor(colors.cursorColor(isError).value),
        visualTransformation = visualTransformation,
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
        interactionSource = interactionSource,
        singleLine = singleLine,
        maxLines = maxLines,
        decorationBox = @Composable { innerTextField ->
            // places leading icon, text field with label and placeholder, trailing icon
            TextFieldDefaults.TextFieldDecorationBox(
                value = value,
                visualTransformation = visualTransformation,
                innerTextField = innerTextField,
                placeholder = placeholder,
                label = label,
                leadingIcon = leadingIcon,
                trailingIcon = trailingIcon,
                singleLine = singleLine,
                enabled = enabled,
                isError = isError,
                interactionSource = interactionSource,
                colors = colors,
                contentPadding = contentPadding
            )
        }
    )
}

Answer 3

您可以设置 minHeight，而不是使用高度：

modifier = Modifier.defaultMinSize(minHeight = 40.dp)

Answer 4

看到的问题是字体大小对于提供的高度来说太大了。为字段提供高度的正确方法是使用修改器，就像您已经在做的那样。但是，要解决此问题，请增加文本字段的高度或减小字体的大小。

Answer 5

您可以添加此依赖项：

implementation("androidx.compose.material3:material3:1.4.0-alpha03")

然后，在代码中，您可以删除任何填充并设置高度，而无需剪切文本，如下所示：

  val state = rememberTextFieldState()
  OutlinedTextField(
       modifier = Modifier.height(30.dp),
       state = state,
       contentPadding = PaddingValues()
   )

文档