Cómo configurar el tipo de entrada para un TextField en Jetpack Compose

1 minuto de lectura

Avatar de usuario de Cristan
Cristán

Me gustaría restringir lo que el usuario puede escribir en un TextField en Jetpack Compose. ¿Cómo puedo hacer eso?

El equivalente en xml es inputType:

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:hint="Only numbers please!" />

Avatar de usuario de Cristan
Cristán

Utilizar Opciones de teclado:

TextField(
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)

  • si {,.-} no son necesarios (keyboardType = KeyboardType.NumberPassword) se puede usar

    – David Aleksanian

    13/03/2022 a las 15:50

  • Si . es de uso necesario KeyboardType.Decimal como Number no lo garantiza

    – Tomás

    9 ene a las 22:03

Avatar de usuario de Livin
vivir

te gusta esto Opciones de teclado

var textShopName by remember { mutableStateOf("") } 

OutlinedTextField(
            keyboardOptions = KeyboardOptions(
                capitalization = KeyboardCapitalization.None,
                autoCorrect = true,
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Next
            ),
            value = textShopName,
            onValueChange = { textShopName = it },
            label = { Text("Shop Name") },
            modifier = Modifier
                .padding(start = 16.dp, end = 16.dp, top = 20.dp)
                .fillMaxWidth(),

            )

Puedes usar algo como:

TextField(
        ....,
        keyboardOptions = 
             KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number)
        )

  • ¿Cuál es la ventaja de copiar el valor predeterminado?

    – sergey

    13/11/2021 a las 20:55

  • @Sergey La ventaja es anular solo un valor.

    – Gabriele Mariotti

    14 de noviembre de 2021 a las 8:06

Para Contraseña tipo de teclado para ocultar la contraseña, debe configurar el visualTransformation también

TextField(
 keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
 visualTransformation =  PasswordVisualTransformation(),
                

Solo para agregar a las respuestas anteriores si desea mostrar teclado numérico para números decimales Manten eso en mente:

La mayoría de los teclados muestran un separador decimal cuando el tipo de teclado se configura como Número. Sin embargoes posible que un teclado espere TYPE_NUMBER_FLAG_DECIMAL flag en inputType para mostrar realmente una clave para el separador decimal.

Entonces, si desea mostrar el teclado numérico para números decimales para evitar las esquinas en ciertos teclados, debe usar keyboardType = KeyboardType.Decimal:

TextField(
        ...,
        keyboardOptions = 
             KeyboardOptions(keyboardType = KeyboardType.Decimal)
        ...,    
        )

¿Ha sido útil esta solución?