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

أدوات تقسيم الشاشة هي خطوط رفيعة تفصل بين العناصر في القوائم أو الحاويات الأخرى. يمكنك تنفيذ الفواصل في تطبيقك باستخدام الدالتَين المركّبتَين 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
• التصميم المتعدد الأبعاد - الفواصل