Cómo compilar un diseño de detalles de lista

Es un patrón de IU que consiste en un diseño de panel doble en el que un panel presenta una lista de elementos y otro panel muestra los detalles de los elementos seleccionados de la lista.

El patrón es particularmente útil para aplicaciones que proporcionan información detallada sobre elementos de colecciones grandes, 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 el andamiaje se encarga de los cálculos del espacio de pantalla. Cuando hay suficiente tamaño de pantalla disponible, el panel de detalles se muestra junto con el panel de lista. En pantallas pequeñas , el andamiaje cambia automáticamente a mostrar la lista o pantalla completa del panel de detalles.

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:

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• adaptable: componentes básicos de bajo nivel, como HingeInfo y Posture
• adaptive-layout: diseños adaptables, como ListDetailPaneScaffold y SupportingPaneScaffold
• adaptive-navigation: Elementos que admiten composición para navegar dentro y entre paneles

Uso básico

Implementa ListDetailPaneScaffold de la siguiente manera:

1. Usa una clase que represente el contenido que se seleccionará. Esta clase debería ser Parcelable para admitir el guardado y restableciendo el elemento de lista seleccionado. Usa el complemento kotlin-parcelize para que genere el código por ti.

   @Parcelize
   class MyItem(val id: Int) : Parcelable
   SampleListDetailPaneScaffold.kt

2. Crea un ThreePaneScaffoldNavigator con rememberListDetailPaneScaffoldNavigator y agrega un BackHandler. Este navegador se usa para moverse entre los paneles de lista, detalles y adicionales. De declarando un tipo genérico, el navegador también rastrea el estado de la andamiaje (es decir, el objeto MyItem que se muestra). Como este tipo es parcelable, el navegador puede guardar y restablecer el estado para 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 en una ListDetailPaneScaffold depende del tamaño de la ventana y del andamiaje actual valor. Si ListDetailPaneScaffold admite volver atrás con el el estado actual, canNavigateBack() es true, lo que habilita la BackHandler

   val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
   
   BackHandler(navigator.canNavigateBack()) {
       navigator.navigateBack()
   }
   SampleListDetailPaneScaffold.kt

3. Pasa el scaffoldState de navigator al elemento ListDetailPaneScaffold componible.

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       // ...
   )
   SampleListDetailPaneScaffold.kt

4. Proporciona la implementación del panel de lista a ListDetailPaneScaffold. Usa AnimatedPane para aplicar las animaciones de panel predeterminadas durante la navegación. Luego, utiliza ThreePaneScaffoldNavigator para navegar al panel de detalles ListDetailPaneScaffoldRole.Detail y muestra 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)
                   }
               )
           }
       },
       // ...
   )
   SampleListDetailPaneScaffold.kt

5. Incluye la implementación del panel de detalles en ListDetailPaneScaffold. Cuando se completa la navegación, currentDestination contiene el panel al que navegó la app, incluido el contenido que se muestra en el panel. El La propiedad content es del mismo tipo que se especificó en la llamada de recuerdo original (MyItem en este ejemplo), por lo que también puedes acceder a la propiedad para cualquier dato que debes mostrar.

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       listPane =
       // ...
       detailPane = {
           AnimatedPane {
               navigator.currentDestination?.content?.let {
                   MyDetails(it)
               }
           }
       },
   )
   SampleListDetailPaneScaffold.kt

Después de implementar los pasos anteriores, tu código debería ser similar al siguiente:

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)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt