תחילת העבודה עם FlexBox

בדף הזה נסביר איך להטמיע פריסות בסיסיות של FlexBox.

הגדרת פרויקט

1. מוסיפים את ספריית androidx.compose.foundation.layout ל-lib.versions.toml של הפרויקט.

   [versions]
   compose = "1.11.0-beta01"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. מוסיפים את התלות בספרייה לקובץ build.gradle.kts של האפליקציה.

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

יצירת פריסות בסיסיות של FlexBox

דוגמה 1: FlexBox מציגה שני רכיבי Text שמוצבים במרכז.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        alignItems(FlexAlignItems.Center)
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

דוגמה 2: FlexBox חמישה פריטים מוצגים בשתי שורות, והגודל שלהם משתנה באופן לא שווה כדי למלא את השטח הזמין בכל שורה. יש רווח של 8.dp בין הפריטים, גם אנכית וגם אופקית.

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.7f) })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow(0.3f) })
}
FlexBoxSnippets.kt

מידע נוסף על אופן הפעולה של FlexBox זמין במאמרים הגדרת אופן הפעולה של מאגרי תגים והגדרת אופן הפעולה של פריטים.