List-detail, bir bölmenin yer aldığı iki bölmeli düzenden oluşan bir kullanıcı arayüzü bir öğe listesi gösterir, başka bir bölmede ise seçilen öğelerin ayrıntıları görüntülenir kaldıracak.
Bu kalıp, özellikle de kullanıcılarınızıma büyük koleksiyonların öğeleri hakkında bilgiler (ör. e-posta istemcisi) e-posta listesi ve her e-posta iletisinin ayrıntılı içeriği bulunur. Liste ayrıntıları, uygulamayı ayırma gibi daha az kritik yollar için de kullanılabilir tercihlerini, her kategorinin tercihlerini içeren bir kategori listesine ayrıntı penceresinden seçebilirsiniz.
ListDetailPaneScaffold
ile kullanıcı arayüzü kalıbı uygulayın
ListDetailPaneScaffold
, API'nin uygulanmasını basitleştiren
özelliğini nasıl kullanacağınızı göstereceğiz. Liste ayrıntıları yapısı en fazla
üç bölme: liste bölmesi, ayrıntı bölmesi ve isteğe bağlı ekstra bölme. İlgili içeriği oluşturmak için kullanılan
ekran alanı hesaplamalarını destekler. Ekran boyutu yeterli olduğunda
liste bölmesinin yanında ayrıntı bölmesi görüntülenir. Küçük ekranda
yapılandırıldığında, iskele otomatik olarak liste veya hedef konumlardan birini
ayrıntı bölmesini tam ekran yapabilirsiniz.
![Liste sayfasının yanında gösterilen ayrıntı bölmesi.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-2.png?authuser=6&hl=tr)
![Bir öğe seçildikten sonra ayrıntı bölmesi tüm ekranı kaplar.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/list-detail-1.png?authuser=6&hl=tr)
Bağımlılıkları belirtme
ListDetailPaneScaffold
, Materyal 3 uyarlanabilir düzeninin bir parçasıdır
kitaplığı'nı seçin.
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
vePosture
- udaptive-layout: Aşağıdakiler gibi uyarlanabilir düzenler
ListDetailPaneScaffold
veSupportingPaneScaffold
- uyarlanabilir-gezinme: İçinde gezinme ve bölmeler arasında
Temel kullanım
ListDetailPaneScaffold
özelliğini aşağıdaki şekilde uygulayın:
Seçilecek içeriği temsil eden bir sınıf kullanın. Bu sınıf desteklemesi için
Parcelable
olmalıdır ve seçilen liste öğesini geri yükleme. kotlin-parcelize eklentisini kullanarak sizin için kod oluşturun.@Parcelize class MyItem(val id: Int) : Parcelable
Şununla bir
ThreePaneScaffoldNavigator
oluşturun:rememberListDetailPaneScaffoldNavigator
ve birBackHandler
ekleyin. Bu gezgin liste, ayrıntı ve ek bölmeler arasında geçiş yapmak için kullanılır. Ölçüt bir genel tür tanımladığında, gezgin aynı zamanda iskele (yaniMyItem
gösteriliyor). Bu tür sonraki adımlarda, eyalet kaydedilip geri yüklenebilir. otomatik olarak ele alınır. İlgili içeriği oluşturmak için kullanılanBackHandler
kullanıcının sistem geri hareketini kullanarak geri gitmeyi veya düğmesini tıklayın. Şunun için geri düğmesinin beklenen davranışı:ListDetailPaneScaffold
, pencere boyutuna ve mevcut yapıya bağlıdır değer.ListDetailPaneScaffold
,canNavigateBack()
true
olur ve bu durumdaBackHandler
.val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
scaffoldState
cihazınınavigator
platformundanListDetailPaneScaffold
composable.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Liste bölmesi uygulamanızı
ListDetailPaneScaffold
cihazına sağlayın. Tekliflerinizi otomatikleştirmek ve optimize etmek içinAnimatedPane
tuşuna basarak gezinme sırasında varsayılan bölme animasyonlarını uygulayabilirsiniz. Daha sonra Ayrıntı bölmesine gitmek içinThreePaneScaffoldNavigator
,ListDetailPaneScaffoldRole.Detail
ve iletilen öğeyi gösterir.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) } ) } }, // ... )
Ayrıntı bölmesi uygulamanızı
ListDetailPaneScaffold
öğesine ekleyin. Gezinme tamamlandığındacurrentDestination
, gezinme bölmesini Bölmede görüntülenen içerik de dahil olmak üzere gezinin. İlgili içeriği oluşturmak için kullanılancontent
özelliği, orijinal hatırlama çağrısında belirtilen türle aynı (bu örnekteMyItem
) olduğundan, tüm verilere ait mülklere birkaç küçük resim.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane { navigator.currentDestination?.content?.let { MyDetails(it) } } }, )
Yukarıdaki adımları uyguladıktan sonra kodunuz şuna benzer olmalıdır:
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane { MyList( onItemClick = { item -> // Navigate to the detail pane with the passed item navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item) }, ) } }, detailPane = { AnimatedPane { // Show the detail pane content if selected item is available navigator.currentDestination?.content?.let { MyDetails(it) } } }, )