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.
Bağımlılıkları bildirme
ListDetailPaneScaffold
, Material 3 uyarlanabilir kitaplığının bir parçasıdır.
Uygulamanızın veya modülünüzün build.gradle
dosyasında kitaplık için bir bağımlılık ekleyin:
implementation("androidx.compose.material3.adaptive:adaptive:1.0.0-alpha07")
implementation("androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha07")
implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha07")
Temel kullanım
Aşağıda ListDetailPaneScaffold
ile ilgili temel kullanım gösterilmektedir:
Listedeki seçili öğeyi değişken bir durum değişkeninde depolayın. Değişken, ayrıntı bölmesinde gösterilecek öğeyi tutar. Genellikle, şu anda seçili olan öğeyi
null
ile başlatmak istersiniz. Bu, henüz bir seçim yapılmadığını gösterir.class MyItem(val id: Int) { companion object { val Saver: Saver<MyItem?, Int> = Saver( { it?.id }, ::MyItem, ) } }
var selectedItem: MyItem? by rememberSaveable(stateSaver = MyItem.Saver) { mutableStateOf(null) }
rememberListDetailPaneScaffoldNavigator
ileThreePaneScaffoldNavigator
oluşturun veBackHandler
ekleyin. Bu gezgin; liste, ayrıntı ve ekstra bölmeler arasında hareket etmek ve yapıya durumu sağlamak için kullanılır. EklenenBackHandler
, 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ı iskelet değerine bağlıdır.ListDetailPaneScaffold
, mevcut duruma geri dönmeyi destekliyorsacanNavigateBack()
,true
olur veBackHandler
etkinleştirilir.val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
Oluşturduğunuz
navigator
öğesindenscaffoldState
öğesiniListDetailPaneScaffold
composable'a iletin.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, // ... )
Liste bölmesi uygulamanızı
ListDetailPaneScaffold
öğesine sağlayın. Uygulamanızın, yeni seçilen öğeyi yakalamak için bir geri çağırma bağımsız değişkeni içerdiğinden emin olun. Bu geri çağırma tetiklendiğinde,selectedItem
durum değişkenini güncelleyin ve ayrıntı bölmesini (ListDetailPaneScaffoldRole.Detail
) görüntülemek içinThreePaneScaffoldNavigator
değerini kullanın.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane(Modifier) { MyList( onItemClick = { id -> // Set current item selectedItem = id // Switch focus to detail pane navigator.navigateTo(ListDetailPaneScaffoldRole.Detail) } ) } }, // ... )
Ayrıntı bölmesi uygulamanızı
ListDetailPaneScaffold
özelliğine dahil edin. YalnızcaselectedItem
boş değilse ayrıntı içeriğini görüntüleyin.ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = // ... detailPane = { AnimatedPane(Modifier) { selectedItem?.let { item -> MyDetails(item) } } }, )
Yukarıdaki adımları uyguladıktan sonra, kodunuz şunun gibi görünecektir:
// Currently selected item var selectedItem: MyItem? by rememberSaveable(stateSaver = MyItem.Saver) { mutableStateOf(null) } // Create the ListDetailPaneScaffoldState val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } ListDetailPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, listPane = { AnimatedPane(Modifier) { MyList( onItemClick = { id -> // Set current item selectedItem = id // Display the detail pane navigator.navigateTo(ListDetailPaneScaffoldRole.Detail) }, ) } }, detailPane = { AnimatedPane(Modifier) { // Show the detail pane content if selected item is available selectedItem?.let { item -> MyDetails(item) } } }, )