Öğe davranışını ayarlama

Bir öğenin Modifier.flex içinde boyutunun, sırasının ve hizalamasının nasıl değişeceğini kontrol etmek için FlexBox kullanın.

Ürün boyutu

Bir öğenin boyutunu kontrol etmek için basis, grow ve shrink özelliklerini kullanın.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis = FlexBasis.Auto
            grow = 1.0f
            shrink = 0.5f
        }
    )
}
FlexBoxSnippets.kt

İlk boyutu ayarlama

Ek alan dağıtılmadan önce öğenin başlangıç boyutunu belirtmek için basis kullanın. Bunu, öğenin tercih edilen boyutu olarak düşünebilirsiniz.

Değer türü	Davranış	Kod snippet'i Not: Kutuların maksimum doğal boyutu 100dp'dır.	Kapsayıcı genişliği 600dp kullanılarak oluşturulan örnek
Auto (varsayılan)	Öğenin maksimum doğal boyutunu kullanın. Örneğin, Text composable'ın maksimum doğal genişliği, tek bir satırdaki tüm metinlerinin genişliğidir (sarma yok).	FlexBox { RedRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) BlueRoundedBox( Modifier.flex { basis = FlexBasis.Auto } ) } FlexBoxSnippets.kt
Düzeltildi dp	Dp cinsinden sabit bir boyut.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Yüzde	Kapsayıcı boyutunun yüzdesi.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Temel değer, öğenin doğal minimum boyutundan küçükse bunun yerine doğal minimum boyut kullanılır. Örneğin, bir kelime içeren bir Text öğesinin gösterilmesi için 50dp gerekir ancak öğede basis = 10.dp de varsa 50dp değeri kullanılır.

Boşluk olduğunda öğeleri büyütme

Bir öğenin ek alan olduğunda ne kadar büyüyeceğini belirtmek için grow özelliğini kullanın. Bu, tüm öğelerin basis değerleri toplandıktan sonra FlexBox kapsayıcısında kalan alandır. grow değeri, belirli bir çocuğun kardeşlerine kıyasla ne kadar ek alan alacağını gösterir. Varsayılan olarak öğeler büyümez.

Aşağıdaki örnekte üç alt öğesi olan bir FlexBox gösterilmektedir. Her birinin 100dp değerinde bir temeli vardır. İlk alt öğe pozitif bir grow değerine sahip. grow değeri olan yalnızca bir alt öğe olduğundan, gerçek değerin önemi yoktur. Pozitif olduğu sürece alt öğe, tüm ek alanı alır.

Resimlerde, kapsayıcısının boyutu 600dp olduğunda FlexBox davranışının nasıl olduğu gösterilmektedir.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

Her çocuğun 100dp temel değeri vardır. 300dp kadar ek alan var. 1. çocuk, boşluğu doldurmak için 300dp kadar büyür.

Aşağıdaki örnekte, kapsayıcı boyutu ve basis boyutu aynıdır. Aradaki fark, her çocuğun farklı bir grow değerine sahip olmasıdır.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow = 1f } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow = 2f } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow = 3f } ) } FlexBoxSnippets.kt

Her çocuğun temel değeri 100dp'dır. 300dp kadar ek alan var. Toplam büyüme değeri 6'dır. 1. çocuk (1 / 6) * 300 = 50dp kadar büyür. 2. çocuk (2 / 6) * 300 = 100dp kadar büyür. 3. çocuk (3 / 6) * 300 = 150dp kadar büyür.

Yeterli alan olmadığında öğeleri küçültme

shrink özelliğini kullanarak FlexBox kapsayıcısında tüm öğeler için yeterli alan olmadığında bir öğenin ne kadar küçüleceğini belirtin. shrink, grow ile aynı şekilde çalışır. Tek fark, öğelere ek alan dağıtmak yerine alan açığının dağıtılmasıdır. shrink değeri, öğenin ne kadar alan açığı aldığını veya daha doğrusu ne kadar küçüleceğini belirtir. Öğeler varsayılan olarak shrink değerine sahiptir. Bu değer 1f'dir. Yani öğeler eşit oranda küçülür.

Aşağıdaki örnekte, aynı metne sahip iki Text composable'ı gösterilmektedir. İlk alt öğenin küçülme değeri 1f'dır. Bu, tüm boşluk açığını kapatmak için küçüldüğü anlamına gelir.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink = 1f }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink = 0f }
    )
}
FlexBoxSnippets.kt

Kapsayıcı boyutu küçüldükçe 1. çocuk da küçülür.

Kapsayıcı boyutu	FlexBox kullanıcı arayüzü
700dp
500dp
450dp

Öğe hizalaması

Bir öğenin çapraz eksene nasıl hizalandığını kontrol etmek için alignSelf özelliğini kullanın. Bu, öğenin kapsayıcısının alignItems özelliğini geçersiz kılar. Auto kapsayıcısının davranışını devralan FlexBox eklenerek aynı olası değerlere sahiptir.

Örneğin, bu FlexBox, alignItems değerini Start olarak ayarlamış ve beş alt öğe içeriyor. Bu alt öğeler, çapraz eksen hizalamasını geçersiz kılıyor.

FlexBox(
    config = {
        alignItems = FlexAlignItems.Start
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Center })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.End })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Stretch })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf = FlexAlignSelf.Baseline })
}
FlexBoxSnippets.kt

Öğe sıralaması

Varsayılan olarak, FlexBox öğeleri kodda bildirildikleri sırayla yerleştirir. order kullanarak bu davranışı geçersiz kılın.

order için varsayılan değer sıfırdır ve FlexBox, öğeleri bu değere göre artan sırada sıralar. Aynı order değerine sahip tüm öğeler, bildirildikleri sırayla düzenlenir. Öğeleri, bildirildikleri yeri değiştirmeden düzenin başına veya sonuna taşımak için negatif ve pozitif order değerlerini kullanın.

Aşağıdaki örnekte iki alt öğe gösterilmektedir. Birincisinde varsayılan order değeri sıfır, ikincisinde ise -1 değeri var. Sıralamadan sonra 1. Çocuk, 2. Çocuk'tan sonra görünüyor.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order = -1
        }
    )
}
FlexBoxSnippets.kt