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

Liste-ayrıntı, bir bölmenin öğe 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 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ı, uygulama tercihlerini ayrıntı bölmesinde her kategorinin tercihlerinin yer aldığı bir kategori listesine ayırma gibi daha az kritik yollar için de kullanılabilir.

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

ListDetailPaneScaffold, API'nin uygulanmasını basitleştiren izin verir. Liste ayrıntıları yapısı en fazla üç bölme vardır: liste bölmesi, ayrıntı bölmesi ve isteğe bağlı ekstra 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.

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: HingeInfo ve Posture gibi düşük düzey yapı taşları
• udaptive-layout: Aşağıdakiler gibi uyarlanabilir düzenler ListDetailPaneScaffold ve SupportingPaneScaffold
• uyarlanabilir-gezinme: İçinde gezinme ve bölmeler arasında

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. Kodu sizin için oluşturmak üzere kotlin-parcelize eklentisini kullanın.

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

2. Şununla bir ThreePaneScaffoldNavigator oluşturun: rememberListDetailPaneScaffoldNavigator ve bir BackHandler ekleyin. Bu gezinme menüsü, liste, ayrıntılar ve ek paneller arasında geçiş yapmak için kullanılır. Ölçüt bir genel tür tanımladığında, gezgin aynı zamanda iskele (yani MyItem gösteriliyor). 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. İlgili içeriği oluşturmak için kullanılan BackHandler kullanıcının sistem geri hareketini kullanarak geri gitmeyi veya düğmesini tıklayın. ListDetailPaneScaffold için geri düğmesinin beklenen davranışı, pencere boyutuna ve mevcut iskele değerine bağlıdır. ListDetailPaneScaffold, canNavigateBack() true olur ve bu durumda BackHandler.

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

3. scaffoldState cihazını navigator platformundan ListDetailPaneScaffold composable.

   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. İlgili içeriği oluşturmak için kullanılan content özelliği, orijinal hatırlama çağrısında belirtilen türle aynı (bu örnekte MyItem) olduğundan, istediğiniz veri için de mülke erişebilirsiniz birkaç küçük resim.

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