PricingLoginStart free
Android Academy · Урок

TextField и пользовательский ввод

Получайте текст от пользователя в Compose

Урок 1 из 413 шагов

«TextField и пользовательский ввод» — бесплатный урок Android Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.

Получение пользовательского ввода

Почти каждому настоящему приложению нужно что-то спросить у пользователя: имя, адрес электронной почты или поисковый запрос. В Jetpack Compose строительным блоком для ввода текста служит TextField.

На этом уроке Вы узнаете, как отображать текстовое поле, считывать введённый пользователем текст и поддерживать поле синхронизированным с состоянием приложения. Это основа любой формы, которую Вы когда-либо создадите.

Ваш первый TextField

Для TextField нужны две вещи: value (текущий отображаемый текст) и callback onValueChange (действие при вводе текста пользователем).

Compose использует декларативный подход, поэтому поле не хранит собственный текст. Вы храните текст в состоянии и передаёте его обратно в поле. Этот шаблон называется поднятием состояния.

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

Как работает цикл значения

Самая важная идея: TextField показывает ровно то, что Вы передали в value. Когда пользователь нажимает клавишу, Compose вызывает onValueChange с новым текстом.

  • Вы сохраняете этот новый текст в состоянии.
  • Изменение состояния запускает рекомпозицию.
  • Поле перерисовывается с обновлённым value.

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

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

Добавление подписи и подсказки

Обычное текстовое поле не объясняет пользователю, что вводить. Добавьте label (подпись, перемещающуюся над полем) и placeholder (подсказку, отображаемую, пока поле пусто).

Такие небольшие детали делают формы гораздо понятнее.

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design предлагает два основных стиля. У TextField есть залитый фон, а OutlinedTextField рисует вокруг поля рамку. Они используют один и тот же API, поэтому переключиться между ними очень просто.

Поля с рамкой популярны в формах, потому что при вертикальном расположении их легко читать.

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

Левые и правые значки

Поле можно украсить значками. leadingIcon отображается в начале поля (отлично подходит для значка поиска или электронной почты), а trailingIcon — в конце (часто это кнопка очистки).

Значки позволяют сразу понять назначение поля.

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

Кнопка очистки

Распространённый шаблон взаимодействия — маленький знак «x», очищающий поле. Показывайте его только при наличии текста, используя слот trailingIcon и IconButton.

Обратите внимание: очистка всего лишь возвращает состояние к пустой строке.

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

Однострочный и многострочный режимы

По умолчанию TextField может расширяться на несколько строк. Для таких данных, как имя или адрес электронной почты, установите singleLine = true, чтобы пользователь не мог вставить перевод строки.

Для длинных заметок оставьте многострочный режим и при необходимости ограничьте высоту с помощью maxLines.

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

Мгновенная реакция на ввод

Поскольку Вы управляете состоянием текста, Вы можете мгновенно реагировать на его изменения. Классический пример — отображение счётчика символов под полем.

Каждое нажатие клавиши обновляет text, из-за чего рекомпозируются и поле, и расположенный под ним счётчик.

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

Преобразование ввода

Иногда перед сохранением нужно нормализовать введённый пользователем текст. Внутри onValueChange сначала преобразуйте новое значение.

Здесь мы переводим имя пользователя в нижний регистр и удаляем пробелы. Поскольку Вы управляете циклом, поле всегда показывает очищенную версию.

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

Чистый Kotlin: очистка имени пользователя

Приведённая выше логика преобразования — это обычный Kotlin. Её можно проверять отдельно, без Android. Здесь то же правило очистки выполняется автономно.

Если хранить такую логику в чистых функциях, её будет легко проверять модульными тестами.

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

Быстрая проверка

Что произойдёт, если callback onValueChange у TextField никогда не обновляет состояние, переданное в value?

Ответь в интерактивном уроке

Итоги

Теперь Вы знаете основы ввода текста в Compose:

  • TextField и OutlinedTextField принимают value и callback onValueChange.
  • Вы храните текст в remember { mutableStateOf(...) } и обновляете его при каждом изменении (поднятие состояния).
  • label, placeholder, левые и правые значки, а также singleLine определяют внешний вид и поведение.
  • Поскольку Вы управляете состоянием, Вы можете реагировать на ввод в реальном времени или преобразовывать его по мере набора.

Далее: управление состоянием всей формы, а не только одного поля.

Можно начать бесплатно

Изучай Kotlin с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
36
Уроки
152
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «TextField и пользовательский ввод» бесплатный?

Да — полный текст урока «TextField и пользовательский ввод» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.

Чему я научусь в уроке «TextField и пользовательский ввод»?

Получайте текст от пользователя в Compose Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Android Academy?

Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «TextField и пользовательский ввод»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Android Academy?

Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. TextField и пользовательский ввод
  2. Управление состоянием формы
  3. Проверка ввода
  4. Параметры и действия клавиатуры
← Назад к Android Academy