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 ise iskele, ana veya destekleyici paneli tam ekranda gösterir.

Ekranın büyük bölümünü kaplayan ana içerik, yanında destekleyici içerikler yer alır.
Şekil 1. Destek bölme düzeni.

Bağımlılıkları ekleme

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

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

Kotlin

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

Groovy

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

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 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. Destekleyici bölmenin gizli olup olmadığını kontrol etmek için iskelet değerini kullanın. Gizliyse destekleyici bölmeyi görüntülemek için navigateTo(ThreePaneScaffoldRole.Secondary) değerini çağıran bir düğme görüntüleyin.

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

Önceki
Liste ayrıntısı düzeni oluşturma
Sonraki
Hizalama çizgileri