קו מפריד

חוצצים הם קווים דקים שמפרידים בין פריטים ברשימות או ברשימות אחרות קונטיינרים. אפשר להטמיע מחיצות באפליקציה באמצעות הרכיבים הניתנים לקישור HorizontalDivider ו-VerticalDivider.

• HorizontalDivider: הפרדת פריטים בעמודה.
• VerticalDivider: הפרדה בין פריטים בשורה.

ממשק API

שני הרכיבים מספקים פרמטרים לשינוי המראה שלהם:

• thickness: הפרמטר הזה מאפשר לציין את עובי הקו המפריד.
• color: משתמשים בפרמטר הזה כדי לציין את הצבע של הקו המפריד.

הערה: אפשר להשתמש בפרמטר modifier כדי לשלוט במרווח הפנימי.

דוגמה לקו מפריד אופקי

הדוגמה הבאה ממחישה הטמעה של רכיב HorizontalDivider. היא משתמשת בפרמטר thickness כדי לשלוט גובה השורה:

@Composable
fun HorizontalDividerExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        Text("First item in list")
        HorizontalDivider(thickness = 2.dp)
        Text("Second item in list")
    }
}
Divider.kt

באופן הזה נוצר קו אופקי דק בין שני רכיבי טקסט:

איור 1. קו מפריד אופקי שמפריד בין שני רכיבי טקסט.

דוגמה לקו מפריד אנכי

בדוגמה הבאה מוצגת הטמעה של הרכיב VerticalDivider. היא משתמשת בפרמטר color כדי לספק צבע לקו:

@Composable
fun VerticalDividerExample() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        Text("First item in row")
        VerticalDivider(color = MaterialTheme.colorScheme.secondary)
        Text("Second item in row")
    }
}
Divider.kt

ההטמעה הזו יוצרת קו אנכי דק בין שני רכיבי טקסט:

איור 2. קו מפריד אנכי שמפריד בין שני רכיבי טקסט.

מקורות מידע נוספים

• HorizontalDivider
• VerticalDivider
• עיצוב חומר – חוצצים