Kanoniczny układ panelu pomocniczego skupia uwagę użytkowników na głównej części aplikacji treści, a jednocześnie wyświetlają odpowiednie materiały dodatkowe. Na przykład główny plik panel treści może zawierać informacje o niedawnym filmie, natomiast wyświetla listę innych filmów o podobnej tematyce reżysera lub aktorów. Więcej informacji o panelu pomocniczym kanonicznym, patrz Wytyczne dotyczące panelu uzupełniającego Material 3
Wdróż panel pomocniczy
Element SupportingPaneScaffold
składa się z maksymalnie 3
panele główne: panel główny, panel pomocniczy i opcjonalny panel dodatkowy. Rusztowanie
obsługuje wszystkie obliczenia dotyczące przypisywania przestrzeni okien do 3 paneli. Wł.
na dużych ekranach, rusztowanie wyświetla panel główny z panelem pomocniczym
z boku. Na małych ekranach rusztowanie wyświetla główny lub pomocniczy
panelu pełnoekranowego.
![Główna treść zajmująca większość ekranu, a obok niej znajduje się dodatkowa treść.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=0000&hl=pl)
Dodaj zależności
SupportingPaneScaffold
należy do
Biblioteka 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
SupportingPaneScaffold
- adaptive-Navigation – elementy kompozycyjne do nawigacji w obrębie między panelami
Tworzenie nawigatora i rusztowania
W małych oknach wyświetlany jest tylko jeden panel naraz, więc używaj
ThreePaneScaffoldNavigator
, aby przejść do i z
panele informacyjne. Utwórz instancję nawigatora z
rememberSupportingPaneScaffoldNavigator
Aby obsługiwać gesty cofania, użyj narzędzia BackHandler
, które sprawdza
canNavigateBack()
i połączenia
navigateBack()
:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Rusztowanie wymaga PaneScaffoldDirective
, który
określa, jak podzielić ekran i jakie odstępy mają być używane.
ThreePaneScaffoldValue
, która zawiera bieżące
stanu paneli (np. czy są rozwinięte czy ukryte). W przypadku opcji domyślnej
zachowania, użyj przycisków scaffoldDirective
i nawigacji
scaffoldValue
odpowiednio:
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
Panel główny i panel pomocniczy to elementy kompozycyjne zawierające Twoje treści. Używaj
AnimatedPane
, aby zastosować domyślne animacje panelu w czasie
nawigacji. Użyj wartości scaffold, aby sprawdzić, czy panel pomocniczy jest
ukryta; Jeśli tak, wyświetl przycisk wywołujący
navigateTo(ThreePaneScaffoldRole.Secondary)
, aby wyświetlić
panel pomocniczy.
Oto pełna implementacja rusztowania:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Main pane content if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) { Button( modifier = Modifier.wrapContentSize(), onClick = { navigator.navigateTo(SupportingPaneScaffoldRole.Supporting) } ) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } }, supportingPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Supporting pane content Text("Supporting pane") } }, )
Wyodrębnianie elementów kompozycyjnych z panelu
Wyodrębnianie poszczególnych paneli panelu SupportingPaneScaffold
do własnych
aby można było używać ich wielokrotnie i testować. Używaj
ThreePaneScaffoldScope
, aby uzyskać dostęp do usługi AnimatedPane
, jeśli
chcesz wybrać domyślne animacje:
@Composable fun ThreePaneScaffoldScope.MainPane( shouldShowSupportingPaneButton: Boolean, onNavigateToSupportingPane: () -> Unit, modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Main pane content if (shouldShowSupportingPaneButton) { Button(onClick = onNavigateToSupportingPane) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } } @Composable fun ThreePaneScaffoldScope.SupportingPane( modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Supporting pane content Text("This is the supporting pane") } }
Wyodrębnianie paneli do elementów kompozycyjnych upraszcza korzystanie z
SupportingPaneScaffold
(porównaj poniższe wyniki z pełną implementacją
rusztowania z poprzedniej sekcji):
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { MainPane( shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden, onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) } ) }, supportingPane = { SupportingPane() }, )