Функция OutlinedTextField

Функция OutlinedTextField рисует поле ввода с обводкой в стиле Material3. Текст передают в value, обновление ловят в onValueChange. Состояние задают через remember и mutableStateOf. Параметр visualTransformation подключает, например, PasswordVisualTransformation.

Синтаксис

OutlinedTextField(
	value = text,
	onValueChange = { text = it },
)

Параметры

Параметр	Описание
`value`	Текущая строка в поле.
`onValueChange`	Лямбда с новым текстом после правки пользователя.
`label`	Подпись поля в Material3.
`placeholder`	Текст-подсказка для пустого поля.
`keyboardOptions`	Настройки клавиатуры через класс `KeyboardOptions`.
`visualTransformation`	Как показывать введённые символы на экране. Для пароля часто ставят `PasswordVisualTransformation`.
`isError`	Если `true`, обводка и подпись подсвечиваются как при ошибке.

Пример

Давайте выведем поле с обводкой и начальным текстом:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var text by remember { mutableStateOf("12345") }
			OutlinedTextField(
				value = text,
				onValueChange = { text = it },
				label = { Text("abcde") },
			)
		}
	}
}

На экране поле с рамкой покажет строку "12345" и подпись над ним.

Пример

Давайте скроем ввод пароля точками:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.text.input.PasswordVisualTransformation

class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			var text by remember { mutableStateOf("abcde") }
			OutlinedTextField(
				value = text,
				onValueChange = { text = it },
				label = { Text("abcde") },
				visualTransformation = PasswordVisualTransformation(),
			)
		}
	}
}

На экране символы в поле отображаются скрытыми, а не буквами строки "abcde".

Смотрите также

функция TextField,
которая рисует поле с заливкой фона
класс PasswordVisualTransformation,
который маскирует текст пароля
класс KeyboardType,
который выбирает раскладку клавиатуры
класс FocusRequester,
который запрашивает фокус для поля