Плотное текстовое поле в Jetpack Compose

Question

В старой системе просмотра мы можем сделать TextInputLayout плотный стиль использования Widget.MaterialComponents.TextInputLayout.FilledBox.Dense

Как создать плотный вариант TextField в Compose?

Answer 1

В compose нет специального компонента для этого, но с новой системой дизайна получить это несложно.
Вы можете использоватьModifier на TextField для достижения того же эффекта.

В спецификациях материального дизайна я вижу, что плотное текстовое поле имеет высоту 40.dp

Тогда примерно так должно работать.

      OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Label") },
    modifier = Modifier.height(40.dp)
)

Answer 2

Начиная с 1.2.0-alpha04вы можете использовать TextFieldDecorationBoxвместе с BasicTextFieldдля создания пользовательского текстового поля на основе текстовых полей Material Design.

Чтобы создать плотное текстовое поле, используйте contentPaddingпараметр, чтобы уменьшить отступы вокруг поля ввода.

Что-то типа:

      var text by remember { mutableStateOf("") }
val singleLine = true
val enabled = true
val interactionSource = remember { MutableInteractionSource() }
BasicTextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier
        .indicatorLine(enabled, false, interactionSource, TextFieldDefaults.textFieldColors())
        .background(
            TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
            TextFieldDefaults.TextFieldShape
        )
        .width(TextFieldDefaults.MinWidth),
    singleLine = singleLine,
    interactionSource = interactionSource
) { innerTextField ->
    TextFieldDecorationBox(
        value = text,
        innerTextField = innerTextField,
        enabled = enabled,
        singleLine = singleLine,
        visualTransformation = VisualTransformation.None,
        interactionSource = interactionSource,
        label = { Text("Label") },
        contentPadding = TextFieldDefaults.textFieldWithLabelPadding(
            start = 4.dp,
            end = 4.dp,
            bottom = 4.dp // make it dense
        )
    )
}