Cómo crear una hoja inferior

Una hoja inferior muestra contenido secundario, anclado en la parte inferior de la pantalla.

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Cómo implementar una hoja inferior

Para implementar una hoja inferior, usa el elemento componible ModalBottomSheet:

Expandir y contraer la hoja

Para expandir y contraer la hoja, usa SheetState:

Puntos clave

  • Usa el espacio content, que usa un ColumnScope, para diseñar elementos de contenido que admiten composición en una columna.
  • Usa rememberSheetState para crear una instancia de SheetState que pases a ModalBottomSheet con el parámetro sheetState.

  • SheetState proporciona acceso a las funciones show y hide, así como a propiedades relacionadas con el estado actual de la hoja. Estas funciones requieren un CoroutineScope (por ejemplo, rememberCoroutineScope) y se las puede llamar en respuesta a eventos de IU.

  • Asegúrate de quitar el ModalBottomSheet de la composición cuando ocultes la hoja inferior.

Resultados

Figura 1: Una hoja inferior estándar (izquierda) y una hoja inferior modal (derecha).

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
Colección de guías rápidas

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.
Ir a las Preguntas frecuentes Enviar comentarios