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

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

הגדרת הפרויקט

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

    [versions]
compose = "1.13.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)
}

רכיבי קומפוזבל של טקסט Hello World מוערמים זה על גבי זה בהטמעה בסיסית של FlexBox.

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

FlexBox(
    config = {
        wrap(FlexWrap.Wrap)
        gap(8.dp)
    }
) {
    // All boxes have an intrinsic width of 100.dp
    // Some grow to fill any remaining space on the row.
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    OrangeRoundedBox(modifier = Modifier.flex { grow(1.0f) })
    PinkRoundedBox(modifier = Modifier.flex { grow(1.0f) })
}

שתי שורות של פריטים צבעוניים, עם שלושה פריטים בגדלים שונים בשורה העליונה ושני פריטים בגדלים שונים בשורה התחתונה.

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

הקודם
סקירה כללית
הבא
הגדרת אופן הפעולה של המאגר