TextFieldでパスワード入力欄を表示する
最終更新日:2024-08-25
Jetpack Composeでパスワード入力欄を表示するには、 TextField
の visualTransformation
と keyboardOptions
パラメータに値を指定します。Viewシステムの EditText
では android:inputType="textPasssord"
を指定して実現していました。
@Composable
fun Greeting() {
var text by remember { mutableStateOf("") }
TextField(
value = text,
onValueChange = { newValue -> text = newValue },
label = {
Text("password")
},
// この2つを追加する
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = ImeAction.Done,
),
)
}
visualTransformation
には PasswordVisualTransformation()
を指定します。この指定を忘れると入力してもらったパスワードがそのまま見えてしまいます。
keyboardOptions
には KeyboardOptions
を指定します。 keyboardType
に KeyboardType.Password
を指定し、 imeAction
も適切なものを指定します。 imeAction
の指定を省略すると、パスワードの文字として改行コードが入力可能になってしまいます。
プレビューは次のようになります。