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 w panelu głównym treści mogą się wyświetlać informacje o ostatnio dodanych filmach, a w panelu pomocniczym lista innych filmów o podobnym temacie lub z tym samym reżyserem lub aktorami. Więcej informacji o panelu pomocniczym kanonicznym, patrz Wytyczne dotyczące panelu uzupełniającego Material 3

Wdróż panel pomocniczy

SupportingPaneScaffold składa się maksymalnie z 3 paneli: głównego, pomocniczego i opcjonalnego dodatkowego. 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 dodatkowy element 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.

Dodawanie zależności

SupportingPaneScaffold jest częścią biblioteki komponentów z układem dostosowującym się do urządzenia 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
  • adaptive-layout – układy adaptacyjne, takie jak: SupportingPaneScaffold
  • adaptive-navigation – komponenty do nawigacji w obrębie paneli i między nimi

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łużyć gesty wstecz, użyj BackHandler, który sprawdza canNavigateBack() i wywołuje 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 szablonu, aby sprawdzić, czy panel pomocniczy jest ukryty. Jeśli tak, wyświetl przycisk, który wywołuje funkcję 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ć. Aby uzyskać dostęp do AnimatedPane, gdy chcesz używać animacji domyślnych, kliknij ThreePaneScaffoldScope:

@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