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

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