Szczegóły listy to wzorzec interfejsu składający się z układu z 2 panelami, w którym jeden wyświetla listę elementów, a w kolejnym panelu wyświetlane są ich szczegóły. z listy.
Ten wzorzec jest szczególnie przydatny w aplikacjach, które zawierają szczegółowe informacje o elementach dużych kolekcji, np. klient poczty e-mail; z listą adresów e-mail i szczegółową treścią każdej z nich. Szczegółów listy można też używać w przypadku mniej krytycznych ścieżek, takich jak dzielenie aplikacji swoje preferencje na liście kategorii z preferencjami dla każdej z nich panelu szczegółów.
Zaimplementuj wzorzec interfejsu za pomocą interfejsu ListDetailPaneScaffold
ListDetailPaneScaffold
to element kompozycyjny, który upraszcza implementację
zgodnie ze wzorcem szczegółów listy w aplikacji. Ruszt związany ze szczegółami listy może się składać z
3 panele: lista, panel szczegółów oraz opcjonalny panel dodatkowy.
scaffold obsługuje obliczenia miejsca na ekranie. Przy odpowiednim rozmiarze ekranu
okienko szczegółów zostanie wyświetlone obok okienka listy. Na małym ekranie
rusztowanie automatycznie przełączy się na wyświetlanie listy lub
panelu szczegółów na pełnym ekranie.
![Okienko szczegółów widoczne obok strony z listą.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=9&hl=pl)
![Po wybraniu elementu panel szczegółów zajmie cały ekran.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=9&hl=pl)
Deklarowanie zależności
ListDetailPaneScaffold
jest częścią układu adaptacyjnego Material 3
Dodaj te 3 powiązane zależności do pliku build.gradle
swojego
aplikacja lub moduł:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Odlotowe
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- adaptacyjne – podstawowe elementy składowe, takie jak
HingeInfo
iPosture
- układ adaptacyjny – układy adaptacyjne, takie jak
ListDetailPaneScaffold
iSupportingPaneScaffold
- adaptive-Navigation – elementy kompozycyjne do nawigacji w obrębie między panelami
Podstawowe wykorzystanie
Wdróż ListDetailPaneScaffold
w ten sposób:
Użyj klasy, która reprezentuje treść do wyboru. Te zajęcia powinna mieć wartość
Parcelable
, aby obsługiwać zapisywanie i przywrócenie wybranej pozycji z listy. Wykorzystaj „parcelize” kotlin wtyczki, by wygenerować kod.@Parcelize class MyItem(val id: Int) : Parcelable
Utwórz
ThreePaneScaffoldNavigator
z:rememberListDetailPaneScaffoldNavigator
i dodajBackHandler
. Ten nawigator służy do poruszania się między listą, szczegółami i dodatkowymi panelami. Według zadeklaruje typ ogólny, nawigator śledzi również stan elementu scaffold (czyli wyświetlane jestMyItem
). Ten typ jest parcelable, stan może zostać zapisany i przywrócony przez nawigator automatycznie obsługują zmiany konfiguracji.BackHandler
umożliwia cofanie się za pomocą systemowego gestu cofania lub Przycisk Oczekiwane działanie przycisku Wstecz przezListDetailPaneScaffold
zależy od rozmiaru okna i aktualnego rusztowania . JeśliListDetailPaneScaffold
obsługuje powrót z parametrem w bieżącym stanie,canNavigateBack()
ma wartośćtrue
, co włączaBackHandler
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Przekaż
scaffoldState
z przystankunavigator
doListDetailPaneScaffold
kompozycyjne.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Udostępnij w narzędziu
ListDetailPaneScaffold
implementację panelu listy. UżywajAnimatedPane
aby zastosować domyślne animacje panelu podczas nawigacji. Następnie użyjThreePaneScaffoldNavigator
, aby przejść do panelu szczegółów.ListDetailPaneScaffoldRole.Detail
i wyświetlić przekazany element.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) } ) } }, // ... )
Dołącz wdrożenie panelu szczegółów w narzędziu
ListDetailPaneScaffold
. Po zakończeniu nawigacjicurrentDestination
będzie zawierać panel Do której udało się przejść aplikację, w tym do treści wyświetlanej w panelu. Właściwośćcontent
jest tego samego typu określonego w pierwotnym wywołaniu zapamiętania (w tym przykładzieMyItem
), dzięki czemu możesz też uzyskać dostęp do usługi w przypadku dowolnych danych które chcesz wyświetlić.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
Po zaimplementowaniu powyższych kroków Twój kod powinien wyglądać mniej więcej tak:
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) } } }, )