דף זה תורגם על ידי Cloud Translation API.

פריסות זרימה ב'כתיבה'

FlowRow ו-FlowColumn הם רכיבים שאפשר לשלב, בדומה ל-Row ול-Column, אבל הם שונים בכך שהפריטים עוברים לשורה הבאה כשנגמר המקום בקונטיינר. כך נוצרות כמה שורות או עמודות. אפשר גם לקבוע את מספר הפריטים בשורה באמצעות ההגדרה maxItemsInEachRow או maxItemsInEachColumn. לרוב אפשר להשתמש ב-FlowRow וב-FlowColumn כדי ליצור פריסות עם תמיכה בהתאמה לעומס (responsive). התוכן לא ייחתך אם הפריטים גדולים מדי למאפיין אחד, ושימוש בשילוב של maxItemsInEach* עם Modifier.weight(weight) יכול לעזור ליצור פריסות שממלאות או מרחיבות את רוחב השורה או העמודה לפי הצורך.

דוגמה טיפוסית היא צ'יפ או ממשק משתמש לסינון:

5 צ'יפים ב-FlowRow, שמוצגים בשורה הבאה כשאין יותר מקום זמין. — **איור 1.** דוגמה ל-`FlowRow`

שימוש בסיסי

כדי להשתמש ב-FlowRow או ב-FlowColumn, יוצרים את הרכיבים האלה ומציבים בתוכם את הפריטים שצריכים לפעול לפי התהליך הרגיל:

@Composable
private fun FlowRowSimpleUsageExample() {
    FlowRow(modifier = Modifier.padding(8.dp)) {
        ChipItem("Price: High to Low")
        ChipItem("Avg rating: 4+")
        ChipItem("Free breakfast")
        ChipItem("Free cancellation")
        ChipItem("£50 pn")
    }
}FlowLayoutSnippets.kt

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

תכונות של פריסה רציפה

למבנה 'זרימה' יש את המאפיינים והתכונות הבאים, שבעזרתם אפשר ליצור פריסות שונות באפליקציה.

סידור הציר הראשי: סידור אופקי או אנכי

הציר הראשי הוא הציר שבו הפריטים מסודרים (לדוגמה, ב-FlowRow הפריטים מסודרים אופקית). הפרמטר horizontalArrangement ב-FlowRow קובע את האופן שבו שטח פנוי מחולק בין הפריטים.

בטבלה הבאה מוצגות דוגמאות להגדרת horizontalArrangement בפריטים של FlowRow:

ההגדרה של הפריסה האופקית היא `FlowRow`	התוצאה
`Arrangement.Start` (`Default`)
`Arrangement.SpaceBetween`
`Arrangement.Center`
`Arrangement.End`
`Arrangement.SpaceAround`
`Arrangement.spacedBy(8.dp)`

ל-FlowColumn יש אפשרויות דומות ב-verticalArrangement, עם הערך Arrangement.Top כברירת מחדל.

פריסת צירים חוצים

ציר הצלב הוא הציר בכיוון ההפוך לציר הראשי. לדוגמה, ב-FlowRow, זהו הציר האנכי. כדי לשנות את אופן הסידור של התוכן הכולל בתוך הקונטיינר בציר העובר, משתמשים ב-verticalArrangement במקום ב-FlowRow וב-horizontalArrangement במקום ב-FlowColumn.

בטבלה הבאה מוצגות דוגמאות להגדרת verticalArrangement שונה בפריטים עבור FlowRow:

הפריסה האנכית מוגדרת ב-`FlowRow`	תוצאה
`Arrangement.Top` (`Default`)
`Arrangement.Bottom`
`Arrangement.Center`

ל-FlowColumn יש אפשרויות דומות ב-horizontalArrangement. ברירת המחדל של הסדר של ציר הצלב היא Arrangement.Start.

יישור של פריטים בודדים

יכול להיות שתרצו למקם פריטים בודדים בשורה עם התאמות שונות. ההבדל בין verticalArrangement ל-horizontalArrangement הוא שהערך הזה מיישר את הפריטים בתוך השורה הנוכחית. אפשר להחיל את זה באמצעות Modifier.align().

לדוגמה, כשהפריטים ב-FlowRow הם בגבהים שונים, השורה מקבלת את הגובה של הפריט הכי גדול ומחילה את Modifier.align(alignmentOption) על הפריטים:

היישור האנכי מוגדר כ-`FlowRow`	תוצאה
`Alignment.Top` (`Default`)
`Alignment.Bottom`
`Alignment.CenterVertically`

ל-FlowColumn יש אפשרויות דומות. ערך ברירת המחדל הוא Alignment.Start.

מספר הפריטים המקסימלי בשורה או בעמודה

הפרמטרים maxItemsInEachRow או maxItemsInEachColumn מגדירים את מספר הפריטים המקסימלי בציר הראשי שאפשר להציג בשורה אחת לפני שמעבירים אותם לשורה הבאה. הערך שמוגדר כברירת מחדל הוא Int.MAX_INT, שמאפשר להוסיף כמה פריטים שאפשר, כל עוד הם מתאימים לקו.

לדוגמה, הגדרת maxItemsInEachRow מאלצת את הפריסה הראשונית לכלול רק 3 פריטים:

לא הוגדר ערך מקסימלי	`maxItemsInEachRow = 3`

משקלים של פריטים

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

לדוגמה, אם יש לכם 4 פריטים שנמצאים באותה שורה, ולכל אחד מהם משקל שונה של 1f, 2f, 1f ו-3f, המשקל הכולל הוא 7f. המרחב שנותר בשורה או בעמודה יחולק ב-7f. לאחר מכן, רוחב כל פריט יחושב באמצעות: weight * (remainingSpace / totalWeight).

אפשר להשתמש בשילוב של Modifier.weight ופריטים מקסימליים עם FlowRow או FlowColumn כדי ליצור פריסה שדומה לרשת. הגישה הזו שימושית ליצירת פריסות רספונסיביות שמתאימות לגודל המכשיר.

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

רשת שנוצרה עם שורת זרימה — **איור 2.** שימוש ב-`FlowRow` כדי ליצור רשת

כדי ליצור רשת של פריטים בגדלים זהים, אפשר לבצע את הפעולות הבאות:

val rows = 3
val columns = 3
FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = rows
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .weight(1f)
        .clip(RoundedCornerShape(8.dp))
        .background(MaterialColors.Blue200)
    repeat(rows * columns) {
        Spacer(modifier = itemModifier)
    }
}FlowLayoutSnippets.kt

חשוב לדעת: אם מוסיפים פריט נוסף ומחזורים אותו 10 פעמים במקום 9, הפריט האחרון תופס את כל העמודה האחרונה, כי המשקל הכולל של השורה כולה הוא 1f:

הצגת הפריט האחרון בגודל מלא בתצוגת רשת — **איור 3.** שימוש ב-`FlowRow` כדי ליצור רשת שבה הפריט האחרון תופס את כל הרוחב

אפשר לשלב משקלים עם Modifiers אחרים, כמו Modifier.width(exactDpAmount), Modifier.aspectRatio(aspectRatio) או Modifier.fillMaxWidth(fraction). כל המשתנים האלה פועלים יחד כדי לאפשר שינוי גודל רספונסיבי של פריטים בתוך FlowRow (או FlowColumn).

אפשר גם ליצור רשת לסירוגין של פריטים בגדלים שונים, שבה שני פריטים תופסים כל אחד חצי מהרוחב, ופריט אחד תופס את כל רוחב העמודה הבאה:

רשת לסירוגין עם שורת זרימה — **איור 4.** `FlowRow` עם שורות בגדלים משתנים

אפשר לעשות זאת באמצעות הקוד הבא:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 2
) {
    val itemModifier = Modifier
        .padding(4.dp)
        .height(80.dp)
        .clip(RoundedCornerShape(8.dp))
        .background(Color.Blue)
    repeat(6) { item ->
        // if the item is the third item, don't use weight modifier, but rather fillMaxWidth
        if ((item + 1) % 3 == 0) {
            Spacer(modifier = itemModifier.fillMaxWidth())
        } else {
            Spacer(modifier = itemModifier.weight(0.5f))
        }
    }
}FlowLayoutSnippets.kt

שינוי גודל חלקי

באמצעות Modifier.fillMaxWidth(fraction) אפשר לציין את הגודל של המאגר שבו הפריט אמור להימצא. ההבדל הוא ש-Row/Column תופס אחוז מהרוחב שנותר, במקום את רוחב המאגר כולו, בניגוד לאופן שבו Modifier.fillMaxWidth(fraction) פועל כשמחילים אותו על Row או על Column.

לדוגמה, הקוד הבא מניב תוצאות שונות כשמשתמשים ב-FlowRow לעומת Row:

FlowRow(
    modifier = Modifier.padding(4.dp),
    horizontalArrangement = Arrangement.spacedBy(4.dp),
    maxItemsInEachRow = 3
) {
    val itemModifier = Modifier
        .clip(RoundedCornerShape(8.dp))
    Box(
        modifier = itemModifier
            .height(200.dp)
            .width(60.dp)
            .background(Color.Red)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .fillMaxWidth(0.7f)
            .background(Color.Blue)
    )
    Box(
        modifier = itemModifier
            .height(200.dp)
            .weight(1f)
            .background(Color.Magenta)
    )
}FlowLayoutSnippets.kt

`FlowRow`: הפריט האמצעי עם 0.7 חלקים מרוחב הקונטיינר כולו.
`Row`: הפריט האמצעי תופס 0.7 אחוז מהרוחב הנותר של `Row`.

`fillMaxColumnWidth()` וגם `fillMaxRowHeight()`

החלת Modifier.fillMaxColumnWidth() או Modifier.fillMaxRowHeight() על פריט בתוך FlowColumn או FlowRow מבטיחה שהפריטים באותה עמודה או שורה יתפסו את אותו רוחב או גובה כמו הפריט הגדול ביותר בעמודה או בשורה.

לדוגמה, בדוגמה הזו נעשה שימוש ב-FlowColumn כדי להציג את רשימת הגרסאות של Android. אפשר לראות את ההבדל בין רוחב כל פריט כשהתכונה Modifier.fillMaxColumnWidth() חלה על הפריטים לבין רוחב הפריט כשהתכונה לא חלה עליו והפריטים מנותבים.

FlowColumn(
    Modifier
        .padding(20.dp)
        .fillMaxHeight()
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    maxItemsInEachColumn = 5,
) {
    repeat(listDesserts.size) {
        Box(
            Modifier
                .fillMaxColumnWidth()
                .border(1.dp, Color.DarkGray, RoundedCornerShape(8.dp))
                .padding(8.dp)
        ) {

            Text(
                text = listDesserts[it],
                fontSize = 18.sp,
                modifier = Modifier.padding(3.dp)
            )
        }
    }
}FlowLayoutSnippets.kt