Öğe davranışını ayarlama

Bir öğenin FlexBox içinde nasıl boyut, sıra değiştireceğini ve hizalanacağını kontrol etmek için Modifier.flex kullanın.

Öğe boyutu

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

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

Başlangıç boyutunu ayarlama

Ek alan dağıtılmadan önce öğenin ilk 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 iç boyutu 100dp	Kapsayıcı genişliğinin kullanıldığı örnek 600dp
Auto (varsayılan)	Öğenin maksimum iç boyutunu kullanın. Örneğin, bir Text bileşeninin maksimum iç genişliği, tüm metninin tek bir satırdaki genişliğidir (kaydırma yapılmaz).	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
dp düzeltildi	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 içsel minimum boyutundan küçükse bunun yerine içsel minimum boyut kullanılır. Örneğin, bir kelime içeren Text öğesinin gösterilmesi için 50dp gerekiyorsa ancak basis = 10.dp de varsa 50dp değeri kullanılır.

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

Ekstra alan olduğunda bir öğenin 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 alt öğenin kardeşlerine göre ek alanın ne kadarını alacağını gösterir. Varsayılan olarak öğeler büyümez.

Aşağıdaki örnekte üç alt öğesi olan bir FlexBox gösterilmektedir. Her birinin temel değeri 100dp. İlk alt öğenin grow değeri pozitif. grow değerine sahip tek bir alt öğe olduğundan gerçek değer önemsizdir. Pozitif olduğu sürece alt öğe tüm ek alanı alır.

Resimlerde, kapsayıcı boyutu 600dp olduğunda FlexBox davranış gösterilmektedir.

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

Her çocuğun temel değeri 100dp. 300dp ek alan var. 1. alt öğe, ek alanı doldurmak için 300dp oranında büyür.

Aşağıdaki örnekte, kapsayıcı boyutu ile basis boyutu aynıdır. Aradaki fark, her alt öğenin 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. 300dp ek alan var. Toplam büyüme değeri 6'dır. 1. alt hesap (1 / 6) * 300 = 50dp oranında büyür. 2. çocuk (2 / 6) * 300 = 100dp oranında büyür. 3. alt öğe (3 / 6) * 300 = 150dp oranında büyür.

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

FlexBox kapsayıcısında tüm öğeler için yeterli alan olmadığında bir öğenin ne kadar küçüleceğini belirtmek için shrink özelliğini kullanın. shrink, grow ile aynı şekilde çalışır. Tek fark, öğelere ekstra alan dağıtmak yerine alan açığının öğelere dağıtılmasıdır. shrink değeri, öğenin alan açığının ne kadarını alacağını veya daha doğrusu öğenin ne kadar küçüleceğini belirtir. Varsayılan olarak öğelerin shrink değeri 1f olur. Bu, öğelerin eşit şekilde küçüleceği anlamına gelir.

Aşağıdaki örnekte, aynı metne sahip iki Text bileşeni gösterilmektedir. İlk alt öğenin küçülme değeri 1f olduğundan, tüm alan açığını kapatmak için küçülür.

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. alt öğe de küçülür.

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

Öğe hizalama

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

Örneğin, bu FlexBox öğesinin alignItems değeri Start olarak ayarlanmış ve çapraz eksen hizalamasını geçersiz kılan beş alt öğesi var.

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 tanımlandıkları sırayla düzenler. order politikasını kullanarak bu davranışı geçersiz kılabilirsiniz.

order için varsayılan değer sıfırdır ve FlexBox, öğeleri bu değere göre artan düzende sıralar. Aynı order değerine sahip öğeler, tanımlandıkları sırayla düzenlenir. Öğeleri, bildirildikleri yeri değiştirmeden bir 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. İlk kuralın varsayılan sırası order, ikinci kuralın sırası ise -1. Sıralama işleminden sonra, Alt 1, Alt 2'den sonra görünür.

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