FlowRow
ve FlowColumn
, Row
ve Column
'e benzer ancak kapsayıcıda yer kalmadığında öğelerin bir sonraki satıra akması bakımından farklı olan kompozisyonlardır. Bu da
birden çok satır veya sütun olabilir. Bir satırdaki öğe sayısı da kontrol edilebilir
maxItemsInEachRow
veya maxItemsInEachColumn
ayarlayarak öğrenin. Bu amaçla sıklıkla
Duyarlı düzenler oluşturmak için FlowRow
ve FlowColumn
(içerik kesilmeyecek)
bir boyut için çok büyükse ve
Modifier.weight(weight)
ile maxItemsInEach*
, şu özelliklere sahip düzenler oluşturmanıza yardımcı olabilir:
gerektiğinde bir satırın veya sütunun genişliğini doldurur/genişletir.
Çip veya filtreleme kullanıcı arayüzü tipik bir örnektir:
Temel kullanım
FlowRow
veya FlowColumn
kullanmak için bu composable'ları oluşturup öğeleri yerleştirin
şunun içinde standart akışı
izlemesi gerekir:
@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 ve öğeler otomatik olarak bir sonraki satıra ekleyin.
Akış düzeninin özellikleri
Akış düzenleri aşağıdaki özellik ve özelliklere sahiptir: uygulamanızda farklı düzenler oluşturabilirsiniz.
Ana eksen düzenlemesi: yatay veya dikey düzenleme
Ana eksen, öğelerin yerleştirildiği eksendir (örneğin,
FlowRow
, öğeler yatay olarak düzenlenir). FlowRow
içindeki horizontalArrangement
parametresi, boş alanın öğeler arasında dağıtılma şeklini 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 verticalArrangement
ile mevcuttur.
varsayılan değer Arrangement.Top
.
Çapraz eksen düzenlemesi
Çapraz eksen, ana eksenin tersi yönünde olan eksendir. Örneğin,
Örneğin, FlowRow
, bu dikey eksendir. Genel
kapsayıcının içindeki içerikler çapraz eksende düzenlenir,
FlowRow
için verticalArrangement
ve için horizontalArrangement
FlowColumn
.
FlowRow
için aşağıdaki tabloda farklı ayar örnekleri gösterilmektedir
Öğelerdeki verticalArrangement
:
Dikey düzenleme |
Sonuç |
|
|
FlowColumn
için horizontalArrangement
ile benzer seçenekler mevcut.
Varsayılan çapraz eksen ayarlaması: Arrangement.Start
.
Bağımsız öğe hizalaması
Bir satırdaki öğeleri farklı boyutlarla tek tek yerleştirmek isteyebilirsiniz
yardımcı olmaktır. Bu, verticalArrangement
ve
geçerli satırdaki öğeleri hizaladığı için horizontalArrangement
. Şunları yapabilirsiniz:
bunu Modifier.align()
ile uygulayın.
Örneğin, FlowRow
içindeki öğeler farklı yüksekliklerde olduğunda satır,
yüksekliğini belirtir ve öğe için Modifier.align(alignmentOption)
öğeler:
|
Sonuç |
|
|
FlowColumn
için benzer seçenekler mevcut. Varsayılan hizalama Alignment.Start
'tür.
Satır veya sütundaki maksimum öğe sayısı
maxItemsInEachRow
veya maxItemsInEachColumn
parametreleri maksimum
sonrakine kaydırmadan önce bir satıra izin vermek için ana eksendeki öğeleri tıklayın. Varsayılan değer Int.MAX_INT
'tür. Bu değer, boyutları satıra sığmasına izin verdiği sürece mümkün olduğunca fazla öğeye izin verir.
Örneğin, bir maxItemsInEachRow
ayarlandığında başlangıç düzeni yalnızca
3 öğesi var:
Maks. ayarlanmadı |
|
Akış öğelerini geç yükleme
ContextualFlowRow
ve ContextualFlowColumn
uzmandır
içerikleri geç yüklemenize olanak tanıyan FlowRow
ve FlowColumn
sürümü
her zaman mevcut. Ayrıca öğelerin konumu ile ilgili bilgiler de sağlar.
(dizin, satır numarası ve kullanılabilir boyut) örneğin, öğenin ilk
satırı. Bu, büyük veri kümeleri için ve bağlamsal bilgilere ihtiyacınız varsa yararlıdır.
bir liste oluşturabilirsiniz.
maxLines
parametresi, gösterilen satır sayısını sınırlar ve overflow
parametresi, istenen öğe için taşma işlemi olduğunda
özel bir expandIndicator
veya
collapseIndicator
.
Örneğin, "+ (kalan öğe sayısı)" veya "Daha Az Göster" düğmesi 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") }
Ürün ağırlıkları
Ağırlık, bir öğeyi faktörüne ve satırdaki kullanılabilir alana göre büyütür
yerleştirildi. FlowRow
ile Row
arasında önemli bir fark var
bir öğenin genişliğini hesaplamak için ağırlıkların nasıl kullanıldığıyla ilgili daha fazla bilgi edinebilirsiniz. Rows
için ağırlık
Row
içindeki tüm öğeleri temel alır. FlowRow
ile ağırlık, FlowRow
kapsayıcısındaki tüm öğelere değil, bir öğenin yerleştirildiği satırdaki öğelere dayanır.
Örneğin, tümü bir satırda yer alan ve her biri farklı olan 4 öğeniz varsa
1f, 2f, 1f
ve 3f
ağırlıkları olursa toplam ağırlık 7f
olur. Kalan alan
bir satır veya sütundaki değer 7f
değerine bölünür. Bu durumda her bir öğe genişliği
şu kullanılarak hesaplanmıştır: weight * (remainingSpace / totalWeight)
.
FlowRow
veyaModifier.weight
Izgara benzeri bir düzen oluşturmak için FlowColumn
tuşuna basın. Bu yaklaşım, herkesin
duyarlı düzenler kullanabilirsiniz.
Ağırlıkları kullanarak yapabileceklerinize dair birkaç farklı örnek vardır. Bir örneği, aşağıda gösterildiği gibi öğelerin eşit boyutlarda olduğu bir ızgaradır:
Eşit öğe boyutlarında 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) } }
Daha da önemlisi, başka bir öğe ekleyip 9 yerine 10 kez tekrar ederseniz
son öğe, tüm satırın toplam ağırlığı olarak son sütunun tamamını kaplar
1f
:
Ağırlıkları aşağıdaki gibi diğer Modifiers
ile birleştirebilirsiniz:
Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio)
veya
Modifier.fillMaxWidth(fraction)
. Bu değiştiricilerin tümü, FlowRow
(veya FlowColumn
) içindeki öğelerin duyarlı boyutlandırılmasına olanak tanımak için birlikte çalışır.
Ayrıca, farklı öğe boyutlarından oluşan ve iki öğenin bulunduğu alternatif bir tablo oluşturabilirsiniz. kapladığı alan, genişliğinin yarısını kaplar ve bir öğe diğerinin sütun:
Bu işlemi aşağıdaki kodla yapabilirsiniz:
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)) } } }
Kesirli boyutlandırma
Modifier.fillMaxWidth(fraction)
kullanarak,
bir kapsayıcı görevi görür. Bu, önceki kontrollerden
Modifier.fillMaxWidth(fraction)
, Row
veya Column
öğesine uygulandığında çalışır.
genişliğinin bir kısmını kaplayacağı için Row/Column
öğe,
kapsayıcı genişliğine değineceğim.
Örneğin, aşağıdaki kod FlowRow
yerine 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()
Modifier.fillMaxColumnWidth()
veya
FlowColumn
veya FlowRow
içindeki bir öğeye Modifier.fillMaxRowHeight()
aynı sütun veya satırdaki öğelerin, şununla aynı genişliği veya yüksekliği kullanmasını sağlar:
satırdaki en büyük öğeyi ifade eder.
Örneğin, bu örnekte Android listesini görüntülemek için FlowColumn
kullanılmıştır
tatlılar. Bir öğeyi seçtiğinizde her bir öğe genişliğindeki
Öğelere Modifier.fillMaxColumnWidth()
uygulanırken, uygulanmadığı ve
sarmalayın.
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ı (sarmalanan öğeler) |
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Düzen oluşturmayla ilgili temel bilgiler
- Oluşturma'da ConstraintLayout
- Düzenleyici işlemleri {:#editor-actions}