הגדרת התנהגות של פריט

אפשר להשתמש ב-Modifier.flex כדי לקבוע איך הפריט משנה את הגודל, הסדר והיישור שלו בתוך FlexBox.

גודל הפריט

כדי לשלוט בגודל של פריט, משתמשים בפונקציות basis, ‏ grow ו-shrink.

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

הגדרת הגודל הראשוני

משתמשים ב-basis כדי לציין את הגודל הראשוני של הפריט לפני שמוקצה לו שטח נוסף. אפשר לחשוב על זה בתור הגודל המועדף של הפריט.

סוג ערך	התנהגות	קטע קוד הערה: הגודל הפנימי המקסימלי של התיבות הוא 100dp	דוגמה לשימוש ברוחב מאגר של 600dp
Auto (ברירת מחדל)	שימוש בגודל המקסימלי של הפריט. לדוגמה, הרוחב הפנימי המקסימלי של רכיב ה-composable מסוג Text הוא הרוחב של כל הטקסט שלו בשורה אחת – בלי גלישת טקסט.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
תוקן dp	גודל קבוע ב-Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
אחוז	אחוז מגודל המאגר.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

אם ערך הבסיס קטן מהגודל המינימלי הפנימי של הפריט, המערכת תשתמש בגודל המינימלי הפנימי. לדוגמה, אם פריט Text שמכיל מילה דורש 50dp כדי להציג, אבל יש לו גם basis = 10.dp, נעשה שימוש בערך 50dp.

הגדלת הפריטים כשיש מקום

המאפיין grow משמש כדי לציין כמה הפריט גדל כשיש מקום נוסף. זהו המקום שנותר במאגר FlexBox אחרי שכל ערכי basis של הפריטים נוספו. הערך של grow מציין כמה מהשטח הנוסף יקבל רכיב צאצא נתון, ביחס לרכיבים האחים שלו. כברירת מחדל, הפריטים לא יגדלו.

בדוגמה הבאה מוצג FlexBox עם שלושה פריטים צאצאים. לכל אחד מהם יש ערך בסיס של 100dp. לצאצא הראשון יש ערך grow חיובי. מכיוון שיש רק צאצא אחד עם ערך grow, הערך בפועל לא רלוונטי – כל עוד הוא חיובי, הצאצא מקבל את כל המרחב הנוסף.

בתמונות מוצגת ההתנהגות של FlexBox כשגודל הקונטיינר הוא 600dp.

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

לכל צאצא יש ערך בסיס של 100dp. יש נפח אחסון נוסף של 300dp. הגודל של Child 1 גדל ב-300dp כדי למלא את המקום הנוסף.

בדוגמה הבאה, גודל מאגר התגים וגודל basis זהים. ההבדל הוא שלכל צאצא יש ערך grow שונה.

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

לכל צאצא יש ערך בסיס של 100dp. יש נפח אחסון נוסף של 300dp. ערך ההגדלה הכולל הוא 6. הגודל של הצאצא הראשון גדל ב-‎ (1 / 6) * 300 = 50dp‎ התקציב של הילד השני גדל ב-(2 חלקי 6) כפול 300 = 100dp התקציב של הילד השלישי גדל ב-‎ (3 / 6) * 300 = 150dp‎

כיווץ פריטים כשאין מספיק מקום

אפשר להשתמש במאפיין shrink כדי לציין עד כמה הפריט יתכווץ כשאין מספיק מקום לכל הפריטים בקונטיינר FlexBox. המאפיין shrink פועל באותו אופן כמו grow, אבל במקום לחלק את השטח הנוסף בין הפריטים, השטח החסר מחולק בין הפריטים. הערך של shrink מציין כמה מהמקום החסר הפריט מקבל, או במילים אחרות, כמה הפריט יתכווץ. כברירת מחדל, לפריטים יש ערך shrink של 1f, כלומר הם מתכווצים באופן שווה.

בדוגמה הבאה מוצגים שני רכיבי Text קומפוזביליים עם אותו טקסט. לצאצא הראשון יש ערך כיווץ של 1f, כלומר הוא מתכווץ כדי לספוג את כל הגירעון במקום.

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

ככל שגודל מאגר התגים מצטמצם, כך גם גודל הצאצא 1 מצטמצם.

גודל המאגר	FlexBox UI
700dp
500dp
450dp

יישור הפריטים

אפשר להשתמש ב-alignSelf כדי לקבוע איך פריט ייושר לציר הנגדי. המאפיין הזה מבטל את המאפיין alignItems של הקונטיינר של הפריט הזה. הוא כולל את כל הערכים האפשריים, בתוספת Auto, שיורש את ההתנהגות של מאגר התגים FlexBox.

לדוגמה, ב-FlexBox הזה, alignItems מוגדר ל-Start ויש לו חמישה צאצאים שמחליפים את היישור של הציר הנגדי.

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

סדר הפריטים

כברירת מחדל, FlexBox מסדר את הפריטים לפי הסדר שבו הם מוגדרים בקוד. אפשר לשנות את ההתנהגות הזו באמצעות order.

ערך ברירת המחדל של order הוא אפס, ו-FlexBox ממיין את הפריטים לפי הערך הזה בסדר עולה. כל הפריטים שיש להם ערך order זהה מסודרים באותו סדר שבו הם הוגדרו. אפשר להשתמש בערכים חיוביים ושליליים של order כדי להעביר פריטים להתחלה או לסוף של פריסה בלי לשנות את המקום שבו הם מוגדרים.

בדוגמה הבאה מוצגים שני פריטי צאצא. הראשון הוא עם ערך ברירת המחדל order של אפס, והשני הוא עם סדר של -1. אחרי המיון, Child 1 מופיע אחרי Child 2.

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