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:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
Modern
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- Uyarlanabilir:
HingeInfo
vePosture
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() }
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 = { /*...*/ }, )
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") } }, )
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") } }
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() }, )