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

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

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

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

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

استخدِم الدوال المركّبة 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.
• عند النقر على علامة تبويب، تستدعي دالة onClick Lambda دالة navController.navigate(route = destination.route) للانتقال إلى الشاشة المقابلة.
• تعدِّل دالة onClick Lambda في Tab الحالة selectedDestination لتمييز علامة التبويب التي تم النقر عليها بشكل مرئي.
• وتستدعي الدالة المركّبة AppNavHost، وتمرّر navController وstartDestination لعرض المحتوى الفعلي للشاشة المحدّدة.

النتيجة

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

مراجع إضافية

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