Crea modificadores personalizados Jetpack Composez (Deep Dive)

Nota: Es posible que deba conocer los conceptos básicos de los modificadores en Jetpack Compose antes de continuar. Obtenga más información sobre los conceptos básicos de los modificadores aquí.

Modifier es tanto una interfaz como un objeto complementario en Jetpack Compose. Define varios métodos como diversión foldIn(inicial: R, operación: (R, Elemento) -> R): Rfun foldOut(inicial: R, operación: (Elemento, R) -> R): RAquí elemento representa un solo elemento contenido en un modificador Cadena. No necesitamos entender esta función, pero resulta que los modificadores siguen funcionando internamente elemento tipos elemento tampoco es más que otra interfaz que amplía esa modificador Interfaz, por lo que también es solo un modificador. Pero necesitamos implementaciones concretas de ello. Modificador.Elemento Interfaz para introducirlos en la cadena de modificadores para crear nuestros modificadores personalizados. En resumen, un modificador es una colección ordenada e inmutable de elementos modificadores (por ejemplo, modificador.elemento). Para crear algo personalizado, siempre podemos mirar los componentes existentes y ver cómo lo han hecho los autores del marco, que es la verdadera belleza del código abierto. También tenemos la oportunidad de aprender cómo los mejores ingenieros diseñan estas API. Seleccionemos el modificador background() y veamos cómo se implementa este modificador en Compose Framework/Draws [shape] con un fijo [color] detrás del contenido.* @param color color para pintar el fondo con* @param forma forma deseada del fondo*/fun Modifier.background(color: Color,shape: Shape = RectangleShape) = this.then(Background(color = color , forma = forma, inspectorInfo = debugInspectorInfo {Nombre = «Fondo» Valor = Propiedades de color[«color»] = propiedades del color[«shape»] = forma}))background() es una función de extensión de modificador. recibe un modificador instancia y luego llama a then() y devuelve el resultado (un modificador encadenado). then() toma solo un parámetro, el otro modificador, que debe concatenarse con el actual, por lo que los modificadores se aplican en el orden en que aparecen en el código. En el caso de background(), devuelve una instancia de antecedentes lo que se estira InspectorValueInfo e implementa el DibujarModificador interfaz InspectorValueInfo (utilizado principalmente para fines de depuración, por lo que no profundizaremos en eso) y no sorprende DibujarModificador Interfaz mejorada Modificador.Elemento significa implementación de clase DibujarModificador también puede funcionar como Modificador.Elemento Lo que aprendimos anteriormente son modificadores, que en este caso la implementación concreta está encadenada a antecedentes no necesitamos entender eso antecedentes Clase para aprender a crear modificadores personalizados, por lo que no entraré en esa clase en este artículo si lo desea. Para crear modificadores personalizados podemos implementar directamente Modificador.Elemento interfaz o usar algunos hijos existentes de ella como un DibujarModificador utilizado en modificadores que dibujan en la superficie componibles al que se le aplica este modificador. ex — background() , paint() , drawBehind{} etc. Si miras el código fuente, todas las implementaciones de DibujarModificador. Hay otras interfaces predefinidas que podemos implementar para crear modificadores personalizados como: Modificador de diseño utilizado por los modificadores que manipulan el tamaño de componibles ex — scale() , height() , width() , padding(), offset() , etc. todos usan LayoutModifiers bajo el capó.Un modificador personalizado cubierto en el próximo artículo que le enseña cómo enmarcar cualquier composición. La implementación se tratará en un artículo separado, ya que este artículo ya es largo. Echa un vistazo a la implementación a continuación