Настроить выделенную строку индикатора Android Составить текстовое поле

Question

Есть ли способ настроить (я бы хотел сократить длину) выделенной линии индикатора в TextField в пользовательском интерфейсе Android Compose?

Я знаю, что это можно скрыть, установив focusedIndicatorColor в прозрачный, как показано в примере ниже:

      TextField(
    value = ...,
    onValueChange = { ... },
    label = { Text("...") },
    modifier = Modifier.weight(1f).padding(horizontal = 8.dp, vertical = 6.dp),
    shape = RoundedCornerShape(8.dp),
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.LightGray,
        cursorColor = Color.Black,
        disabledLabelColor = Color.LightGray,
        focusedIndicatorColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent
    )
)

Answer 1

В TextField следует рекомендациям по материалам, и нет встроенного параметра для изменения этого поведения.

Вы можете использовать обходной путь, используя drawWithContent модификатор:

      val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()

val TextFieldPadding =  6.dp //use this value to change the length of th e indicator
val indicatorColor =  Color.Red
val indicatorWidth = 1.dp

TextField(
    value = text,
    onValueChange = {
        text = it },
    label={Text("Label")},
    interactionSource = interactionSource,
    modifier = Modifier
        .drawWithContent {
            drawContent()
            if (isFocused) {
                val strokeWidth = indicatorWidth.value * density
                val y = size.height - strokeWidth / 2
                drawLine(
                    indicatorColor,
                    Offset((TextFieldPadding).toPx(), y),
                    Offset(size.width - TextFieldPadding.toPx(), y),
                    strokeWidth
                )
            }
        },
    shape = RoundedCornerShape(8.dp),
    colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.LightGray,
        cursorColor = Color.Black,
        focusedIndicatorColor =  Transparent,
        unfocusedIndicatorColor = Transparent,
        disabledIndicatorColor = Transparent
    )
)

сфокусировано:.

Сосредоточено:

Answer 2

Вы могли бы попробовать Modifier.indication()возможно. Я не совсем уверен, что это сработает.

Modifier.indication( interactionSource = MutableInteractionSource(), indication = yourCustomIndicator )