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

משתמשים ב-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 (ברירת מחדל)	משתמשים בגודל המקסימלי של הפריט. לדוגמה, הרוחב המקסימלי הפנימי של רכיב 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 של נפח אחסון נוסף. הילד או הילדה מספר 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 מקבלים (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
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