Öğe davranışını ayarlama

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

Ürün 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)
        }
    )
}

İ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) }
    )
}
 Temel olarak Auto kullanılarak öğeler kendi boyutlarına göre boyutlandırılır.

Düzeltildi dp

Dp cinsinden sabit bir boyut.

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(200.dp) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(100.dp) }
    )
}
 Temel kullanılarak sabit bir dp değerine göre boyutlandırılan öğeler.

Yüzde

Kapsayıcı boyutunun yüzdesi.

 
FlexBox {
    RedRoundedBox(
        Modifier.flex { basis(0.7f) }
    )
    BlueRoundedBox(
        Modifier.flex { basis(0.3f) }
    )
}
 Temel kullanılarak kapsayıcı boyutunun yüzdesi olarak boyutlandırılan öğeler.

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, değerin pozitif olması koşuluyla gerçek değer önemli değildir. Alt öğe, tüm ek alanı alır.

Resimlerde, kapsayıcı 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")
}

Her çocuğun temel değeri 100dp'dır. 300dp kadar ek alan var.

Büyümeden önce, 600 dp'lik bir kapsayıcıda her biri 100 dp'lik temele sahip üç öğe.

1. çocuk, boşluğu doldurmak için 300dp oranında büyür.

İlk öğe, 300 dp'lik ek alanı dolduracak şekilde büyür.

Aşağıdaki örnekte, kapsayıcı boyutu ve 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) }
    )
}

Her çocuğun temel değeri 100dp'dır. 300dp kadar ek alan var.

Büyümeden önce, 600 dp'lik bir kapsayıcıda, her biri 100 dp tabanlı ve farklı büyüme değerlerine sahip üç öğe.

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.

Öğeler, göreli büyüme değerlerine göre 300 dp'lik ek alanı dolduracak şekilde büyür.

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

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. Ancak ek alan öğelere dağıtılmak yerine alan açığı öğelere dağıtılı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ğeri 1f'e sahiptir. Bu, öğelerin eşit oranda küçüldüğü anlamına gelir.

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) }
    )
}

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

Kapsayıcı boyutu

FlexBox kullanıcı arayüzü

700dp

 700 dp'lik bir kapsayıcıda iki öğe.

500dp

 Kapsayıcı boyutu 500 dp'ye düşürüldüğünde ilk öğe küçülür.

450dp

 Kapsayıcı boyutu 450 dp'ye düşürüldüğünde ilk öğe daha da küçülür.

Öğe hizalaması

Bir öğenin çapraz eksene nasıl hizalandığını kontrol etmek için alignSelf özelliğini kullanın. Bu, öğe için kapsayıcı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 öğesinin alignItems özelliği Start olarak ayarlanmış ve beş alt öğesi var. 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) })
}

alignItems özelliğini geçersiz kılan, farklı boyutlarda beş çocuk.

Öğe sırası

Varsayılan olarak, FlexBox öğeleri kodda belirtildikleri 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. çocuktan 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)
        }
    )
}

İlki "Merhaba" metnini, ikincisi ise "Dünya" metnini içeren iki yuvarlak kutu.

Önceki
Kapsayıcı davranışını ayarlama
Sonraki
Uyarlanabilir uygulamaları kullanmaya başlama