Las funciones componibles de Jetpack Compose

Las funciones componibles son funciones especiales escritas en código Kotlin, que crean interfaces de usuario de una forma rápida y sencilla (sencilla cuando se conoce bien como funcionan).

¿Qué aspecto tiene una función de componibilidad?

Una función componible se distingue rápidamente al llevar encima la anotación @Composable. Aquí tienes un ejemplo:

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

¿Cómo funcionan las funciones componibles?

Estas funciones admitirán una serie de parámetros, con los que podremos reutilizarlas de forma dinámica en diferentes partes de las aplicaciones.

Al llamar a una función componible, le pasamos datos y propiedades que definen cómo se verá y comportará la parte correspondiente de la interfaz de usuario. Básicamente, las funciones componibles convierten datos en elementos de la interfaz de usuario.

Sintaxis de las funciones componibles

Tal y como he explicado, las funciones componibles se distinguen de las funciones normales, al ver la anotación @Componible.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {

}

Después, se declara la función con un nombre, una serie de parámetros y finalmente un bloque de código encerrado entre llaves. Todo puramente código Kotlin.

Desde una función componible puedes llamar a otras funciones componibles como es Text():

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

La función Text() es una función componible predefinida, que no tenemos que declarar para utilizar. Su misión principal es la de mostrar texto en las apps. Así, no tenemos que crear una función a propósito para algo de uso tan común.

Las funciones de vista previa

Sobre cualquier función o parte de nuestras apps, podemos generar funciones de vista previa, para no tener que cargar la app entera en un dispositivo virtual o físico.

Esto se logra con la anotación @Preview. Construyamos una para la función anterior:

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    AplicacionTestTheme {
        Greeting("Programación Fácil")
    }
}

Esta función de previsualización utiliza la llamada a la función con su argumento obligatorio name.

Al hacer esto, no estamos generando nada en la propia app. Solo estamos viendo una vista previa de como quedará esa parte.

Funciones componibles Android Studio

Aquí tienes el archivo MainActivity.kt completo por si lo quieres revisar:

Ver en GitHub.

La primera parte del código (sin prestar atención a las importaciones), es la que genera lo que se ve en la app. Entonces, si cargamos la app en un dispositivo, veremos el saludo como «Hello Android!», no lo veremos como en la vista previa con «Hello Programación Fácil».

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AplicacionTestTheme {
                Greeting("Android")
            }
        }
    }
}

En esta segunda parte, se define la función, con su lógica:

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

Esta función estará lista para ser llamada en cualquier parte, como ocurre en la clase MainActivity, o en la vista previa.

No te pierdas más cosas sobre el desarrollo de apps.

Las funciones componibles de Jetpack Compose

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll hacia arriba