Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Kapsayıcı davranışını ayarlama

FlexBox kapsayıcısının davranışını yapılandırmak için bir FlexBoxConfig bloğu oluşturun ve config parametresini kullanarak sağlayın.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

Düzen yönünü, sarmalama davranışını, hizalamayı ve öğeler arasındaki boşlukları tanımlamak için FlexBoxConfig simgesini kullanın.

Düzen yönü

direction işlevi, öğelerin yerleştirileceği yönü belirleyen ana ekseni ayarlar. Aşağıdaki değerleri kabul eder:

Row (varsayılan): Ana ekseni yatay olarak ayarlar. Soldan sağa yerel ayarlarda bu soldan sağa, sağdan sola yerel ayarlarda ise sağdan sola olur.
RowReverse: Row yönünü tersine çevirir.
Column: Ana ekseni dikey, yukarıdan aşağıya olacak şekilde ayarlar.
ColumnReverse: Column yönünü tersine çevirir.

Öğeleri hizalama ve fazla alanı dağıtma

Aşağıdaki bölümlerde, öğelerin nasıl hizalanacağı ve ana eksen ile çapraz eksen boyunca fazladan alanın nasıl dağıtılacağı açıklanmaktadır.

Ana eksen boyunca

Öğeleri ana eksen boyunca dağıtmak için justifyContent özelliğini kullanın. Aşağıdaki tabloda, yön Row olduğunda nasıl bir davranış sergilendiği gösterilmektedir.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

Çapraz eksen boyunca

Öğeleri tek bir satırda çapraz eksen boyunca hizalamak için alignItems özelliğini kullanın. Bu davranış, alignSelf değiştiricisi kullanılarak tek tek öğeler tarafından geçersiz kılınabilir.

Aşağıdaki resimlerde, yön Row olduğunda nasıl bir davranış sergilendiği gösterilmektedir:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

Satırları çapraz eksene hizalamak ve satırlar arasındaki boşluğu eşit olarak dağıtmak için alignContent simgesini kullanın. Bu özellik yalnızca birden fazla satır olduğunda geçerlidir (kaydırma etkinleştirilmişse). Aşağıdaki resimlerde, yön Row olduğunda nasıl bir davranış sergilendiği gösterilmektedir:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

Öğeleri sarmalama

Sarma, FlexBox kapsayıcının çok satırlı olmasına olanak tanır. Bu sayede, sığmayan öğeler çapraz eksen boyunca yeni bir satıra veya sütuna taşınır. Sarma davranışını wrap kullanarak yapılandırın.

`FlexWrap` değer	`Row` yönünü kullanan örnek
`NoWrap` (varsayılan): Öğelerin kaydırılmasını önler. Ana boyut yetersizse öğeler taşar.
`Wrap`: Bir öğe (ve boşluk) için yeterli alan olmadığında çapraz eksen yönünde yeni bir satır oluşturulur. Örneğin, yön `Row` ise aşağıya yeni bir satır eklenir.
`WrapReverse`: `Wrap` ile aynıdır. Tek farkı, yeni satırın çapraz eksenin ters yönünde eklenmesidir. Örneğin, yön `Row` ise yukarıya yeni bir satır eklenir.

Aşağıdaki örnekte FlexBox sarmalama algoritmasının nasıl çalıştığı gösterilmektedir. FlexBox kapsayıcısının ana boyutu 100dp, wrap değeri FlexWrap.Wrap olarak ayarlanmış ve 8dp boşluğu var. Bu listede sırasıyla basis 20dp, 40dp ve 50dp içeren üç öğe yer alıyor.

Sırada 100dp boş yer var. 1. çocuk 20dp. Boş yer olduğundan 1. çocuk sıraya yerleştiriliyor.

FlexBox kapsayıcısına yerleştirilen ilk öğe. — **Şekil 1.** `FlexBox` kapsayıcısına yerleştirilen ilk öğe.

Sırada 80dp boş yer var. Boşluk 8dp. 2. çocuk 40dp. Gerekli alan 48dp. Alan var, bu nedenle boşluk ve 2. çocuk sıraya yerleştiriliyor.

İlk öğeden sonra FlexBox kapsayıcısına yerleştirilen ikinci öğe. — **Şekil 2.** İlk öğeden sonra `FlexBox` kapsayıcısına yerleştirilen ikinci öğe.

Satırda 32dp boş alan var. Boşluk 8dp. 3. çocuk 50dp. Gerekli alan 58dp. Mevcut satırda yeterli alan olmadığı için 3. çocuk yeni bir satıra yerleştiriliyor.

Üçüncü öğe, ilk satıra sığmadığı için yeni bir satıra yerleştirilir. — **Şekil 3.** Üçüncü öğe, ilk satıra sığmadığı için yeni bir satıra yerleştirildi.

Öğeler arasına boşluk ekleme

rowGap ve columnGap kullanarak satırlar ve sütunlar arasına boşluk ekleyin. Bu, alt öğelere aralık değiştiriciler eklemeyi önlemek için kullanışlıdır.