Implemente la siguiente hoja en Jetpack Compose.

Las hojas inferiores modales ofrecen una gama de opciones mientras bloquean la interacción con el resto de la pantalla. Son una alternativa a los menús en línea y los diálogos simples, y brindan espacio adicional para el contenido, la iconografía y las acciones.

Si creó su proyecto usando la plantilla Actividad de redacción vacía, puede omitir esta parte, pero no olvide verificar las versiones y actualizar si es necesario. Para crear una aplicación de redacción Si configura ConfirmStateChange = {false}, el usuario no puede cerrar la hoja inferior arrastrando o tocando hacia afuera.

skipHalfExpandedSi el estado medio expandido debe omitirse cuando la hoja es lo suficientemente grande. Si es verdadero, la hoja siempre se expande al estado expandido y cambia al estado oculto cuando la hoja está oculta, ya sea mediante programación o mediante la interacción del usuario.

Ahora vamos a crear nuestra interfaz de usuario para la hoja inferior. SheetShape es opcional y depende totalmente de usted. Me gusta agregarlo para darle a la sábana bajera un aspecto más redondeado.sheetContent es donde coloca su interfaz de usuario para la hoja inferior. En nuestro ejemplo, tenemos un botón que descarta la hoja inferior cuando se hace clic. Como podemos ver en el ejemplo, dado que modalSheetState.hide y modalSheetState.animateTo son funciones suspendidas, usamos coroutineScope para cambiar el estado de la hoja inferior. Finalmente, en nuestro Scaffold, tenemos Botón que expande la hoja inferior cuando se hace clic. ¡Eso es todo! Jetpack Compose hace que sea muy fácil crear y administrar hojas finales.

Despedido en la espalda

Con este simple código podemos cerrar la hoja inferior cuando presionamos el botón Atrás si está visible.

Cambiar entre pantalla completa y expandida

Primero, creamos la variable de estado isSheetFullScreen y establecemos las variables roundedCornerRadius y modificadoras que cambian cuando cambia el estado isSheetFullScreen. por ejemplo, si isSheetFullScreen es verdadero, el radio de la esquina será 0; de lo contrario, se cambiará a 12. Finalmente, cambiamos el estado cuando se hace clic en el botón. Si solo desea presentar su hoja inferior en modo de pantalla completa, puede borrar todos los estados y simplemente cambiar Modifier.fillMaxWidth a Modifier.fillMaxSize.

Código completo con extras

Eso es todo por este blog, espero que haya sido útil. 👋👋