FlowRow
ve FlowColumn
Row
ve Column
benzeri, ancak öğeleri farklı olan composable'lardır
Kapsayıcıda boş yer kalmadığında bir sonraki satıra geçer. 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:
![FlowRow'da 5 çip, mevcut olmadığında sonraki satıra taşan alanı gösterir
daha fazla alan kullanılabilir.](https://developer.android.com/static/develop/ui/compose/images/layouts/flow/flow_row_simple.png?authuser=5&hl=tr)
FlowRow
örneğiTemel 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 yerleşimi: yatay veya dikey düzenleme
Ana eksen, öğelerin yerleştirildiği eksendir (örneğin,
FlowRow
, öğeler yatay olarak düzenlenir). horizontalArrangement
FlowRow
parametresi, öğeler arasında boş alanın dağıtılma şeklini kontrol eder.
Aşağıdaki tabloda, öğelerde horizontalArrangement
ayarına ilişkin örnekler gösterilmektedir
FlowRow
için:
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
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. İlgili içeriği oluşturmak için kullanılan
Varsayılan değer Int.MAX_INT
olarak ayarlanmıştır. Bu değer, mümkün olduğunca çok öğeye
çizgiye sığmalarını sağlar.
Ö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ı)" değerini göstermek için veya "Daha Az Göster" düğme:
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") }
![Bağlamsal akış satırları örneği.](https://developer.android.com/static/develop/ui/compose/images/layouts/flow/flow_layout_see_more.png?authuser=5&hl=tr)
ContextualFlowRow
örneğiÜ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
kullanıldığında ağırlık,
bir öğenin yerleştirildiği satırdaki öğeler,
FlowRow
kapsayıcısı.
Ö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:
![Akış satırıyla oluşturulan ızgara](https://developer.android.com/static/develop/ui/compose/images/layouts/flow/flow_layout_grid_blue.png?authuser=5&hl=tr)
FlowRow
kullanılıyorEş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
:
![Izgaradaki son öğe tam boyutta](https://developer.android.com/static/develop/ui/compose/images/layouts/flow/flow_layout_grid_last_item_large.png?authuser=5&hl=tr)
FlowRow
kullanılıyorAğı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ü birlikte
FlowRow
(veya FlowColumn
) içinde öğelerin duyarlı bir şekilde boyutlandırılmasına olanak tanı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:
![Akış satırlı alternatif ızgara](https://developer.android.com/static/develop/ui/compose/images/layouts/flow/flow_row_alternating_grid.png?authuser=5&hl=tr)
FlowRow
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
kullanıldığında farklı sonuçlar verir
- Row
:
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
- Oluşturma düzeniyle ilgili temel bilgiler
- Compose'da ConstraintLayout
- Düzenleyici işlemleri {:#editor-actions}