Destekleyici bölme düzeni oluşturma

Destekleyici bölmenin kanonikal düzeni, kullanıcıların dikkatini uygulamanızın ana içeriğine odaklarken alakalı destekleyici içerikler de gösterir. Örneğin, ana içerik bölmesinde son çıkan bir filmle ilgili bilgiler gösterilirken yardımcı bölmede benzer temaya, yönetmene veya başrol oyuncularına sahip diğer filmlerin listesi gösterilebilir. Destek bölmesi standart düzeni hakkında daha fazla bilgi için Materyal 3 destek bölmesi yönergelerine bakın.

Destekleyici bir bölme uygulama

SupportingPaneScaffold üç bölmeden oluşur: ana bölme, destekleyici bölme ve isteğe bağlı ek bölme. İskele, üç bölmeye pencere alanı ayırma ile ilgili tüm hesaplamaları yapar. Büyük ekranlarda, iskelet ana bölmeyi, destekleyici bölmenin yan tarafında olacak şekilde görüntüler. Küçük ekranlarda ise iskele, ana veya destekleyici paneli tam ekranda gösterir.

Bağımlılık ekleme

SupportingPaneScaffold, Material 3 uyarlanabilir düzen kitaplığının bir parçasıdır.

Uygulamanızın veya modülünüzün build.gradle dosyasına aşağıdaki üç ilgili bağımlılığı ekleyin:

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• Uyarlanabilir: HingeInfo ve Posture gibi düşük düzey yapı taşları
• adaptive-layout: SupportingPaneScaffold gibi uyarlanabilir düzenler
• adaptive-navigation: Bölmeler arasında ve bölmelerde gezinmek için Composables

Kılavuz ve iskele oluşturma

Küçük pencerelerde aynı anda yalnızca bir bölme gösterilir. Bölmelere gitmek ve bölmeler arasında geçiş yapmak için ThreePaneScaffoldNavigator simgesini kullanın. rememberSupportingPaneScaffoldNavigator ile gezgin örneği oluşturun. Geri hareketlerini işlemek için canNavigateBack() değerini kontrol edip navigateBack() işlevini çağıran bir BackHandler kullanın:

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
SampleSupportingPaneScaffold.kt

İskelet için ekranın nasıl bölüneceğini ve ne kadar boşluk kullanılacağını kontrol eden bir PaneScaffoldDirective ve bölmelerin mevcut durumunu (ör. genişletilip genişletilmediği veya gizlenip gizlenmediği) sağlayan bir ThreePaneScaffoldValue gerekir. Varsayılan davranış için sırasıyla gezginin scaffoldDirective ve scaffoldValue öğelerini kullanın:

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

Ana bölme ve destek bölmesi, içeriğinizi barındıran composable'lardır. Gezinme sırasında varsayılan bölme animasyonlarını uygulamak için AnimatedPane simgesini kullanın. Destek bölmesinin gizli olup olmadığını kontrol etmek için scaffold değerini kullanın. Bu durumda, destek bölmesini görüntülemek için navigateTo(ThreePaneScaffoldRole.Secondary) çağrısı yapan bir düğme görüntüleyin.

İskeletin tam bir uygulaması aşağıda verilmiştir:

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

Bölmede birleştirilebilir öğeleri ayıklama

Yeniden kullanılabilir ve test edilebilir hale getirmek için SupportingPaneScaffold'ün ayrı panellerini kendi bileşenlerine ayırın. Varsayılan animasyonları istiyorsanız AnimatedPane öğesine erişmek için ThreePaneScaffoldScope öğesini kullanın:

@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

Panelleri birleştirilebilir öğelere ayrıştırmak SupportingPaneScaffold'ün kullanımını basitleştirir (aşağıdakileri önceki bölümdeki iskeletin tam uygulamasıyla karşılaştırın):

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