Componentes principales y layouts

Puedes descargar la icono de Platzi aquí:

En versiones nuevas, una manera de insertar las imágenes, (si es que te da error en la versión que tienes), puedes agregar a una variable.

val ejemploImagen = painterResource (id = R.drawable.imagen)

column () {
	image (painter = ejemploImagen , contentDescription = null)
}

Por si les marca ERROR a los usuarios de windows o que tengan una version mas nueva a la del video asi queda

fun HelloCompose(){
    //Se ocupa para organizar componentes
    Column {
        androidx.compose.foundation.Image(painterResource(id = R.drawable.aorus)
        , contentDescription = null)
        Text("Este curso es una chingoneria, A Huevo que si!!!!")
        Text("Curso de JetPack Compose :D")
    }

}

Pueden encontrar el código fuente del proyecto de ejemplo en el siguiente repositorio:

https://github.com/jesus-medina/HelloCompose

Pueden clonar el repositorio o descargar directamente el proyecto.

Sigan las instrucciones para ver el código final de cada clase y compararlo con el código que ustedes escriban. Así podrán verificar que no se les olvidó nada.

La convención en Jetpack Compose es nombrar las funciones con UpperCamelCase. Significa que la primer letra de cada palabra inicia en mayúscula. Ejemplo:

@Composable
fun HelloComposable() {
// ...
}

Column es una función componible que internamente llama a un Layout. Dentro de la función Column, el Layout acomoda los elementos de manera vertical de arriba hacia abajo y los alinea de inicio a fin (O izquierda a derecha).

Puedes copiar el código que está dentro de la función Column y mandar a llamar la función Layout con todos los valores que la función Column ya tiene; pero tú decides qué es mejor para ti.

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
) {
    val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment)
    Layout(
        content = { ColumnScopeInstance.content() },
        measurePolicy = measurePolicy,
        modifier = modifier
    )
}