أداة تقسيم الشاشة

الفواصل هي خطوط رفيعة تفصل العناصر في قوائم أو حاويات أخرى. يمكنك تنفيذ الفواصل في تطبيقك باستخدام العنصرَين HorizontalDivider وVerticalDivider القابلَين للإنشاء.

• HorizontalDivider: يمكنك فصل العناصر في عمود.
• VerticalDivider: فصل العناصر على التوالي

مساحة عرض واجهة برمجة التطبيقات

يوفر كلا المكونين معلمات لتعديل مظهرهما:

• 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
• التصميم المتعدد الأبعاد - فواصل