Decorar cuadro de texto en Jetpack Compose | por Raheem Hameed
Contenidos
Use el panel de decoración para agregar decoraciones alrededor de su cuadro de texto.
Foto de Aryo Lahap en Unsplash Si ha usado Jetpack Compose en el pasado, habrá notado la facilidad y flexibilidad que ofrece cuando se trata del diseño de la interfaz de usuario (UI). De hecho, hace que el diseño de la interfaz de usuario sea tan eficiente y flexible que la mayoría de los desarrolladores han decidido mantenerlo como su marco de interfaz de desarrollo de Android favorito. «caja de decoración». Según documentación oficial
El cuadro de decoración se define como una lambda componible que permite agregar decoraciones alrededor de los cuadros de texto, como p. B. símbolos, marcadores de posición, mensajes de ayuda o similares, y para ampliar automáticamente el área de destino del campo de texto. Para permitirle controlar la ubicación del campo de texto interno en relación con sus decoraciones, la implementación del campo de texto pasa un parámetro componible controlado por el marco innerTextField a la lambda de decorationBox que proporcione. Debe llamar a innerTextField exactamente una vez.
La definición es simple: un cuadro de decoración es un componible que acepta todos los demás componibles (fila, columna, cuadro, etc.) en él, y se puede hacer clic en cualquier widget componible agregado como parte del cuadro de texto. Esto nos da la posibilidad de insertar cualquier diseño en la lambda.
Sumérgete…
Nota: el cuadro de decoración solo se incluye en BasicTextField() Composable
Primero hagamos uno simple Campo de texto básico con todas las variables necesarias. El código anterior se explica por sí mismo; Agregaremos un modificador para darle al cuadro de texto el aspecto que queremos.
Agregando la decoración…
Ahora agreguemos la caja de decoración para darle un aspecto más personal. No explicaré la mayor parte de este código, solo la parte sobre la caja de decoración.
- Agregamos un parámetro de valor componible llamado cuadro de texto interno Esto nos permite controlar la ubicación del cuadro de texto interno en relación con nuestras decoraciones favoritas.
- Lo que sigue es la decoración, que dejo que tu mente creativa elabore.
línea de fondo
Esta es una vista previa de lo que producirá el código anterior.vista previa del código…
último pensamiento
Sigue esta sencilla y breve explicación de lo que puede hacer una caja decorativa. El cielo es el límite de lo que se puede hacer con los conocimientos recién adquiridos. Entonces, ¡feliz programación!
código base
Si desea consultar el repositorio con el código de muestra: si este artículo le resultó útil, no dude seguir y aplaudir Para mí; Además, me encantaría saber qué piensas al respecto, así que comentario bajo.
