קו מפריד

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

ממשק API

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

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

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

בדוגמה הבאה מוצגת הטמעה של הרכיב 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")
    }
}

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

מסך של אפליקציה ל-Android שבו מוצגים שני פריטים של טקסט, 'הפריט הראשון ברשימה' ו 'הפריט השני ברשימה', מופרדים על ידי קו אופקי דק.
איור 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")
    }
}

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

מסך של אפליקציה ל-Android שבו מוצגים שני פריטים של טקסט, 'הפריט הראשון בשורה' ו 'הפריט השני בשורה', מופרדים על ידי קו אנכי דק.
איור 2. קו מפריד אנכי שמפריד בין שני רכיבי טקסט.

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