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.
Aquí tienes el archivo MainActivity.kt completo por si lo quieres revisar:
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.