======JetPack Compose======
**Jetpack Compose** es el sistema oficial de Google para el diseño de interfaces. Con Compose las interfaces se construyen mediante funciones en lenguaje Kotlin.

===== Funciones Composable =====
Las funciones que forman parte de la interfaz se marcan con la anotación:

<code kotlin>
@Composable
</code>

Por ejemplo:

<code kotlin>
@Composable
fun Saludo() {
    Text("Hola Android")
}
</code>

Una función ''@Composable'' puede llamar a otras funciones ''@Composable'' para construir interfaces más complejas.

Por ejemplo:

<code kotlin>
@Composable
fun PantallaPrincipal() {
    Column {
        Text("Bienvenido")
        Text("Mi primera aplicación")
    }
}
</code>

==== Mostrar la interfaz ====
Desde la Activity podemos indicar qué interfaz queremos mostrar utilizando:

<code kotlin>
setContent {
    PantallaPrincipal()
}
</code>

Un ejemplo completo sería:

<code kotlin>
class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        PantallaPrincipal()
    }
}

}
</code>

==== Componentes básicos ====
Compose incluye numerosos componentes para construir interfaces. Algunos de los más utilizados al principio son:

^ Componente ^ Función ^
| ''Text'' | Mostrar texto |
| ''Button'' | Crear botones |
| ''TextField'' | Introducir texto |
| ''Image'' | Mostrar imágenes |
| ''Icon'' | Mostrar iconos |

Por ejemplo:

<code kotlin>
@Composable
fun Ejemplo() {
   Text("Nombre")
   Button(
      onClick = {
        // Acción al pulsar
      }
   ) {
    Text("Aceptar")
   }
}
</code>

==== Organización de elementos ====
Compose permite organizar los componentes mediante distintos contenedores. Los principales son:

^ Componente ^ Función ^
| ''Column'' | Coloca los elementos verticalmente |
| ''Row'' | Coloca los elementos horizontalmente |
| ''Box'' | Permite superponer o posicionar elementos |

Ejemplo:

<code kotlin>
@Composable
fun DatosUsuario() {

Column {
    Text("Nombre: Ana")
    Text("Edad: 22")
}

}
</code>

También podemos combinar diferentes contenedores:

<code kotlin>
@Composable
fun FichaUsuario() {

Column {
    Text("Usuario")

    Row {
        Text("Ana")
        Text("22 años")
    }
}

}
</code>

==== Modifier ====
''Modifier'' se utiliza para modificar el aspecto, tamaño o posición de los componentes. Por ejemplo:

<code kotlin>
Text(
    text = "Hola Android",
    modifier = Modifier.padding(16.dp)
)
</code>

También podemos encadenar varios modificadores:

<code kotlin>
Button(
    onClick = { },
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Text("Aceptar")
}
</code>

Algunos modificadores habituales son:
  * ''padding()''
  * ''fillMaxWidth()''
  * ''fillMaxSize()''
  * ''width()''
  * ''height()''

==== Material Design ====
Jetpack Compose utiliza habitualmente componentes basados en Material Design. Por ejemplo:

<code kotlin>
Button(
    onClick = { }
) {
    Text("Guardar")
}
</code>

o:

<code kotlin>
TextField(
    value = "",
    onValueChange = { },
    label = {
        Text("Nombre")
    }
)
</code>

Estos componentes ya incluyen comportamientos y estilos preparados para aplicaciones Android modernas.

==== Previsualizar componentes ====
Android Studio permite previsualizar componentes Compose sin ejecutar completamente la aplicación. Para ello se utiliza la anotación:

<code kotlin>
@Preview
</code>

Por ejemplo:

<code kotlin>
@Preview(showBackground = true)
@Composable
fun PantallaPreview() {
    PantallaPrincipal()
}
</code>

Esto permite comprobar rápidamente cómo se verá una parte de la interfaz.

==== Componentes reutilizables ====
Una de las ventajas de Compose es que podemos dividir una interfaz en funciones pequeñas y reutilizables. Por ejemplo:

<code kotlin>
@Composable
fun Titulo(texto: String) {
    Text(texto)
}
</code>

Podemos reutilizarla varias veces:

<code kotlin>
@Composable
fun Pantalla() {

Column {
    Titulo("Usuarios")
    Titulo("Configuración")
}

}
</code>

Esto facilita mantener el código organizado y evita repetir elementos.

===== Estado y eventos =====
El estado es el conjunto de datos que determina cómo debe mostrarse la interfaz en un momento determinado.