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

List-detail, bir bölmenin öğe listesi sunduğu ve başka bir bölmenin listeden seçilen öğelerin ayrıntılarını gösterdiği çift bölmeli 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.

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:

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

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

Temel kullanım

ListDetailPaneScaffold uygulamasını aşağıdaki şekilde 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. Sizin için kod 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 ayrıştırılabilir olduğundan, yapılandırma değişikliklerini otomatik olarak işlemek için durum kaydedilebilir ve gezgin tarafından geri yüklenebilir. BackHandler, sistem geri hareketini veya düğmesini kullanarak geri gitme desteği sağlar. ListDetailPaneScaffold için geri düğmesinin beklenen davranışı, pencere boyutuna ve mevcut iskele değerine bağlıdır. ListDetailPaneScaffold, geçerli durumla geri dönmeyi destekliyorsa canNavigateBack(), true değerini etkinleştirerek BackHandler özelliğini etkinleştirir.

   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 özelliği, orijinal hatırlama çağrısında belirtilen türle (bu örnekte MyItem) aynı olduğundan, görüntülemeniz gereken tüm veriler için de mülke 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