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 kalıp, özellikle büyük koleksiyonların öğeleri hakkında ayrıntılı bilgi sağlayan uygulamalar için (örneğin, her bir e-posta iletisinin ayrıntılı içeriğini ve e-posta listesini içeren bir e-posta istemcisi) kullanışlıdır. Liste ayrıntıları, uygulama tercihlerini ayrıntı bölmesinde her bir kategorinin tercihlerini kullanarak bir kategori listesine ayırmak gibi daha az önemli yollar için de kullanılabilir.

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

ListDetailPaneScaffold, uygulamanızdaki liste ayrıntısı kalıbının uygulanmasını basitleştiren bir composable'dır. Liste ayrıntısı yapıları, en fazla üç bölmeden oluşabilir: liste bölmesi, ayrıntı bölmesi ve isteğe bağlı ekstra bölme. Yapı, ekran alanı hesaplamalarını işler. Yeterli ekran boyutu varsa liste bölmesinin yanında ayrıntı bölmesi gösterilir. Küçük ekran boyutlarında, iskele otomatik olarak liste veya ayrıntı bölmesini tam ekran görüntülemeye geçiş yapar.

Bağımlılıkları belirtme

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

Uygulamanız ilgili üç Material 3 kitaplığının bağımlılıklarını içermelidir:

• uyarlanabilir: HingeInfo ve Posture gibi alt düzey yapı taşları
• udaptive-layout: ListDetailPaneScaffold ve SupportingPaneScaffold gibi uyarlanabilir düzenler
  • uyarlanabilir-gezinme: Bölmeler içinde ve bölmeler arasında gezinmek için kullanılan yapılabilirler

Bağımlılıkları uygulamanızın veya modülünüzün build.gradle dosyasına ekleyin:

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

implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12'

Temel kullanım

ListDetailPaneScaffold özelliğini 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ın Parcelable değeri olması gerekir. 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 bir BackHandler ekleyin. Bu gezgin liste, ayrıntı ve ek bölmeler arasında geçiş yapmak için kullanılır. Kılavuz, genel bir tür bildirerek yapı yapısının durumunu da (yani MyItem görüntülenmekte) 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, sistemin geri hareketini veya düğmesini kullanarak geri gitme desteği sunar. 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 kaynağından ListDetailPaneScaffold composable'a iletin.

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

4. Liste bölmesi uygulamanızı ListDetailPaneScaffold cihazına sağlayın. Gezinme sırasında varsayılan bölme animasyonlarını uygulamak için AnimatedPane değerini kullanın. Ardından ayrıntı bölmesine gitmek için ThreePaneScaffoldNavigator tuşunu kullanarak ListDetailPaneScaffoldRole.Detail ve iletilen öğeyi görüntüleyin.

   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 öğesine ekleyin. Gezinme tamamlandığında currentDestination, bölmede gösterilen içerik dahil olmak üzere uygulamanızın gittiği bölmeyi 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 ş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