Destekleyici bölme düzeni oluşturma

Destek bölmesi standart düzeni, kullanıcının dikkatini uygulamanızın ana içeriğine odaklarken alakalı destekleyici içeriği de gösterir. Örneğin, ana içerik bölmesinde en son yayınlanan bir filmle ilgili bilgiler gösterilirken, destek bölmesinde benzer bir temaya sahip veya aynı yönetmen ya da başrol oyuncusu olan diğer filmlerin listesi görüntülenebilir. Destek bölmesi standart düzeni hakkında daha fazla bilgi için Materyal 3 destek bölmesi yönergelerine bakın.

Destekleyici bölme uygulayın

SupportingPaneScaffold en fazla üç bölmeden oluşur: bir ana bölme, bir destek bölmesi ve bir isteğe bağlı ekstra bölme. İskele, üç bölmeye pencere alanı ayırmak için tüm hesaplamaları işliyor. Büyük ekranlarda iskele, yan tarafında destek bölmesi olacak şekilde ana bölmeyi görüntüler. İskele, küçük ekranlarda ana ya da destek bölmesinin tam ekranını gösterir.

Bağımlılık ekleme

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

Aşağıdaki üç bağımlı bağımlılığı uygulamanızın veya modülünüzün build.gradle dosyasına 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 seviye yapı taşları
• adaptive-layout: SupportingPaneScaffold gibi uyarlanabilir düzenler
• uyarlanabilir-gezinme — Bölmeler içinde ve Bölmeler arasında gezinmek için composables

Bir kılavuz ve yapı oluştur

Küçük pencerelerde aynı anda yalnızca bir bölme görüntülenir. Bu nedenle, bölmeler arasında geçiş yapmak için ThreePaneScaffoldNavigator simgesini kullanın. rememberSupportingPaneScaffoldNavigator ile gezginin bir örneğini oluşturun. Geri hareketlerini işlemek için canNavigateBack() öğesini işaretleyen ve navigateBack() çağrısı yapan bir BackHandler kullanın:

val navigator = rememberSupportingPaneScaffoldNavigator()

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

Yapı, ekranın nasıl bölüneceğini ve kullanılacak boşluk miktarını kontrol eden bir PaneScaffoldDirective ve bölmelerin mevcut durumunu (genişletilip gizlenmedikleri gibi) gösteren bir ThreePaneScaffoldValue gerektirir. Varsayılan davranış için gezginin sırasıyla scaffoldDirective ve scaffoldValue değerlerini 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 aracını kullanın. Destek bölmesinin gizlenmiş olup olmadığını kontrol etmek için iskele değerini kullanın. Böyle bir durumda, destek bölmesini görüntülemek için navigateTo(ThreePaneScaffoldRole.Secondary) çağrısı yapan bir düğme görüntüleyin.

İskelenin eksiksiz uygulaması aşağıdaki gibidir:

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ölme composable'larını ayıkla

SupportingPaneScaffold içindeki ayrı bölümleri yeniden kullanılabilir ve test edilebilir hale getirmek için ilgili composable'lara çıkarın. Varsayılan animasyonları istiyorsanız AnimatedPane uygulamasına erişmek için ThreePaneScaffoldScope aracını 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

Bölmelerin composable'lara çıkarılması, SupportingPaneScaffold kullanımını basitleştirir (aşağıdaki bölümü bir önceki bölümde verilen yapı iskelesinin tümüyle 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