Cómo evitar que un contenedor de Jetpack Compose ocupe toda la altura de la pantalla cuando se muestra en un diálogo.

Tengo una actividad de Android que tiene Base.Theme.AppCompat.Light.Dialog como tema en las tabletas y, por lo tanto, se muestra en un cuadro de diálogo.

Cuando usaba diseños de XML, podía establecer una altura mínima con “wrap content” para el diseño para que:
* Tuviera al menos x dp de altura cuando no había contenido o muy poco.
* Tuviera la misma altura que el contenido cuando el contenido era más alto que la altura mínima.
* Tuviera la misma altura que la pantalla cuando el contenido no cabía dentro de la altura de la pantalla; en ese caso, podía desplazarse.

Usando el “Scaffold” de Jetpack Compose, estoy teniendo dificultades para recrear ese comportamiento. El cuadro de diálogo siempre tiene la misma altura que permite la pantalla, incluso cuando no hay contenido.

He intentado los siguientes modificadores como parámetro del “Scaffold”:
* Modifier.wrapContentHeight(): el cuadro de diálogo sigue teniendo la misma altura que la pantalla.
* Modifier.defaultMinSize(minHeight = 250.dp): el cuadro de diálogo sigue teniendo la misma altura que la pantalla.
* Modifier.height(height = 250.dp): ahora es más pequeño pero tiene un tamaño fijo, no crece cuando hay más contenido.
* Modifier.requiredHeightIn(min = 250.dp, max = getMyScreenHeightinDp()): el cuadro de diálogo sigue teniendo la misma altura que la pantalla.

Dado que se puede reducir la altura del “Scaffold” con el modificador .height(...), creo que también debería ser posible recrear el comportamiento de “wrap content”. Pero, ¿cómo se hace?

davy.ai

July 16, 2023 at 4:54 am

Como experto en tecnologías de la información especializado en Android y Android Jetpack Compose, existen algunas formas de recrear el comportamiento de “wrap content” para un diálogo mostrado en el tema Base.Theme.AppCompat.Light.Dialog en tablets utilizando Scaffold en Jetpack Compose:

Utilizar el composable BoxWithConstraints dentro de Scaffold para obtener la altura disponible y ajustar la altura de Scaffold en consecuencia:

BoxWithConstraints {
    Scaffold(
        modifier = Modifier
            .heightIn(max = maxHeight)
            .fillMaxWidth(),
        ...
    )
}

De esta manera, la altura del Scaffold se ajusta en función de la altura disponible proporcionada por maxHeight. Esto proporcionará un comportamiento similar a “wrap content” para Scaffold, donde solo ocupará el espacio necesario para el contenido.

Utilizar un composable personalizado que envuelva al Scaffold y calcule la altura disponible en función del contenido y la altura de la pantalla:

@Composable
fun AdjustableHeightDialog(content: @Composable () -> Unit) {
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
    val contentHeight = remember {
        IntOffset.Zero.toDp().run {
            val constraints = Constraints(width = maxWidth, height = Int.MAX_VALUE)
            layout(width, height, constraints) {
                content().measure(constraints).also { place(IntOffset.Zero) }
            }.height
        }
    }

    Scaffold(
        modifier = Modifier
            .heightIn(max = screenHeight)
            .heightIn(min = contentHeight)
            .fillMaxWidth(),
        ...
    )
}

En este composable, se calcula la altura de la pantalla y la altura del contenido, y se ajusta la altura de Scaffold en función de esos valores. Esto permitirá un comportamiento similar a “wrap content”, como en los diseños XML, donde el diálogo ajustará su altura en función del contenido y la altura de la pantalla.

Al implementar cualquiera de estos métodos, deberías poder recrear el comportamiento de “wrap content” para un diálogo mostrado en el tema Base.Theme.AppCompat.Light.Dialog en tablets utilizando Scaffold en Jetpack Compose.

Answer

davy.ai

July 16, 2023 at 4:54 am
Como experto en tecnologías de la información especializado en Android y Android Jetpack Compose, existen algunas formas de recrear el comportamiento de “wrap content” para un diálogo mostrado en el tema Base.Theme.AppCompat.Light.Dialog en tablets utilizando Scaffold en Jetpack Compose:
1. Utilizar el composable BoxWithConstraints dentro de Scaffold para obtener la altura disponible y ajustar la altura de Scaffold en consecuencia:
```
BoxWithConstraints {
    Scaffold(
        modifier = Modifier
            .heightIn(max = maxHeight)
            .fillMaxWidth(),
        ...
    )
}
```
De esta manera, la altura del Scaffold se ajusta en función de la altura disponible proporcionada por maxHeight. Esto proporcionará un comportamiento similar a “wrap content” para Scaffold, donde solo ocupará el espacio necesario para el contenido.
1. Utilizar un composable personalizado que envuelva al Scaffold y calcule la altura disponible en función del contenido y la altura de la pantalla:
```
@Composable
fun AdjustableHeightDialog(content: @Composable () -> Unit) {
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
    val contentHeight = remember {
        IntOffset.Zero.toDp().run {
            val constraints = Constraints(width = maxWidth, height = Int.MAX_VALUE)
            layout(width, height, constraints) {
                content().measure(constraints).also { place(IntOffset.Zero) }
            }.height
        }
    }

    Scaffold(
        modifier = Modifier
            .heightIn(max = screenHeight)
            .heightIn(min = contentHeight)
            .fillMaxWidth(),
        ...
    )
}
```
En este composable, se calcula la altura de la pantalla y la altura del contenido, y se ajusta la altura de Scaffold en función de esos valores. Esto permitirá un comportamiento similar a “wrap content”, como en los diseños XML, donde el diálogo ajustará su altura en función del contenido y la altura de la pantalla.

Al implementar cualquiera de estos métodos, deberías poder recrear el comportamiento de “wrap content” para un diálogo mostrado en el tema Base.Theme.AppCompat.Light.Dialog en tablets utilizando Scaffold en Jetpack Compose.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Cómo evitar que un contenedor de Jetpack Compose ocupe toda la altura de la pantalla cuando se muestra en un diálogo.

Answer

davy.ai