Utwórz układ panelu pomocniczego

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ść.
Rysunek 1. Obsługa układu panelu.

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 i Posture
  • 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()
}
SampleSupportingPaneScaffold.kt

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 = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

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

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")
    }
}
SampleSupportingPaneScaffold.kt

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

Wstecz
Tworzenie układu ze szczegółami listy
Dalej
Linie wyrównania