Автозаполнение в Compose 1.8.0

В 2021 году я немного написал о поддержке автозаполнения в Jetpack Compose. В то время API были довольно неуклюжими в использовании. Тогда вам нужно было обернуть свой компонуемый объект в AutofillNode, вручную добавить его в дерево узлов автозаполнения и самостоятельно управлять обновлением состояния текстового поля.

Compose UI 1.8.0 представляет новые API автозаполнения, которые устраняют многие из этих недостатков. Новые API более лаконичны и упрощают поддержку автозаполнения с помощью Jetpack Compose.

Новое семантическое автозаполнение

Конфигурация автозаполнения теперь предлагается через семантический фреймворк Compose. Все, что вам нужно сделать, это задать семантическое свойство contentType!

Например, добавьте ContentType.EmailAddress, чтобы настроить TextField для автозаполнения адресов электронной почты:

var email by rememberTextFieldState()
TextField(
    email = email,
    modifier = Modifier.semantics { contentType = ContentType.EmailAddress }
)

Легко!

Вы также можете объявить, что текстовое поле может принимать несколько типов автозаполняемого контента. Если вы поддерживаете аутентификацию по адресу электронной почты или номеру телефона, вы можете разрешить автозаполнение обоих:

Modifier.semantics { 
  contentType = ContentType.EmailAddress + ContentType.PhoneNumber
}

Управление автоматически заполненным содержимым

Если вы используете варианты TextField, которые принимают значение, вы можете использовать onValueChange для управления вставленным текстом.

Например, вы можете преобразовать вводимый текст в верхний регистр:

  TextField(
    value = emailAddress,
    onValueChange = { emailAddress = it.uppercase() },
    modifier = modifier.semantics { contentType = ContentType.EmailAddress },
  )

Если вы используете TextFieldState, вы можете использовать новые API TextField inputTransformation и outputTransformation:

И TextField с заглавными буквами можно реализовать примерно так:

  TextField(
    state = emailState,
    modifier = modifier.semantics { contentType = ContentType.EmailAddress },

    // Swap this for an `inputTransformation` to uppercase the actual state
    // This only visually shows uppercase
    outputTransformation = OutputTransformation {
      replace(0, length, toString().uppercase())
    }

Еще улучшено: выделение автозаполнения

Один из недостатков, который я отметил в своем первоначальном посте в блоге, заключался в том, что автозаполнение Compose не выделяло поля автоматически. Автозаполнение с View устанавливало желтый фон, чтобы информировать пользователей о том, что поле было заполнено автоматически. Новое автозаполнение Compose делает это! Ну, иногда.

Это работает «из коробки», если вы используете TextField с перегрузкой state: TextFieldState. Это должно работать и для перегрузок value, но есть ошибка, и подсветка рисуется позади поля.

Исправлено: поддержка контекстного меню для текста

Старая реализация не поддерживала отображение опции «автозаполнение» в контекстном меню. Теперь поддерживает! Это позволяет пользователям вручную запускать автозаполнение при необходимости.

Другие типы входных данных

Вы можете использовать эту семантику автозаполнения и с другими типами входных данных!

Допустим, вам нужен переключатель, который автоматически включает себя, если адрес электронной почты начинается с буквы «E». Вы можете сделать это, используя семантическое свойство onAutofillText, чтобы получить колбек, когда автозаполнение предоставляет вам текст:

var firstLetterE by remember { mutableStateOf(false) }
Switch(
  modifier = Modifier.semantics {
    contentType = ContentType.EmailAddress

    // We need to declare a data type explicitly since this isn't a TextField
    contentDataType = ContentDataType.Text

    onAutofillText { text ->
      firstLetterE = text.startsWith("E", ignoreCase = true)
      true
    }
  },
  checked = firstLetterE,
  onCheckedChange =  { firstLetterE = it },
)

Это может показаться глупой функцией (так и есть), но с помощью этой техники также можно сделать автоматически заполняемые раскрывающиеся списки или радиобоксы для дат рождения, пола или других данных.

Также доступны другие ContentDataTypes для списков, переключателей и дат, но они еще не реализованы.

Заключение

Новые API автозаполнения Compose 1.8.0 — это большое улучшение для разработчиков. Теперь для автозаполнения полей требуется значительно меньше кода и предлагается больше функций. Compose близок к тому, чтобы иметь паритет функций с View-фреймворком!

Если вы хотите узнать больше об автозаполнении в Compose, я также рекомендую ознакомиться с официальной документацией, которая включает дополнительные советы, такие как ручное сохранение новых данных автозаполнения.

Источник