علامات التبويب

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

تتيح لك علامات التبويب تنظيم مجموعات من المحتوى ذي الصلة. هناك نوعان من علامات التبويب:

• علامات التبويب الأساسية: يتم وضعها في أعلى مساحة عرض المحتوى أسفل شريط التطبيق العلوي. وتعرض هذه العناوين وجهات المحتوى الرئيسية، ويجب استخدامها عند الحاجة إلى مجموعة واحدة فقط من علامات التبويب.
• علامات التبويب الثانوية: تُستخدَم ضمن منطقة محتوى لفصل المحتوى المرتبط بشكلٍ أكبر وإنشاء تسلسل هرمي. وهي ضرورية عندما تتطلّب الشاشة أكثر من مستوى واحد من علامات التبويب.

توضِّح هذه الصفحة كيفية عرض علامات التبويب الأساسية في تطبيقك مع الشاشات ذات الصلة وعناصر التنقّل الأساسية.

واجهة برمجة التطبيقات

استخدِم العناصر القابلة للتجميع Tab وPrimaryTabRow وSecondaryTabRow لتطبيق علامات التبويب. يمثّل العنصر القابل للتجميع Tab علامة تبويب فردية ضمن الصف، ويتم استخدامه عادةً داخل PrimaryTabRow (لعلامات تبويب المؤشر الأساسي ) أو SecondaryTabRow (لعلامات تبويب المؤشر الثانوي).

تتضمّن Tab المَعلمات الرئيسية التالية:

• selected: لتحديد ما إذا كان سيتم تمييز علامة التبويب الحالية بشكل مرئي.
• onClick(): دالة LAMBDA مطلوبة تحدّد الإجراء الذي يجب تنفيذه عندما ينقر المستخدم على علامة التبويب. وعادةً ما تعالج في هذه الطريقة أحداث التنقّل أو تعدّل حالة علامة التبويب المحدّدة أو تحمّل المحتوى المرتبط بها.
• text: لعرض النص داخل علامة التبويب اختيارية:
• icon: لعرض رمز داخل علامة التبويب اختيارية:
• ‫enabled: تتحكّم هذه السمة في ما إذا كانت علامة التبويب مفعّلة ويمكن التفاعل معها. في حال ضبطه على خطأ، يتم عرض علامة التبويب في حالة إيقاف ولن تستجيب للقُرات.

مثال: التنقّل المستنِد إلى علامات التبويب

ينفِّذ المقتطف التالي شريط تنقّل في أعلى الشاشة يتضمّن علامات تبويب للتنقّل بين الشاشات المختلفة في التطبيق:

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

النقاط الرئيسية

• تعرِض PrimaryTabRow صفًا أفقيًا من علامات التبويب، مع ربط كل علامة تبويب برمز Destination.
• ينشئ val navController = rememberNavController() ويحفظ مثيلًا من NavHostController الذي يدير التنقّل ضمن NavHost.
• تدير var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } حالة علامة التبويب المحدّدة حاليًا.
  • تحصل startDestination.ordinal على الفهرس الرقمي (الموضع) لإدخال التعداد Destination.SONGS.
• عند النقر على علامة تبويب، يتم استدعاء navController.navigate(route = destination.route) للانتقال إلى الشاشة المقابلة.
• تعمل دالة onClick lambda في Tab على تعديل حالة selectedDestination لتحديد علامة التبويب التي تم النقر عليها.
• ويُستخدَم هذا الإجراء للاتصال بعنصر AppNavHost القابل للتجميع، مع تمرير navController و startDestination، لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

تعرض الصورة التالية نتيجة المقتطف السابق:

مراجع إضافية

• Material 3 - علامات التبويب
• التنقّل باستخدام Compose