Compose'da akış düzenleri

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.
Şekil 1. FlowRow örneği

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")
    }
}
FlowLayoutSnippets.kt

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 FlowRow hücresinde ayarlandı

Sonuç

Arrangement.Start (Default)

 Başlangıcı olan öğeler

Arrangement.SpaceBetween

 Öğelerin aralarında boşluk bırakacak şekilde ayarlanması

Arrangement.Center

 Ortada düzenlenen öğeler

Arrangement.End

 Sona eklenen öğeler

Arrangement.SpaceAround

 Çevrelerinde alan olacak şekilde düzenlenmiş öğeler

Arrangement.spacedBy(8.dp)

 Belirli bir dp aralığındaki öğeler

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 FlowRow tarihinde ayarlandı

Sonuç

Arrangement.Top (Default)

 Kapsayıcı üst düzenlemesi

Arrangement.Bottom

 Kapsayıcı alt düzenlemesi

Arrangement.Center

 Konteyner merkezi düzenlemesi

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:

FlowRow için dikey hizalama ayarlandı

Sonuç

Alignment.Top (Default)

 Üste hizalanan öğeler

Alignment.Bottom

 Alta hizalanan öğeler

Alignment.CenterVertically

 Ortaya hizalanan öğeler

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ı

maxItemsInEachRow = 3
Akış satırında maksimum ayarlanmadı Akış satırında maksimum öğe ayarlandı

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")
}
FlowLayoutSnippets.kt

Bağlamsal akış satırları örneği.
Şekil 2. 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
Şekil 3. Izgara oluşturmak için FlowRow kullanılıyor

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)
    }
}
FlowLayoutSnippets.kt

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
Şekil 4. Son öğenin tam genişliği kapladığı bir ızgara oluşturmak için FlowRow kullanılıyor

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ü 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
Şekil 5. Alternatif boyutlara sahip satırlarla 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))
        }
    }
}
FlowLayoutSnippets.kt

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))
}
FlowLayoutSnippets.kt

FlowRow: Tüm kapsayıcı genişliğinin 0,7 kadarını içeren orta öğe.

 Akış satırlı kesirli genişlik

Row: Ortadaki öğe, kalan Row genişliğinin %0,7'sini kapsıyor.

 Satırlı kesirli genişlik

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)
            )
        }
    }
}
FlowLayoutSnippets.kt

Her öğeye Modifier.fillMaxColumnWidth() uygulandı

 dolguMaksimumSütunGenişliği

Genişlik değişikliği ayarlanmadı (sarmalanan öğeler)

 Dolgu maks. sütun genişliği ayarlanmadı
ziyaret edin.
Önceki
Çağrı Cihazı
Sonraki
Özel düzenler