Блог

Итак, у меня есть это текстовое поле,

 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 , как вы можете видеть. Однако это выглядит так,

Похоже, текст/заполнитель обрезан. Как это исправить?

Видите ли, проблема в том, что размер шрифта слишком велик для указанной высоты. Правильный способ указать высоту поля-использовать модификаторы, как вы уже делаете. Однако, чтобы обойти эту проблему, либо увеличьте высоту текстового поля, либо уменьшите размер шрифта.

Я столкнулся с той же проблемой, используя 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"
)