La lista-detalles es un patrón de IU que consiste en un diseño de dos paneles, en el que un panel presenta una lista de elementos y otro muestra los detalles de los elementos seleccionados de la lista.
El patrón es particularmente útil para las aplicaciones que proporcionan información detallada sobre los elementos de grandes colecciones, por ejemplo, un cliente de correo electrónico que tiene una lista de correos electrónicos y el contenido detallado de cada mensaje. La lista de detalles también se puede usar para rutas menos importantes, como dividir las preferencias de la app en una lista de categorías con las preferencias de cada categoría en el panel de detalles.
Implementa el patrón de IU con ListDetailPaneScaffold
ListDetailPaneScaffold
es un elemento componible que simplifica la implementación del patrón de lista-detalles en tu app. Un andamiaje de lista-detalles puede constar de hasta tres paneles: un panel de lista, un panel de detalles y un panel adicional opcional. El andamiaje controla los cálculos del espacio de la pantalla. Cuando hay suficiente tamaño de pantalla disponible, el panel de detalles se muestra junto con el panel de lista. En tamaños de pantalla pequeños, el andamiaje cambia automáticamente para mostrar la lista o el panel de detalles en pantalla completa.
Cómo declarar dependencias
ListDetailPaneScaffold
forma parte de la biblioteca de diseño adaptable de Material 3.
Agrega las siguientes tres dependencias relacionadas al archivo build.gradle
de tu app o módulo:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Groovy
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- adaptativos: Componentes básicos de bajo nivel, como
HingeInfo
yPosture
- adaptive-layout: Diseños adaptables, como
ListDetailPaneScaffold
ySupportingPaneScaffold
- adaptive-navigation: Elementos componibles para navegar dentro de paneles y entre ellos
Uso básico
Implementa ListDetailPaneScaffold
de la siguiente manera:
Usa una clase que represente el contenido que se seleccionará. Esta clase debe ser
Parcelable
para admitir el guardado y el restablecimiento del elemento de lista seleccionado. Usa el complemento kotlin-parcelize para que genere el código por ti.@Parcelize class MyItem(val id: Int) : Parcelable
Crea un
ThreePaneScaffoldNavigator
conrememberListDetailPaneScaffoldNavigator
y agrega unBackHandler
. Este navegador se usa para moverse entre la lista, los paneles de detalles y los adicionales. Cuando se declara un tipo genérico, el navegador también realiza un seguimiento del estado del andamiaje (es decir, quéMyItem
se muestra). Como este tipo es particionable, el navegador puede guardar y restablecer el estado para controlar automáticamente los cambios de configuración.BackHandler
admite la navegación hacia atrás con el gesto o el botón Atrás del sistema. El comportamiento esperado del botón Atrás para unListDetailPaneScaffold
depende del tamaño de la ventana y del valor del andamiaje actual. Si elListDetailPaneScaffold
puede admitir volver con el estado actual,canNavigateBack()
estrue
, lo que habilitaBackHandler
.val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Pasa el
scaffoldState
denavigator
al elementoListDetailPaneScaffold
componible.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Proporciona la implementación del panel de lista a
ListDetailPaneScaffold
. UsaAnimatedPane
para aplicar las animaciones de panel predeterminadas durante la navegación. Luego, usaThreePaneScaffoldNavigator
para navegar al panel de detalles,ListDetailPaneScaffoldRole.Detail
, y mostrar el elemento pasado.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) } ) } }, // ... )
Incluye la implementación del panel de detalles en
ListDetailPaneScaffold
. Cuando se completa la navegación,currentDestination
contiene el panel al que navegó tu app, incluido el contenido que se muestra en él. La propiedadcontent
es del mismo tipo que se especifica en la llamada de remember original (MyItem
en este ejemplo), por lo que también puedes acceder a la propiedad para cualquier dato que necesites mostrar.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
Después de implementar los pasos anteriores, tu código debería verse de la siguiente manera:
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }, ) } }, detailPane = { AnimatedPane { // Show the detail pane content if selected item is available navigator.currentDestination?.content?.let { MyDetails(it) } } }, )