Jetpack Compose 降低 TextField 的高度

Question

我正在尝试设计一个像谷歌搜索栏一样高​​度降低的搜索栏。但输入文本和占位符文本也被裁剪。

            TextField(
                value = searchText.value,
                singleLine = true,
                onValueChange = {
                    searchText.value = it
                },
                placeholder = { //placeholder text is also getting cropped
                   
                        Text(
                            text = "Search",
                            fontSize = 20.sp,
                        )
                    
                },
                textStyle = TextStyle(fontSize = 20.sp), // input text is getting cropped
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 10.dp)
                    .height(45.dp), // Here I have decreased the height
                shape = RoundedCornerShape(22.dp),
                )

我的输入文本和占位符文本被裁剪 50%。怎么解决呢？

Answer 1

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

这是结果：

正如评论建议的解决方案是使用 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

从 开始，1.2.0您可以将TextFieldDecorationBox与 一起使用BasicTextField。
这里你可以使用该contentPadding属性来减少垂直填充：

val colors = TextFieldDefaults.textFieldColors()

BasicTextField(
    value = text,
    onValueChange = { text = it },
    textStyle = TextStyle(fontSize = 20.sp),
    modifier = Modifier
        .background(
            color = colors.backgroundColor(enabled).value,
            shape = RoundedCornerShape(22.dp) //rounded corners
        )
        .indicatorLine(
            enabled = enabled,
            isError = false,
            interactionSource = interactionSource,
            colors = colors,
            focusedIndicatorLineThickness = 0.dp,  //to hide the indicator line
            unfocusedIndicatorLineThickness = 0.dp //to hide the indicator line
        )
        .height(45.dp),

    interactionSource = interactionSource,
    enabled = enabled,
    singleLine = singleLine
) {
    TextFieldDefaults.TextFieldDecorationBox(
        value = text,
        innerTextField = it,
        singleLine = singleLine,
        enabled = enabled,
        visualTransformation = VisualTransformation.None,
        trailingIcon = { /* ... */ },
        placeholder = {
            Text(
                text = "Search",
                fontSize = 20.sp,
            )
        },
        interactionSource = interactionSource,
        // keep horizontal paddings but change the vertical
        contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
            top = 0.dp, bottom = 0.dp
        )
    )
}