Liste/détails est un modèle d'interface utilisateur composé d'une mise en page à deux volets dans laquelle un volet présente une liste d'éléments et un autre volet affiche les détails des éléments sélectionnés dans la liste.
Ce modèle est particulièrement utile pour les applications qui fournissent des informations sur les éléments de grandes collections, comme un client de messagerie qui contient une liste d'e-mails et le contenu détaillé de chaque e-mail. Vous pouvez également utiliser la fonctionnalité Liste/Détail pour les chemins moins critiques, comme diviser l'application préférences dans une liste de catégories, avec les préférences pour chaque catégorie dans le volet Détails.
Implémenter un modèle d'UI avec ListDetailPaneScaffold
ListDetailPaneScaffold
est un composable qui simplifie l'implémentation de
le schéma "Liste et vue détaillée" dans votre application. Une structure liste/détails peut comporter jusqu'à
trois volets: un volet de liste, un volet de détails et un volet supplémentaire facultatif. La
échafaudage gère les calculs d'espace à l'écran. Lorsque la taille de l'écran est suffisante
disponible, le volet Détails s'affiche à côté du volet de liste. Sur petit écran
tailles d'écran, l'échafaudage passe automatiquement à l'affichage de la liste
volet de détails en plein écran.
![Volet détaillé affiché à côté de la page de liste.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=0000&hl=fr)
![Une fois qu'un élément est sélectionné, le volet Détails occupe la totalité de l'écran.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=0000&hl=fr)
Déclarer des dépendances
ListDetailPaneScaffold
fait partie de la mise en page adaptative Material 3
bibliothèque.
Ajoutez les trois dépendances connexes suivantes au fichier build.gradle
de votre
application ou module:
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'
- adaptatif : éléments de base de bas niveau tels que
HingeInfo
etPosture
- adaptive-layout : mises en page adaptatives telles que
ListDetailPaneScaffold
etSupportingPaneScaffold
- adaptive-navigation : composables permettant de naviguer dans et entre les volets
Utilisation de base
Implémentez ListDetailPaneScaffold
comme suit:
Utilisez une classe représentant le contenu à sélectionner. Ce cours doit être
Parcelable
pour permettre l'enregistrement puis restaure l'élément de liste sélectionné. Utilisez la commande kotlin-parcelize plug-in afin de générer le code pour vous.@Parcelize class MyItem(val id: Int) : Parcelable
Créer un
ThreePaneScaffoldNavigator
avecrememberListDetailPaneScaffoldNavigator
et ajoutez un élémentBackHandler
. Ce permet de naviguer entre les volets de liste, de détail et supplémentaire. Par déclarant un type générique, le navigateur suit également l'état échafaudage (c'est-à-dire l'élémentMyItem
affiché). Puisque ce type est parcelable, l'état peut être enregistré et restauré par le navigateur automatiquement les modifications de configuration. LaBackHandler
permet de revenir en arrière à l'aide du geste Retour du système ou . Comportement attendu du bouton "Retour" lors d'uneListDetailPaneScaffold
dépend de la taille de la fenêtre et de l'échafaudage actuel . SiListDetailPaneScaffold
permet de revenir en arrière avec l'état actuel, alorscanNavigateBack()
esttrue
, ce qui permetBackHandler
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Transmettez le
scaffoldState
denavigator
à laListDetailPaneScaffold
.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Fournissez l'implémentation de votre volet de liste à
ListDetailPaneScaffold
. UtilisezAnimatedPane
pour appliquer les animations de volet par défaut lors de la navigation. Ensuite, utilisezThreePaneScaffoldNavigator
pour accéder au volet de détails,ListDetailPaneScaffoldRole.Detail
, puis afficher l'élément transmis.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) } ) } }, // ... )
Incluez l'implémentation de votre volet de détails dans
ListDetailPaneScaffold
. Une fois la navigation terminée,currentDestination
contient le volet dans lequel auquel l'application accède, y compris le contenu affiché dans le volet. La La propriétécontent
est du même type que celui spécifié dans l'appel remember d'origine (MyItem
dans cet exemple). Vous pouvez donc accéder à la propriété pour toutes les données que vous devez afficher.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
Une fois les étapes ci-dessus mises en œuvre, votre code doit ressembler à ce qui suit:
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) } } }, )