Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

הגדרת אופן הפעולה של המאגר

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

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

משתמשים ב-FlexBoxConfig כדי להגדיר את כיוון הפריסה, את אופן הגלישה, את היישור ואת הרווחים בין הפריטים.

כיוון הפריסה

הפונקציה direction מגדירה את הציר הראשי, שקובע את הכיוון שבו הפריטים מוצגים. אפשר להזין בו את הערכים הבאים:

‫Row (ברירת מחדל): מגדיר את הציר הראשי כאופקי. במקומות שבהם הכיוון הוא משמאל לימין, הכיוון יהיה משמאל לימין, ולהפך במקומות שבהם הכיוון הוא מימין לשמאל.
‫RowReverse: הופך את הכיוון של Row.
‫Column: מגדיר את הציר הראשי כאנכי, מלמעלה למטה.
‫ColumnReverse: הופך את הכיוון של Column.

יישור פריטים וחלוקת רווחים נוספים

בקטעים הבאים מוסבר איך ליישר פריטים ולחלק את הרווח הנוסף לאורך הציר הראשי והציר המשני.

לאורך הציר הראשי

משתמשים ב-justifyContent כדי לפזר פריטים לאורך הציר הראשי. בטבלה הבאה מוצגת ההתנהגות כשהכיוון הוא Row.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

לאורך הציר הניצב

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

בתמונות הבאות מוצגת ההתנהגות כשהכיוון הוא Row:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

משתמשים בערך alignContent כדי ליישר שורות לציר המשני ולחלק את הרווח הנוסף בין השורות. המאפיין הזה רלוונטי רק כשיש כמה שורות (הגלישה מופעלת). בתמונות הבאות מוצגת ההתנהגות כשכיוון הכתיבה הוא Row:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

הצגת הפריטים בכמה שורות

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

ערך `FlexWrap`	דוגמה לשימוש בתג direction‏ `Row`
‫`NoWrap` (ברירת מחדל): הפריטים לא נשברים לשורה חדשה. אם הגודל הראשי לא מספיק, הפריטים גולשים.
‫`Wrap`: אם אין מספיק מקום לפריט (בתוספת רווח), נוצרת שורה חדשה בכיוון של הציר הניצב. לדוגמה, אם הכיוון הוא `Row`, שורה חדשה נוספת מתחת.
‫`WrapReverse`: כמו `Wrap`, אבל השורה החדשה מתווספת בכיוון ההפוך לציר הניצב. לדוגמה, אם הכיוון הוא `Row`, שורה חדשה נוספת מעל.

בדוגמה הבאה אפשר לראות איך פועל אלגוריתם העטיפה FlexBox. גודל המאגר FlexBox הוא 100dp, הערך של wrap הוא FlexWrap.Wrap והמרווח הוא 8dp. המאגר מכיל שלושה פריטים עם הערכים basis 20dp, 40dp ו-50dp בהתאמה.

יש 100dp מקומות פנויים בתור. ילד/ה 1 הוא/היא 20dp. יש מקום, ולכן ילד 1 מתווסף לתור.

הפריט הראשון שמוצב בקונטיינר FlexBox. — **איור 1.** הפריט הראשון הועבר לקונטיינר `FlexBox`.

יש 80dp מקומות פנויים בתור. הפער הוא 8dp. ילד 2 הוא 40dp. המרחב הנדרש הוא 48dp. יש מקום, ולכן הפער וילד 2 ממוקמים בשורה.

הפריט השני שמוצב במאגר FlexBox אחרי הפריט הראשון. — **איור 2.** הפריט השני שמוצב בקונטיינר `FlexBox` אחרי הפריט הראשון.

יש 32dp מקומות פנויים בתור. הפער הוא 8dp. ילד/ה 3 הוא/היא 50dp. המרחב הנדרש הוא 58dp. אין מספיק מקום בשורה הנוכחית, ולכן Child 3 מופיע בשורה חדשה.