Destekleyici bölme düzeni oluşturma

Destek bölmesinin standart düzeni, kullanıcının dikkatini uygulamanızın ana uygun destekleyici içerikler de gösterebilirsiniz. Örneğin, içerik bölmesinde yakın zamanda izlenen bir filme ilişkin bilgiler gösterilirken, bölmesi, benzer veya aynı temaya sahip diğer filmlerin listesini görüntüler ya da başrol oyuncuları gibi. Destek bölmesi hakkında daha fazla bilgi standart düzende, bkz. Materyal 3 destekleyici bölme yönergeleri.

Destekleyici bölme uygulayın

SupportingPaneScaffold en fazla üç birimden oluşur ana bölme, destekleyici bölme ve isteğe bağlı ekstra bölme. Yapı üç bölmeye pencere alanı ayırmaya ilişkin tüm hesaplamaları işler. Şu tarihte: büyük ekranlarda, iskelet ana bölmeyi, destekleyici bölmesi açık bir şekilde görebilirsiniz. Küçük ekranlarda, iskelette ana veya destekleyici tam ekran yapın.

Şekil 1. Destek bölme düzeni.

Bağımlılıkları ekleme

SupportingPaneScaffold şunun parçasıdır: Materyal 3 uyarlanabilir düzen kitaplığı.

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

Kotlin

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

Eski

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

• uyarlanabilir: Örneğin, HingeInfo ve Posture
• udaptive-layout: Uyarlanabilir düzenler. SupportingPaneScaffold
• uyarlanabilir-gezinme: İçinde gezinme ve bölmeler arasında

ziyaret edin.

Not: Material3 adaptive, adaptive-layout ve adaptive-navigation kitaplıklar beta sürümündedir.

Kılavuz ve iskele oluşturma

Küçük pencerelerde aynı anda yalnızca bir bölme görüntülenir. Bu nedenle, İki yol arasında geçiş yapmak için ThreePaneScaffoldNavigator bölmeler. Kılavuzun rememberSupportingPaneScaffoldNavigator. Geri gitme hareketlerini işlemek için aşağıdakileri kontrol eden bir BackHandler kullanın: canNavigateBack() ve aramalar navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

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

Yapı, bir PaneScaffoldDirective gerektirir. ekranın nasıl bölüneceğini ve ne kadar boşluk kullanılacağını kontrol eder. ThreePaneScaffoldValue, güncel bilgileri sağlar durumu (genişletilmiş veya gizli olup olmadıkları gibi). Varsayılan için davranışına bağlı olarak, gezinme bölümünün scaffoldDirective ve Sırasıyla scaffoldValue:

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. Tekliflerinizi otomatikleştirmek ve optimize etmek için sırasında varsayılan bölme animasyonlarını uygulamak için AnimatedPane yardımcı olabilir. Destek bölmesinin mevcut olup olmadığını kontrol etmek için gizli; varsa, arayan bir düğme Görüntülemek için navigateTo(ThreePaneScaffoldRole.Secondary) bölmesini de kullanabilirsiniz.

Yapı yapısının eksiksiz bir şekilde uygulanması 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ı çıkar

SupportingPaneScaffold içindeki ayrı ayrı bölmeleri kendi bölmelerine çıkarın composable'ları kullanıma sunduk. Tekliflerinizi otomatikleştirmek ve optimize etmek için AnimatedPane erişimi için ThreePaneScaffoldScope varsayılan animasyonları kullanmak istiyorsunuz:

@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ölmeleri composable'lara çıkarmak, SupportingPaneScaffold (aşağıdakileri tam uygulama ile karşılaştırın bakı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