Birçok uygulamanın, öğe koleksiyonlarını görüntülemesi gerekir. Bu dokümanda, Jetpack Compose'da bunu nasıl verimli bir şekilde yapabileceğiniz açıklanmaktadır.
Kullanım alanınızın herhangi bir kaydırma gerektirmediğini biliyorsanız (yöne bağlı olarak) basit bir Column veya Row kullanabilir ve aşağıdaki şekilde bir liste üzerinde yineleme yaparak her bir öğenin içeriğini yayınlayabilirsiniz:
@Composable
fun MessageList(messages: List<Message>) {
Column {
messages.forEach { message ->
MessageRow(message)
}
}
}
verticalScroll() değiştiricisini kullanarak Column öğesini kaydırılabilir hale getirebiliriz.
Tembel listeler
Çok sayıda öğe (veya bilinmeyen uzunlukta bir liste) görüntülemeniz gerekiyorsa Column gibi bir düzen kullanmak, performans sorunlarına neden olabilir. Bunun nedeni, tüm öğelerin oluşturulup görünür olup olmadıklarının belirlenmesi ve düzenlenebilmesidir.
Oluştur, yalnızca bileşenin görüntü alanında görünen öğeleri oluşturan ve düzenleyen bir bileşen grubu sağlar. LazyColumn ve LazyRow bu bileşenler arasındadır.
Adından da anlaşılacağı gibi LazyColumn ile LazyRow arasındaki fark, bu kişilerin öğelerini yerleştirdikleri ve kaydırdıkları yöndür. LazyColumn dikey olarak kaydırılan bir liste, LazyRow ise yatay olarak kayan bir liste oluşturur.
Tembel bileşenler, Compose'daki çoğu düzenden farklıdır. Tembel bileşenler, @Composable içerik bloku parametresini kabul ederek uygulamaların doğrudan composable'ları yayımlamasına izin vermek yerine bir LazyListScope.() bloğu sağlar. Bu LazyListScope bloku, uygulamaların öğe içeriğini açıklamasına olanak tanıyan bir DSL sunar. Daha sonra geç bileşeni, düzen ve kaydırma konumunun gerektirdiği şekilde her bir öğenin içeriğini eklemekten sorumludur.
LazyListScope DSL
LazyListScope DSL'si, düzendeki öğeleri açıklamak için çeşitli işlevler sağlar. En temelde, item() tek bir öğe ekler ve items(Int) birden fazla öğe ekler:
LazyColumn {
// Add a single item
item {
Text(text = "First item")
}
// Add 5 items
items(5) { index ->
Text(text = "Item: $index")
}
// Add another single item
item {
Text(text = "Last item")
}
}
Ayrıca, List gibi öğe koleksiyonları eklemenize olanak tanıyan çeşitli uzantı işlevleri de vardır. Bu uzantılar, yukarıdaki Column örneğimizi kolayca taşımamızı sağlar:
/**
* import androidx.compose.foundation.lazy.items
*/
LazyColumn {
items(messages) { message ->
MessageRow(message)
}
}
items() uzantı işlevinin, dizini sağlayan itemsIndexed() adlı bir varyantı da vardır. Daha fazla bilgi için lütfen LazyListScope referansını inceleyin.
Tembel ızgaralar
LazyVerticalGrid ve LazyHorizontalGrid composable'lar, öğelerin ızgarada gösterilmesini destekler. Dikey tembel ızgara, öğelerini birden fazla sütuna yayılan dikey olarak kaydırılabilir bir kapsayıcıda gösterirken Tembel yatay ızgaralar yatay eksende aynı davranışa sahip olur.
Izgaralar, listelerle aynı güçlü API özelliklerine sahiptir ve ayrıca içeriği tanımlamak için çok benzer bir DSL (LazyGridScope.()) kullanır.
LazyVerticalGrid içindeki columns parametresi ve LazyHorizontalGrid içindeki rows parametresi, hücrelerin sütun veya satırlar halinde nasıl oluşturulduğunu kontrol eder. Aşağıdaki örnekte, her bir sütunu en az 128.dp genişliğinde olacak şekilde ayarlamak için GridCells.Adaptive kullanılarak öğeler bir ızgara içerisinde gösterilmektedir:
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 128.dp)
) {
items(photos) { photo ->
PhotoItem(photo)
}
}
LazyVerticalGrid, öğeler için genişlik belirtmenizi sağlar. Tablo, mümkün olduğunca çok sütuna sığar. Sütun sayısı hesaplandıktan sonra, kalan genişlik sütunlar arasında eşit olarak dağıtılır.
Bu uyarlanabilir boyutlandırma yöntemi, özellikle farklı ekran boyutlarında öğe gruplarını görüntülemek için yararlıdır.
Kullanılacak sütun sayısını tam olarak biliyorsanız bunun yerine, GridCells.Fixed için gerekli sayıda sütun içeren bir örnek sağlayabilirsiniz.
Tasarımınız yalnızca belirli öğelerin standart olmayan boyutlara sahip olmasını gerektiriyorsa öğeler için özel sütun aralıkları sağlamak üzere ızgara desteğini kullanabilirsiniz.
LazyGridScope DSL
item ve items yöntemlerinin span parametresiyle sütun aralığını belirtin.
Aralık kapsamının değerlerinden biri olan maxLineSpan, sütun sayısı sabit olmadığı için özellikle uyarlanabilir boyutlandırma kullandığınızda yararlı olur.
Bu örnekte, tam satır kapsamının nasıl sağlanacağı gösterilmektedir:
LazyVerticalGrid(
columns = GridCells.Adaptive(minSize = 30.dp)
) {
item(span = {
// LazyGridItemSpanScope:
// maxLineSpan
GridItemSpan(maxLineSpan)
}) {
CategoryCard("Fruits")
}
// ...
}
Tembel ızgara
LazyVerticalStaggeredGrid ve LazyHorizontalStaggeredGrid, geç yüklenen, aşamalı bir öğe ızgarası oluşturmanızı sağlayan composable'lardır.
Tembel dikey kademeli ızgara, öğelerini birden çok sütuna yayılan ve ayrı ayrı öğelerin farklı yüksekliklerde olmasına olanak tanıyan, dikey olarak kaydırılabilir bir kapsayıcıda görüntüler. Tembel yatay ızgaralar, farklı genişliklere sahip öğelerle yatay eksende aynı davranışa sahiptir.
Aşağıdaki snippet, öğe başına 200.dp genişliğinde LazyVerticalStaggeredGrid kullanımına dair temel bir örnektir:
LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Adaptive(200.dp),
verticalItemSpacing = 4.dp,
horizontalArrangement = Arrangement.spacedBy(4.dp),
content = {
items(randomSizedPhotos) { photo ->
AsyncImage(
model = photo,
contentScale = ContentScale.Crop,
contentDescription = null,
modifier = Modifier.fillMaxWidth().wrapContentHeight()
)
}
},
modifier = Modifier.fillMaxSize()
)
Sabit bir sayıda sütun ayarlamak için StaggeredGridCells.Adaptive yerine StaggeredGridCells.Fixed(columns) değerini kullanabilirsiniz.
Bu işlem, kullanılabilir genişliği sütun sayısına (veya yatay ızgarada satır sayısına) böler ve her bir öğe bu genişliği (veya yatay ızgarada yüksekliği) alır:
LazyVerticalStaggeredGrid(
columns = StaggeredGridCells.Fixed(3),
verticalItemSpacing = 4.dp,
horizontalArrangement = Arrangement.spacedBy(4.dp),
content = {
items(randomSizedPhotos) { photo ->
AsyncImage(
model = photo,
contentScale = ContentScale.Crop,
contentDescription = null,
modifier = Modifier.fillMaxWidth().wrapContentHeight()
)
}
},
modifier = Modifier.fillMaxSize()
)
İçerik dolgusu
Bazen içeriğin kenarlarına dolgu eklemeniz gerekir. Geç bileşenler, bunu desteklemek için contentPadding parametresine bazı PaddingValues öğelerini iletmenizi sağlar:
LazyColumn(
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
) {
// ...
}
Bu örnekte, yatay kenarlara (sol ve sağ) 16.dp dolgu, ardından içeriğin üst ve alt kısmına 8.dp dolgu ekliyoruz.
Bu dolgunun LazyColumn öğesine değil, içeriğin kendisine uygulandığını lütfen unutmayın. Yukarıdaki örnekte ilk öğe en üstüne 8.dp dolgu ekler, son öğe alt kısmına 8.dp dolgu ekler ve tüm öğelerin sol ve sağ tarafında 16.dp dolgu bulunur.
İçerik aralığı
Öğeler arasında boşluk eklemek için Arrangement.spacedBy() işlevini kullanabilirsiniz.
Aşağıdaki örnekte her öğe arasına 4.dp boşluk eklenmiştir:
LazyColumn(
verticalArrangement = Arrangement.spacedBy(4.dp),
) {
// ...
}
Benzer şekilde LazyRow için:
LazyRow(
horizontalArrangement = Arrangement.spacedBy(4.dp),
) {
// ...
}
Bununla birlikte ızgaralar hem dikey hem de yatay düzenlemeleri kabul eder:
LazyVerticalGrid(
columns = GridCells.Fixed(2),
verticalArrangement = Arrangement.spacedBy(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
items(photos) { item ->
PhotoItem(item)
}
}
Öğe anahtarları
Varsayılan olarak her bir öğenin durumu, öğenin liste veya tablodaki konumuna göre ayarlanır. Bununla birlikte, konumu değişen öğeler hatırlanan durumları etkili bir şekilde kaybedeceği için bu durum, veri kümesi değişirse sorunlara yol açabilir. LazyRow senaryosunu LazyColumn içinde göz önünde bulundurursanız satır, öğe konumunu değiştirirse kullanıcı satır içindeki kaydırma konumunu kaybeder.
Bununla mücadele etmek amacıyla, her öğe için sabit ve benzersiz bir anahtar sağlayarak key parametresi için bir blok sağlayabilirsiniz. Sabit bir anahtar sağlamak, öğe durumunun veri kümesi değişiklikleri arasında tutarlı olmasını sağlar:
LazyColumn {
items(
items = messages,
key = { message ->
// Return a stable + unique key for the item
message.id
}
) { message ->
MessageRow(message)
}
}
Anahtarları sağlayarak, Compose'un yeniden sıralamaları doğru şekilde işlemesine yardımcı olursunuz. Örneğin, öğeniz hatırlandı durumu içeriyorsa anahtarları ayarlamak, Oluştur'un konumu değiştiğinde bu durumu öğeyle birlikte taşımasına olanak tanır.
LazyColumn {
items(books, key = { it.id }) {
val rememberedValue = remember {
Random.nextInt()
}
}
}
Bununla birlikte, öğe anahtarı olarak kullanabileceğiniz türlerle ilgili bir sınırlama vardır.
Anahtarın türü, Android'in Etkinlik yeniden oluşturulduğunda sahip olduğu durumları koruma mekanizması olan Bundle tarafından desteklenmelidir. Bundle; temel öğeler, enumlar veya
parseller gibi türleri destekler.
LazyColumn {
items(books, key = {
// primitives, enums, Parcelable, etc.
}) {
// ...
}
}
composable'ın içindeki rememberSaveable öğesinin, Etkinlik yeniden oluşturulduğunda, hatta bu öğeden ayrılıp geri kaydırdığınızda bile geri yüklenebilmesi için bu anahtarın Bundle tarafından desteklenmesi gerekir.
LazyColumn {
items(books, key = { it.id }) {
val rememberedValue = rememberSaveable {
Random.nextInt()
}
}
}
Öğe animasyonları
RecyclerView widget'ını kullandıysanız öğe değişikliklerinin otomatik olarak canlandırıldığını bilirsiniz.
Tembel düzenler, öğelerin yeniden sıralanması için aynı işlevi sağlar.
API basittir. animateItemPlacement değiştiriciyi öğe içeriği olarak ayarlamanız yeterlidir:
LazyColumn {
items(books, key = { it.id }) {
Row(Modifier.animateItemPlacement()) {
// ...
}
}
}
Şunlara ihtiyacınız varsa özel animasyon spesifikasyonu bile sağlayabilirsiniz:
LazyColumn {
items(books, key = { it.id }) {
Row(
Modifier.animateItemPlacement(
tween(durationMillis = 250)
)
) {
// ...
}
}
}
Taşınan öğenin yeni konumunun bulunabilmesi için öğelerinize anahtar sağladığınızdan emin olun.
Yeniden sıralamaların yanı sıra ekleme ve kaldırma işlemleri için öğe animasyonları şu anda geliştirilme aşamasındadır. Sorunun durumunu 150812265 ile takip edebilirsiniz.
Yapışkan başlıklar (deneysel)
"Yapışkan başlık" kalıbı, gruplandırılmış verilerin listesini görüntülerken faydalıdır. Aşağıda her kişinin baş harfine göre gruplandırılmış bir "kişi listesi" örneği görebilirsiniz:
LazyColumn ile sabit bir başlık oluşturmak için başlık içeriğini sağlayan deneysel stickyHeader() işlevini kullanabilirsiniz:
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ListWithHeader(items: List<Item>) {
LazyColumn {
stickyHeader {
Header()
}
items(items) { item ->
ItemRow(item)
}
}
}
Yukarıdaki "kişi listesi" örneğinde olduğu gibi, birden çok başlık içeren bir liste oluşturmak için şunları yapabilirsiniz:
// This ideally would be done in the ViewModel
val grouped = contacts.groupBy { it.firstName[0] }
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ContactsList(grouped: Map<Char, List<Contact>>) {
LazyColumn {
grouped.forEach { (initial, contactsForInitial) ->
stickyHeader {
CharacterHeader(initial)
}
items(contactsForInitial) { contact ->
ContactListItem(contact)
}
}
}
}
Kaydırma konumuna tepki verme
Birçok uygulamanın, kaydırma konumu ile öğe düzenindeki değişikliklere tepki vermesi ve bunları dinlemesi gerekir.
Tembel bileşenler, LazyListState değerini kaldırarak bu kullanım alanını destekler:
@Composable
fun MessageList(messages: List<Message>) {
// Remember our own LazyListState
val listState = rememberLazyListState()
// Provide it to LazyColumn
LazyColumn(state = listState) {
// ...
}
}
Basit kullanım alanları için uygulamaların genellikle yalnızca ilk görünür öğeyle ilgili bilgileri bilmesi gerekir. Bunun için LazyListState, firstVisibleItemIndex ve firstVisibleItemScrollOffset özelliklerini sağlar.
Kullanıcının kaydırarak ilk öğeyi geçip geçmediğine bağlı olarak bir düğmeyi gösterme ve gizleme örneğini kullanırsak:
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MessageList(messages: List<Message>) {
Box {
val listState = rememberLazyListState()
LazyColumn(state = listState) {
// ...
}
// Show the button if the first visible item is past
// the first item. We use a remembered derived state to
// minimize unnecessary compositions
val showButton by remember {
derivedStateOf {
listState.firstVisibleItemIndex > 0
}
}
AnimatedVisibility(visible = showButton) {
ScrollToTopButton()
}
}
}
Durumu doğrudan kompozisyonda okumak, diğer kullanıcı arayüzü composable'larını güncellemeniz gerektiğinde faydalıdır. Ancak etkinliğin aynı bileşimde işlenmesinin gerekmediği senaryolarla da karşılaşılabilir. Bunun yaygın bir örneği, kullanıcı ekranı kaydırarak belirli bir
noktayı kaydırdıktan sonra bir analiz etkinliği göndermektir. Bunu verimli şekilde yapmak için bir snapshotFlow() kullanabiliriz:
val listState = rememberLazyListState()
LazyColumn(state = listState) {
// ...
}
LaunchedEffect(listState) {
snapshotFlow { listState.firstVisibleItemIndex }
.map { index -> index > 0 }
.distinctUntilChanged()
.filter { it }
.collect {
MyAnalyticsService.sendScrolledPastFirstItemEvent()
}
}
LazyListState, layoutInfo özelliği aracılığıyla şu anda görüntülenmekte olan tüm öğeler ve ekrandaki sınırları hakkında bilgi de sağlar. Daha fazla bilgi için LazyListLayoutInfo sınıfını inceleyin.
Kaydırma konumunu kontrol etme
Bu, kaydırma konumuna tepki vermenin yanı sıra uygulamaların, kaydırma konumunu kontrol edebilmesi için de yararlıdır.
LazyListState bunu, kaydırma konumunu "hemen" tutturan scrollToItem() işlevi ve bir animasyon kullanarak kaydıran animateScrollToItem() (yumuşak kaydırma olarak da bilinir) işleviyle destekler:
@Composable
fun MessageList(messages: List<Message>) {
val listState = rememberLazyListState()
// Remember a CoroutineScope to be able to launch
val coroutineScope = rememberCoroutineScope()
LazyColumn(state = listState) {
// ...
}
ScrollToTopButton(
onClick = {
coroutineScope.launch {
// Animate scroll to the first item
listState.animateScrollToItem(index = 0)
}
}
)
}
Büyük veri kümeleri (sayfalama)
Çağrı kitaplığı, uygulamaların büyük öğe listelerini desteklemesine olanak tanır. Bu sayede, listenin küçük parçalarını yükleyip görüntüleyebilir. 3.0 ve sonraki sürümler, androidx.paging:paging-compose kitaplığı aracılığıyla Compose desteği sağlar.
Sayfalandırılmış içeriklerin listesini görüntülemek için collectAsLazyPagingItems() uzantı işlevini kullanıp döndürülen LazyPagingItems öğesini LazyColumn içinde items() öğesine iletebiliriz. Görünümlerdeki Sayfalandırma desteğine benzer şekilde, veriler yüklenirken item için null olup olmadığını kontrol ederek yer tutucuları görüntüleyebilirsiniz:
@Composable
fun MessageList(pager: Pager<Int, Message>) {
val lazyPagingItems = pager.flow.collectAsLazyPagingItems()
LazyColumn {
items(
lazyPagingItems.itemCount,
key = lazyPagingItems.itemKey { it.id }
) { index ->
val message = lazyPagingItems[index]
if (message != null) {
MessageRow(message)
} else {
MessagePlaceholder()
}
}
}
}
Tembel düzenlerin kullanımıyla ilgili ipuçları
Tembel düzenlerinizin gerektiği gibi çalışmasını sağlamak için göz önünde bulundurabileceğiniz birkaç ipucu vardır.
0 piksel boyutlu öğeler kullanmaktan kaçının
Bu durum, örneğin daha sonraki bir aşamada listenizin öğelerini doldurmak için resimler gibi bazı verileri eşzamansız olarak almayı beklediğiniz senaryolarda gerçekleşebilir. Bu durum, 0 piksel yüksekliğinde olduğu ve tüm öğeleri görüntü alanına sığabileceği için Tembel düzenin ilk ölçümde tüm öğelerini oluşturmasına neden olur. Öğeler yüklenip yükseklikleri artırıldıktan sonra Tembel düzenler, ilk seferde gereksiz yere oluşturulan diğer tüm öğeleri siler. Çünkü bunlar görüntü alanına sığmaz. Bu durumdan kaçınmak için öğelerinizin varsayılan boyutlandırmasını ayarlamanız gerekir. Böylece, Tembel düzen, görüntü alanına gerçekten sığabilecek öğe sayısını doğru şekilde hesaplar:
@Composable
fun Item(imageUrl: String) {
AsyncImage(
model = rememberAsyncImagePainter(model = imageUrl),
modifier = Modifier.size(30.dp),
contentDescription = null
// ...
)
}
Veriler eşzamansız olarak yüklendikten sonra öğelerinizin yaklaşık boyutunu bildiğinizde, öğelerinizin bedeninin yüklemeden önce ve yüklendikten sonra aynı kalmasını sağlamak (ör. yer tutucular eklemek) iyi bir uygulamadır. Bu, kaydırmanın doğru konumda kalmasına yardımcı olur.
Aynı yönde kaydırılabilen bileşenleri iç içe yerleştirmekten kaçının
Bu yalnızca, kaydırılabilir alt öğeleri önceden tanımlanmış bir boyut olmadan, aynı yöne doğru kaydırılabilir başka bir üst öğenin içine yerleştirildiği durumlar için geçerlidir. Örneğin, dikey olarak kaydırılabilir bir Column üst öğesinin içine sabit yüksekliği olmayan bir alt LazyColumn alt öğesi yerleştirmeye çalıştığınızda:
// throws IllegalStateException
Column(
modifier = Modifier.verticalScroll(state)
) {
LazyColumn {
// ...
}
}
Bunun yerine, tüm composable'larınızı bir üst LazyColumn içine sarmalayarak ve farklı içerik türlerini iletmek için DSL'yi kullanarak aynı sonucu elde edebilirsiniz. Bu, hem tek bir öğenin hem de birden çok liste öğesinin tek bir yerde yayınlanmasını sağlar:
LazyColumn {
item {
Header()
}
items(data) { item ->
PhotoItem(item)
}
item {
Footer()
}
}
Farklı yön düzenlerini iç içe yerleştirdiğiniz durumlara (örneğin, kaydırılabilir üst Row ve alt LazyColumn) izin verildiğini unutmayın:
Row(
modifier = Modifier.horizontalScroll(scrollState)
) {
LazyColumn {
// ...
}
}
Ayrıca, hâlâ aynı yön düzenlerini kullandığınız ancak iç içe yerleştirilmiş alt öğeler için sabit bir boyut ayarladığınız durumlar da buna dahildir:
Column(
modifier = Modifier.verticalScroll(scrollState)
) {
LazyColumn(
modifier = Modifier.height(200.dp)
) {
// ...
}
}
Tek bir öğeye birden çok öğe yerleştirmemeye dikkat edin
Bu örnekte, lambda adlı ikinci öğe bir blokta 2 öğe yayınlar:
LazyVerticalGrid(
columns = GridCells.Adaptive(100.dp)
) {
item { Item(0) }
item {
Item(1)
Item(2)
}
item { Item(3) }
// ...
}
Tembel düzenler, bunu beklendiği gibi ele alır ve öğeleri farklı öğeler gibi art arda düzenler. Ancak, bunu yaparken bazı sorunlar var.
Bir öğenin parçası olarak yayınlanan birden fazla öğe, tek bir varlık olarak ele alınır. Yani artık ayrı ayrı oluşturulamazlar. Ekranda bir öğe görünür hale gelirse bu öğeye karşılık gelen tüm öğelerin oluşturulması ve ölçülmesi gerekir. Bu özellik, aşırı kullanılırsa performansı
düşürebilir. Tüm öğeleri tek bir öğeye yerleştirmek aşırı bir örnek olarak, Tembel düzenlerin kullanılmasının amaçlarını tamamen ortadan kaldırır. Olası performans sorunlarının yanı sıra, bir öğeye daha fazla öğe eklemek scrollToItem() ve animateScrollToItem() işlevlerini de etkiler.
Bununla birlikte, bir öğeye birden fazla öğe yerleştirmek için (liste içinde ayırıcılar kullanma gibi) geçerli kullanım alanları vardır. Ayrı öğeler olarak görülmemeleri gerektiğinden, ayırıcıların kaydırma dizinlerini değiştirmesini istemezsiniz. Ayrıca, ayırıcılar küçük olduğundan performans etkilenmez. Ayırıcı, öğe görünmeden önce görünür olduğunda muhtemelen görünür olmalıdır. Böylece önceki öğenin bir parçası olabilirler:
LazyVerticalGrid(
columns = GridCells.Adaptive(100.dp)
) {
item { Item(0) }
item {
Item(1)
Divider()
}
item { Item(2) }
// ...
}
Özel düzenlemeleri kullanmayı düşünün
Tembel listelerde genellikle çok sayıda öğe bulunur ve bu listeler, kaydırma kapsayıcısının boyutundan daha fazlasını kaplar. Bununla birlikte, listeniz az sayıda öğeyle doldurulduğunda tasarımınız, bunların görüntü alanına nasıl yerleştirilmesi gerektiğine dair daha spesifik gereksinimlere sahip olabilir.
Bunu yapmak için özel sektörü Arrangement kullanıp LazyColumn bölümüne aktarabilirsiniz. Aşağıdaki örnekte, TopWithFooter nesnesinin yalnızca arrange yöntemini uygulaması gerekir. İlk olarak, öğeleri
birbiri ardına yerleştirir. İkinci olarak, kullanılan toplam yükseklik görüntü alanı yüksekliğinden düşükse alt bilgi en alta yerleştirilir:
object TopWithFooter : Arrangement.Vertical {
override fun Density.arrange(
totalSize: Int,
sizes: IntArray,
outPositions: IntArray
) {
var y = 0
sizes.forEachIndexed { index, size ->
outPositions[index] = y
y += size
}
if (y < totalSize) {
val lastIndex = outPositions.lastIndex
outPositions[lastIndex] = totalSize - sizes.last()
}
}
}
contentType adlı kullanıcıyı eklemeyi düşünün
Compose 1.2'den başlayarak Lazy düzeninizin performansını en üst düzeye çıkarmak için listelerinize veya ızgaralarınıza contentType ekleyebilirsiniz. Bu, birden çok farklı öğe türünden oluşan bir liste veya ızgara
oluşturduğunuz durumlarda, düzenin her bir öğesi için içerik türünü belirtmenize olanak tanır:
LazyColumn {
items(elements, contentType = { it.type }) {
// ...
}
}
contentType özelliğini sağladığınızda, Oluştur, besteleri yalnızca aynı türdeki öğeler arasında yeniden kullanabilir. Benzer yapıya sahip öğeler oluşturduğunuzda yeniden kullanmak
daha verimli olacağından, içerik türlerinin sağlanması
Oluştur'un tamamen farklı bir B tipi öğenin üzerinde A türünde bir öğe oluşturmaya çalışmamasını
sağlar. Bu, besteyi yeniden kullanmanın ve Tembel düzen performansınızın avantajlarını en üst düzeye çıkarmanıza yardımcı olur.
Performansı ölçme
Lazy düzeninin performansını yalnızca yayın modunda çalışırken ve R8 optimizasyonunu etkinleştirdiğinizde güvenilir bir şekilde ölçebilirsiniz. Hata ayıklama derlemelerinde, tembel düzen kaydırması daha yavaş görünebilir. Bu hakkında daha fazla bilgi için Performans oluşturma bölümünü okuyun.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
RecyclerViewadlı cihazı geç listeye taşı- Oluşturma'da kullanıcı arayüzü durumunu kaydet
- Jetpack Compose için Kotlin