Урок 9: TextField /OutlinedTextField, Валидация почты, ErrorState

Введение

• Во-первых так можно делать, все хорошо.
• Во-вторых я добавлю параметры заголовка и подзаголовка в функцию, чтобы переиспользовать ее с любыми другими строками. Сохраняя при этом единый стиль. Тоже хорошая практика, чтобы функции были универсальными и переиспользуемыми. А также благодаря передаче данных через. параметры можно выносить бизнес-логику в отдельные функции или еще лучше во ViewModel.

@Composable
@Preview
fun PrimaryButton() {
    Button(
        shape = RoundedCornerShape(13.dp),
        onClick = {},
        modifier = Modifier
            .height(56.dp)
            .padding(40.dp, 0.dp)
            .fillMaxWidth()
    ) {
        Text(
            "Зарегистрироваться",
            style = MaterialTheme.typography.labelMedium
        )

    }
}

• OutlinedTextField имеет тот же функционал, что и TextField, но поле отображается с обводкой (или с рамкой).
• BasicTextField – более низкоуровневый компонент для текстового ввода, который дает больше контроля над стилизацией и поведением. Используется в основном для создания собственных текстовых полей.

Создание текстового поля OutlinedTextField

• value – это поле, которое должно отображать содержимое этого самого текстового поля. Не путать с плейсхолдером. Мы можем вписать сюда какой-нибудь текст и он будет отображаться в поле так, как будто его уже вписали заранее. Для примера что-то напишу сюда.
• onValueChange – работает точно также, как и onCheckedChange на предыдущем уроке. Только там при клике в лямбду передавалось значение. Здесь же при каждом изменении текстового поля эта лямбда будет обновляться. Неважно вводим мы какой-то символ или удаляем.
• shape – скопирую кнопки, это добавит единого стиля.
• textStyle – добавлю по той же причине из переопределенных нами ранее стилей.

@Composable
@Preview(showBackground = true)
fun CheckEmailFields() {
    OutlinedTextField(
        value = "42 42 42",
        onValueChange = {},
        shape = RoundedCornerShape(13.dp),
        textStyle = MaterialTheme.typography.headlineMedium,
    )
}

@Composable
@Preview(showBackground = true)
fun CheckEmailFields() {

    var textState by remember { mutableStateOf("") }

    OutlinedTextField(
        value = textState,
        onValueChange = {
            textState = it
        },
        shape = RoundedCornerShape(13.dp),
        textStyle = MaterialTheme.typography.headlineMedium,
	  )
}

Добавление Placeholder

Добавление SingleLine

Добавление Label

Добавление иконки с кнопкой в текстовое поле – IconButton

• leadingIcon добавит иконку в начало поля,
• trailingIcon добавляет в конец.

trailingIcon = {
    IconButton(
        onClick = { textState = "" }
    ) {
        Icon(
            imageVector = Icons.Filled.Clear,
            contentDescription = "Иконка очистки поля"
        )
    }
}

Валидация email и ErrorState

var errorState by remember { mutableStateOf("") }

errorState = if (EMAIL_ADDRESS.matcher(it).matches()) "" else "Некорректный email"

label = {
    Text(
        text = if (errorState.isEmpty()) "Электропочта" else errorState,
        style = MaterialTheme.typography.headlineSmall,
    )
},