Audiocurso Jetpack Compose 3 Box

Audiocurso Jetpack Compose 3 Box

Seguimos avanzando con el audiocurso de Jetpack Compose. En esta ocasión, le toca el turno al Box.

¿Qué es el Box?

El Box es uno de los layouts más empleados en Jetpack Compose.

Su sencillez y versatilidad son los responsables de ello.

¿Con qué layout de XML se corresponde?

Con el FrameLayout.

Características

Nor sirve cuando queremos que los composables que metamos dentro estén alineados de forma relativa a su padre. Es decir, el Box.

A este Box le podemos aplicar un Modifier. Por ejemplo, podríamos decirle que ocupe todo el ancho y alto de la pantalla con un Modifier.fillMaxSize().

Lo que nos podría quedar algo así:

Box(     modifier = Modifier.fillMaxSize() ) {     Composable1()     Composable2() }

Aunque también podemos querer ocupar sólo el ancho con Modifier.fillMaxWidth(). O el alto, con Modifier.fillMaxHeight().

Como ves, todo de un modo muy legible.

Retornando a la equivalencia con los antiguos layouts en los XMLs, podemos deducir que esto equivaldría a hacer un match_parent, efectivamente.

Y nos podríamos preguntar cómo se hace un wrap_content.

Pues es bien sencillo:

Aunque realmente es la opción que viene por defecto, para que quede más claro, si lo que queremos es hacer un wrap_content a lo ancho, habría que hacer Modifier.wrapContentWidth().

A lo alto, sería con Modifier.wrapContentHeight().

Y si queremos hacerlo tanto a lo ancho como a lo alto, lo haríamos con Modifier.wrapContentSize().

Pero aún no hemos tenido en cuenta como deberíamos hacer la alineación.

Muy bien.

Pues para eso utilizaremos la propiedad contentAlignment.

De esta manera, podremos alinear los elementos hijos del Box.

Quedaría algo así:

Box(     modifier = modifier.fillMaxSize(),     contentAlignment = Alignment.Center ) {     Composable1()     Composable2() }

Pero qué pasa si queremos poner cada uno en un sitio.

Algo bastante común, por cierto. 😅

Muy fácil.

Vamos al hijo en particular y lo declaramos en su modifier.

Tendría esta pinta:

Composable1(     modifier = Modifier.align(Alignment.BottomCenter) )

Y de momento, esto es lo que te quería contar de este tipo tan empleado de Layouts como son los Box.