FlowRow
ve FlowColumn
, Row
ve Column
ile benzer olan ancak kapsayıcıda alan tükendiğinde öğelerin bir sonraki satıra aktarılması açısından farklılık gösteren composable'lardır. Böylece birden fazla satır veya sütun oluşturulur. Bir satırdaki öğe sayısı da maxItemsInEachRow
veya maxItemsInEachColumn
ayarlanarak kontrol edilebilir. Duyarlı düzenler oluşturmak için genellikle FlowRow
ve FlowColumn
kullanabilirsiniz. Öğeler bir boyut için çok büyükse içerik kesilmez. Modifier.weight(weight)
ile maxItemsInEach*
kombinasyonunu kullanmak, gerektiğinde bir satır veya sütunun genişliğini dolduran/genişleyen düzenler oluşturmaya yardımcı olabilir.
Bunun tipik bir örneği, bir çip veya filtreleme kullanıcı arayüzü içindir:
Temel kullanım
FlowRow
veya FlowColumn
kullanmak için bu composable'ları oluşturun ve standart akışı izlemesi gereken öğeleri bu composable'ların içine yerleştirin:
@Composable private fun FlowRowSimpleUsageExample() { FlowRow(modifier = Modifier.padding(8.dp)) { ChipItem("Price: High to Low") ChipItem("Avg rating: 4+") ChipItem("Free breakfast") ChipItem("Free cancellation") ChipItem("£50 pn") } }
Bu snippet, yukarıda gösterilen kullanıcı arayüzünü oluşturur. İlk satırda yer kalmadığında öğeler otomatik olarak sonraki satıra geçer.
Akış düzeninin özellikleri
Akış düzenleri, uygulamanızda farklı düzenler oluşturmak için kullanabileceğiniz aşağıdaki özellik ve özelliklere sahiptir.
Ana eksen düzenlemesi: yatay veya dikey düzenleme
Ana eksen, öğelerin yerleştirildiği eksendir (örneğin, FlowRow
içinde öğeler yatay olarak düzenlenir). FlowRow
içindeki horizontalArrangement
parametresi, boş alanın öğeler arasında nasıl dağıtıldığını kontrol eder.
Aşağıdaki tabloda, FlowRow
için öğelerde horizontalArrangement
ayarlama örnekleri gösterilmektedir:
Yatay düzenleme |
Sonuç |
|
|
FlowColumn
için benzer seçenekler, varsayılan olarak Arrangement.Top
ile verticalArrangement
ile kullanılabilir.
Çapraz eksen düzenlemesi
Çapraz eksen, ana eksenin zıtsındaki eksendir. Örneğin, FlowRow
için bu dikey eksendir. Kapsayıcı içindeki genel içeriğin çapraz eksende düzenlenme şeklini değiştirmek üzere FlowRow
için verticalArrangement
ve FlowColumn
için horizontalArrangement
kullanın.
Aşağıdaki tabloda, FlowRow
için öğelerde farklı verticalArrangement
ayarlama örnekleri gösterilmektedir:
|
Sonuç |
|
|
FlowColumn
için horizontalArrangement
ile benzer seçenekler mevcut.
Varsayılan çapraz eksen düzenlemesi Arrangement.Start
şeklindedir.
Bağımsız öğe hizalaması
Satır içindeki öğeleri farklı hizalamalara sahip tek tek konumlandırmak isteyebilirsiniz. Bu, geçerli satırdaki öğeleri hizaladığından verticalArrangement
ve horizontalArrangement
satırlarından farklıdır. Bunu Modifier.align()
ile uygulayabilirsiniz.
Örneğin, bir FlowRow
içindeki öğeler farklı yüksekliklerde olduğunda satır, en büyük öğenin yüksekliğini alır ve Modifier.align(alignmentOption)
öğesini öğelere uygular:
|
Sonuç |
|
|
FlowColumn
için benzer seçenekler mevcut. Varsayılan hizalama: Alignment.Start
.
Satır veya sütundaki maksimum öğe sayısı
maxItemsInEachRow
veya maxItemsInEachColumn
parametreleri, ana eksende diğerine sarmalanmadan önce bir satıra izin verilecek maksimum öğe sayısını tanımlar. Varsayılan değer Int.MAX_INT
şeklindedir. Bu seçenek, boyutları satıra sığmalarına izin verdiği sürece mümkün olduğunca fazla öğeye izin verir.
Örneğin, bir maxItemsInEachRow
ayarlamak başlangıç düzenini yalnızca 3 öğeye sahip olmaya zorlar:
Ayarlanan maks. yok |
|
Akış öğeleri geç yükleniyor
ContextualFlowRow
ve ContextualFlowColumn
, akış satırınızın veya sütununuzun içeriğini geç yüklemenize olanak tanıyan, FlowRow
ve FlowColumn
'un özel bir sürümüdür. Ayrıca, öğenin ilk satırda olup olmadığı gibi öğe konumu (dizin, satır numarası ve kullanılabilir boyut) hakkında da bilgiler sağlar. Bu, büyük veri kümeleri için ve bir öğe hakkında bağlamsal bilgiye ihtiyacınız olduğunda faydalıdır.
maxLines
parametresi, görüntülenen satır sayısını sınırlar ve overflow
parametresi, bir öğe sınırına ulaşıldığında neyin gösterilmesi gerektiğini belirler. Bu sayede özel bir expandIndicator
veya collapseIndicator
belirtebilirsiniz.
Örneğin, "+ (kalan öğe sayısı)" veya "Daha az göster" düğmesini göstermek için:
val totalCount = 40 var maxLines by remember { mutableStateOf(2) } val moreOrCollapseIndicator = @Composable { scope: ContextualFlowRowOverflowScope -> val remainingItems = totalCount - scope.shownItemCount ChipItem(if (remainingItems == 0) "Less" else "+$remainingItems", onClick = { if (remainingItems == 0) { maxLines = 2 } else { maxLines += 5 } }) } ContextualFlowRow( modifier = Modifier .safeDrawingPadding() .fillMaxWidth(1f) .padding(16.dp) .wrapContentHeight(align = Alignment.Top) .verticalScroll(rememberScrollState()), verticalArrangement = Arrangement.spacedBy(4.dp), horizontalArrangement = Arrangement.spacedBy(8.dp), maxLines = maxLines, overflow = ContextualFlowRowOverflow.expandOrCollapseIndicator( minRowsToShowCollapse = 4, expandIndicator = moreOrCollapseIndicator, collapseIndicator = moreOrCollapseIndicator ), itemCount = totalCount ) { index -> ChipItem("Item $index") }
Öğe ağırlıkları
Ağırlık, bir öğenin faktörüne ve yerleştirildiği satırdaki kullanılabilir alana göre öğeyi büyütür. Ağırlıkların bir öğenin genişliğini hesaplamak için nasıl kullanıldığı konusunda FlowRow
ile Row
arasında önemli bir fark vardır. Rows
için ağırlık, Row
içindeki tüm öğelere göre belirlenir. FlowRow
ile ağırlık, FlowRow
kapsayıcısındaki tüm öğeleri değil, bir öğenin yerleştirildiği satırdaki öğeleri temel alır.
Örneğin, bir satıra denk gelen ve her biri farklı ağırlıklara sahip 1f, 2f, 1f
ve 3f
olan 4 öğeniz varsa, toplam ağırlık 7f
olur. Bir satır veya sütunda kalan alan, 7f
değerine bölünür. Daha sonra her bir öğenin genişliği şu formülle hesaplanır: weight * (remainingSpace / totalWeight)
.
Izgara benzeri bir düzen oluşturmak için FlowRow
veya FlowColumn
ile Modifier.weight
ve maksimum öğeleri birlikte kullanabilirsiniz. Bu yaklaşım, cihazınızın boyutuna uyum sağlayan duyarlı düzenler oluşturmak için yararlıdır.
Ağırlıkları kullanarak neler yapabileceğinize dair birkaç farklı örnek vardır. Bunlardan biri, aşağıda gösterildiği gibi öğelerin eşit büyüklükte olduğu bir ızgaradır:
Eşit boyutlardan oluşan bir tablo oluşturmak için aşağıdakileri yapabilirsiniz:
val rows = 3 val columns = 3 FlowRow( modifier = Modifier.padding(4.dp), horizontalArrangement = Arrangement.spacedBy(4.dp), maxItemsInEachRow = rows ) { val itemModifier = Modifier .padding(4.dp) .height(80.dp) .weight(1f) .clip(RoundedCornerShape(8.dp)) .background(MaterialColors.Blue200) repeat(rows * columns) { Spacer(modifier = itemModifier) } }
Önemli bir nokta da, başka bir öğe ekler ve bunu 9 yerine 10 kez tekrarlarsanız tüm satırın toplam ağırlığı 1f
olduğundan son öğe, son sütunun tamamını kaplar:
Ağırlıkları, Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio)
veya Modifier.fillMaxWidth(fraction)
gibi diğer Modifiers
öğeleri ile birleştirebilirsiniz. Bu değiştiricilerin tümü, FlowRow
(veya FlowColumn
) içindeki öğelerin duyarlı bir şekilde boyutlandırılmasına olanak tanımak için birlikte çalışır.
Ayrıca, iki öğenin her biri genişliğin yarısını ve bir öğenin sonraki sütunun tüm genişliğini kapladığı, farklı öğe boyutlarından oluşan alternatif bir ızgara da oluşturabilirsiniz:
Bunun için aşağıdaki kodu kullanabilirsiniz:
FlowRow( modifier = Modifier.padding(4.dp), horizontalArrangement = Arrangement.spacedBy(4.dp), maxItemsInEachRow = 2 ) { val itemModifier = Modifier .padding(4.dp) .height(80.dp) .clip(RoundedCornerShape(8.dp)) .background(Color.Blue) repeat(6) { item -> // if the item is the third item, don't use weight modifier, but rather fillMaxWidth if ((item + 1) % 3 == 0) { Spacer(modifier = itemModifier.fillMaxWidth()) } else { Spacer(modifier = itemModifier.weight(0.5f)) } } }
Kısmi boyutlandırma
Modifier.fillMaxWidth(fraction)
kullanarak bir öğenin kullanması gereken kapsayıcının boyutunu belirtebilirsiniz. Bu, Row
veya Column
öğesine uygulandığında Modifier.fillMaxWidth(fraction)
özelliğinin çalışma şeklinden farklıdır. Row/Column
öğe, tüm kapsayıcının genişliği yerine kalan genişliğin belirli bir yüzdesini kaplar.
Örneğin, aşağıdaki kod FlowRow
ve Row
kullanıldığında farklı sonuçlar verir:
FlowRow( modifier = Modifier.padding(4.dp), horizontalArrangement = Arrangement.spacedBy(4.dp), maxItemsInEachRow = 3 ) { val itemModifier = Modifier .clip(RoundedCornerShape(8.dp)) Box(modifier = itemModifier.height(200.dp).width(60.dp).background(Color.Red)) Box(modifier = itemModifier.height(200.dp).fillMaxWidth(0.7f).background(Color.Blue)) Box(modifier = itemModifier.height(200.dp).weight(1f).background(Color.Magenta)) }
|
|
|
fillMaxColumnWidth()
ve fillMaxRowHeight()
FlowColumn
veya FlowRow
içindeki bir öğeye Modifier.fillMaxColumnWidth()
ya da Modifier.fillMaxRowHeight()
uygulamak, aynı sütun veya satırdaki öğelerin, sütun/satırdaki en büyük öğeyle aynı genişliği veya yüksekliği almasını sağlar.
Örneğin, bu örnekte Android tatlıların listesini görüntülemek için FlowColumn
kullanılmıştır. Öğelere Modifier.fillMaxColumnWidth()
uygulandığında, öğelerin sarmalanmadığında ve uygulanmadığında her öğenin genişlikleri arasındaki farkı görebilirsiniz.
FlowColumn( Modifier .padding(20.dp) .fillMaxHeight() .fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp), maxItemsInEachColumn = 5, ) { repeat(listDesserts.size) { Box( Modifier .fillMaxColumnWidth() .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp)) .padding(8.dp) ) { Text( text = listDesserts[it], fontSize = 18.sp, modifier = Modifier.padding(3.dp) ) } } }
Her öğeye |
|
Genişlik değişikliği ayarlanmadı (öğeler sarmalanıyor) |
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Düzen oluşturma ile ilgili temel bilgiler
- Compose'da ConstraintLayout
- Düzenleyici işlemleri {:#editor-actions}