Liste ayrıntısı düzeni oluşturma

Liste-ayrıntı, bir bölmenin öğelerin listesini, diğer bölmenin ise listeden seçilen öğelerin ayrıntılarını gösterdiği çift bölmeli bir düzenden oluşan bir kullanıcı arayüzü kalıbıdır.

Bu model özellikle büyük koleksiyonlardaki öğeler hakkında ayrıntılı bilgi sağlayan uygulamalar için kullanışlıdır. Örneğin, e-posta listesini ve her e-posta mesajının ayrıntılı içeriğini içeren bir e-posta istemcisi. Liste-ayrıntı, uygulama tercihlerini ayrıntı bölmesinde her kategorinin tercihlerinin yer aldığı bir kategori listesine bölme gibi daha az kritik yollar için de kullanılabilir.

ListDetailPaneScaffold ile kullanıcı arayüzü kalıbını uygulama

ListDetailPaneScaffold, uygulamanızda liste-ayrıntı kalıbının uygulanmasını basitleştiren bir bileşendir. Liste-ayrıntı iskeleti en fazla üç bölmeden oluşabilir: liste bölmesi, ayrıntı bölmesi ve isteğe bağlı ek bölme. İskele, ekran alanı hesaplamalarını yönetir. Yeterli ekran boyutu olduğunda ayrıntı bölmesi, liste bölmesinin yanında gösterilir. Küçük ekran boyutlarında ise iskelet, listeyi veya ayrıntı bölmesini otomatik olarak tam ekranda göstermeye geçer.

Şekil 1. Yeterli ekran boyutu olduğunda ayrıntılar bölmesi, liste bölmesinin yanında gösterilir.

Şekil 2. Ekran boyutu sınırlı olduğunda, ayrıntı bölmesi (bir öğe seçildiğinden) tüm alanı kaplar.

Bağımlılıkları bildirme

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

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: HingeInfo ve Posture gibi düşük düzeyli yapı taşları
• adaptive-layout: ListDetailPaneScaffold ve SupportingPaneScaffold gibi uyarlanabilir düzenler
• adaptive-navigation: Bölmelerde ve bölmeler arasında gezinmek için Composables

Temel kullanım

ListDetailPaneScaffold'ü aşağıdaki gibi uygulayın:

1. Seçilecek içeriği temsil eden bir sınıf kullanın. Seçilen liste öğesinin kaydedilmesini ve geri yüklenmesini desteklemek için bu sınıf Parcelable olmalıdır. Kodu sizin için oluşturmak üzere kotlin-parcelize eklentisini kullanın.

   @Parcelize
   class MyItem(val id: Int) : Parcelable
   SampleListDetailPaneScaffold.kt

2. rememberListDetailPaneScaffoldNavigator ile bir ThreePaneScaffoldNavigator oluşturun ve BackHandler ekleyin. Bu gezinme menüsü, liste, ayrıntılar ve ek paneller arasında geçiş yapmak için kullanılır. Gezgin, genel bir tür bildirerek iskelenin durumunu (yani hangi MyItem'nin görüntülendiğini) de izler. Bu tür paketlenebilir olduğundan, yapılandırma değişikliklerini otomatik olarak işlemek için gezgin tarafından durum kaydedilip geri yüklenebilir. BackHandler, sistem geri hareketini veya düğmesini kullanarak geri gezinme desteği sağlar. ListDetailPaneScaffold için geri düğmesinin beklenen davranışı, pencere boyutuna ve mevcut iskele değerine bağlıdır. ListDetailPaneScaffold, mevcut durumla geri dönmeyi destekliyorsa canNavigateBack() true olur ve BackHandler etkinleştirilir.

   val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()
   
   BackHandler(navigator.canNavigateBack()) {
       navigator.navigateBack()
   }
   SampleListDetailPaneScaffold.kt

3. scaffoldState öğesini navigator'den ListDetailPaneScaffold bileşenine iletin.

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       // ...
   )
   SampleListDetailPaneScaffold.kt

4. Liste bölmesi uygulamanızı ListDetailPaneScaffold'e gönderin. Gezinme sırasında varsayılan bölme animasyonlarını uygulamak için AnimatedPane simgesini kullanın. Ardından, ayrıntı bölmesine gitmek için ThreePaneScaffoldNavigator simgesini, ListDetailPaneScaffoldRole.Detail ardından iletilen öğeyi görüntülemek için ListDetailPaneScaffoldRole.Detail simgesini kullanın.

   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)
                   }
               )
           }
       },
       // ...
   )
   SampleListDetailPaneScaffold.kt

5. Ayrıntı bölmesi uygulamanızı ListDetailPaneScaffold'e ekleyin. Gezinme tamamlandığında currentDestination, uygulamanızın gittiği bölmeyi (bölmede gösterilen içerik dahil) içerir. content mülkü, orijinal hatırlama çağrısında belirtilen türle (bu örnekte MyItem) aynıdır. Bu nedenle, görüntülemeniz gereken tüm veriler için mülke de erişebilirsiniz.

   ListDetailPaneScaffold(
       directive = navigator.scaffoldDirective,
       value = navigator.scaffoldValue,
       listPane =
       // ...
       detailPane = {
           AnimatedPane {
               navigator.currentDestination?.content?.let {
                   MyDetails(it)
               }
           }
       },
   )
   SampleListDetailPaneScaffold.kt

Yukarıdaki adımları uyguladıktan sonra kodunuz aşağıdaki gibi görünmelidir:

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)
            }
        }
    },
)
SampleListDetailPaneScaffold.kt