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

List-detail, bir bölmenin öğe listesini sunduğu ve başka bir bölmenin listeden seçilen öğelerin ayrıntılarını görüntülediği çift bölmeli bir 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ı bilgiler sağlayan uygulamalar için faydalıdır. Örneğin, e-posta listesi ve her e-posta iletisinin ayrıntılı içeriğini içeren bir e-posta istemcisi gibi. Liste ayrıntıları, uygulama tercihlerini ayrıntı bölmesinde her bir kategorinin tercihlerini içeren bir kategori listesine bölme gibi daha az kritik yollar için de kullanılabilir.

ListDetailPaneScaffold ile kullanıcı arayüzü kalıbı uygula

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

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

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

Bağımlılıkları bildirme

Not: material3-adaptive kitaplığı alfa sürümündedir ve değişebilir. Kitaplık, gezinme kitaplığıyla entegrasyonu henüz desteklememektedir. Ancak entegrasyon geliştirme aşamasındadır.

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

Uygulamanız, ilgili üç Materyal 3 kitaplığı için bağımlılık içermelidir:

• Uyarlanabilir: HingeInfo ve Posture gibi düşük seviye yapı taşları
• uyarlanabilir-düzen — ListDetailPaneScaffold ve SupportingPaneScaffold gibi uyarlanabilir düzenler
  • uyarlanabilir-gezinme — Bölmeler içinde ve Bölmeler arasında gezinmek için composables

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

Kotlin

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")

Modern

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 Parcelable olmalıdır. Kodu sizin yerinize oluşturmak için 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 gezgin liste, ayrıntı ve ekstra bölmeler arasında hareket etmek için kullanılır. Gezgin, genel bir tür tanımlayarak iskelenin durumunu da (yani MyItem görüntülenmekte olan) izler. Bu tür ayrıştırılabilir olduğundan, yapılandırma değişikliklerini otomatik olarak işlemek için durum, kılavuz tarafından kaydedilip 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 yapı iskelesine bağlıdır. ListDetailPaneScaffold, geçerli duruma geri dönmeyi destekliyorsa canNavigateBack() true olur ve BackHandler etkinleştirilir.

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

3. scaffoldState kartını navigator ile ListDetailPaneScaffold composable'a iletin.

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

4. Liste bölmesi uygulamanızı ListDetailPaneScaffold öğesine sağlayın. Gezinme sırasında varsayılan bölme animasyonlarını uygulamak için AnimatedPane aracını kullanın. Ardından, ayrıntı bölmesine gitmek için ThreePaneScaffoldNavigator (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 uygulamasına dahil edin. Gezinme tamamlandığında currentDestination, bölmede görüntülenen içerik de dahil olmak üzere uygulamanızın gittiği bölmeyi içerir. content özelliği, orijinal hatırlama çağrısında (bu örnekte MyItem) belirtilen türle aynıdır. Dolayısıyla, görüntülemeniz gereken tüm verilerin özelliğine 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 şunun 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