Territorio Móvil
Apps Android
Jetpack Compose Crear cuadro de texto personalizado | por jisungbin | enero 2023

Jetpack Compose Crear cuadro de texto personalizado | por jisungbin | enero 2023

Maestro de la interfaz de usuario de Jetpack Compose

Usando BasicTextField

Foto de Muhammad Nasir en UnsplashEn el mundo Compose, el sistema de diseño básico es Material. Por lo tanto, el uso de un TextField predefinido se ajusta a la especificación de Material Design y limita la personalización.TextField tiene una altura y un color de fondo predeterminados, por lo que puede ver la altura larga y el fondo gris sin aplicar un modificador asociado. Sin embargo, a diferencia de TextField, BasicTextField no muestra ninguna otra opción que no sea el conjunto de modificadores (excepto la altura mínima para que se muestre el texto). BasicTextField se basa en un artefacto base independiente del material. En otras palabras, se puede personalizar libremente sin las restricciones de las especificaciones de diseño de materiales. Tiene un nuevo argumento llamado decorationBox que se puede usar para decorar TextField libremente. BasicTextField consta de dos elementos.

Un elemento que, cuando se hace clic, abre el teclado y llama a onValueChange con el texto ingresado
El elemento que muestra el valor en la pantalla

El primer elemento es el mismo BasicTextField y el segundo elemento es decorationBox. Para demostrar esto, establezcamos el argumento decorationBox en {}. El texto no se muestra en BasicTextField, solo en el texto que muestra texto directamente. Apliquemos esto para implementar rápidamente el TextField de la siguiente manera:Intenté configurar decorationBox para mostrar el texto ingresado en el cuadro. Sin embargo, dado que se trata de un cuadro de decoración personalizado, el cursor del teclado no está visible. Para mostrar el cursor del teclado, debe usar el campo de texto interno proporcionado como argumento predeterminado para decorationBox. Usemos esto para implementar rápidamente TextField de la siguiente manera:Puedes hacerlo así. Es fácil, ¿no? Casi cualquier diseño de TextField se puede implementar con decorationBox. Gracias por leer.