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

List-detail, bir bölmenin yer aldığı iki bölmeli düzenden oluşan bir kullanıcı arayüzü bir öğe listesi gösterir, başka bir bölmede ise seçilen öğelerin ayrıntıları görüntülenir kaldıracak.

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ıları, uygulamayı ayırma gibi daha az kritik yollar için de kullanılabilir tercihlerini, her kategorinin tercihlerini içeren bir kategori listesine ayrıntı penceresinden seçebilirsiniz.

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

ListDetailPaneScaffold, API'nin uygulanmasını basitleştiren özelliğini nasıl kullanacağınızı göstereceğiz. Liste ayrıntıları yapısı en fazla üç bölme: liste bölmesi, ayrıntı bölmesi ve isteğe bağlı ekstra bölme. İlgili içeriği oluşturmak için kullanılan ekran alanı hesaplamalarını destekler. Ekran boyutu yeterli olduğunda liste bölmesinin yanında ayrıntı bölmesi görüntülenir. Küçük ekranda yapılandırıldığında, iskele otomatik olarak liste veya hedef konumlardan birini ayrıntı bölmesini tam ekran yapabilirsiniz.

Şekil 1. Yeterli ekran boyutu varsa bölmesi, liste bölmesinin yanında gösterilir.

ziyaret edin.

Ş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ı belirtme

ListDetailPaneScaffold, Materyal 3 uyarlanabilir düzeninin bir parçasıdır kitaplığı'nı seçin.

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

ziyaret edin.

Not: Material3 adaptive, adaptive-layout ve adaptive-navigation kitaplıklar, sürüm adayları (RC'ler) olarak kullanılabilir.

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. Bu sınıf desteklemesi için Parcelable olmalıdır ve seçilen liste öğesini geri yükleme. kotlin-parcelize eklentisini kullanarak sizin için kod oluşturun.

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

2. Şununla bir ThreePaneScaffoldNavigator oluşturun: rememberListDetailPaneScaffoldNavigator ve bir BackHandler ekleyin. Bu gezgin liste, ayrıntı ve ek bölmeler 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 sonraki adımlarda, eyalet kaydedilip geri yüklenebilir. otomatik olarak ele alınır. İ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. Şunun için geri düğmesinin beklenen davranışı: ListDetailPaneScaffold, pencere boyutuna ve mevcut yapıya bağlıdır değer. 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 cihazına sağlayın. Tekliflerinizi otomatikleştirmek ve optimize etmek için AnimatedPane tuşuna basarak gezinme sırasında varsayılan bölme animasyonlarını uygulayabilirsiniz. Daha sonra Ayrıntı bölmesine gitmek için ThreePaneScaffoldNavigator, ListDetailPaneScaffoldRole.Detail ve iletilen öğeyi gösterir.

   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, gezinme bölmesini Bölmede görüntülenen içerik de dahil olmak üzere gezinin. İ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, tüm verilere ait mülklere 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