تتضمن معظم التطبيقات بعض الوجهات ذات المستوى الأعلى التي يمكن الوصول إليها من خلال واجهة المستخدم للتنقل الأساسية للتطبيق. في النوافذ المكثّفة، مثل الهاتف العادي العرض، يتم عرض الوجهات عادةً في شريط تنقل أسفل النافذة. في نافذة موسعة، مثل تطبيق بملء الشاشة على جهاز لوحي، فإن شريط تنقل إلى جانب التطبيق يكون عادةً خيارًا أفضل نظرًا يسهل الوصول إلى عناصر التحكم في التنقل أثناء الضغط مع الاستمرار على الجانبين الأيسر والأيمن الجهاز.
تسهيل التبديل بين التطبيقات باستخدام NavigationSuiteScaffold
بين واجهات المستخدم للتنقل من خلال عرض واجهة مستخدم التنقل المناسبة القابلة للإنشاء
بناءً على WindowSizeClass
. ويتضمن ذلك بشكل ديناميكي
تغيير واجهة المستخدم أثناء تغييرات حجم نافذة بيئة التشغيل. السلوك الافتراضي هو
تُظهر أيًا من مكونات واجهة المستخدم التالية:
- شريط التنقل إذا كان العرض أو الارتفاع مضغوطًا أو إذا كان الجهاز في وضع "التثبيت على سطح مستوٍ"
- شريط التنقّل لكل الخدمات الأخرى
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=2&hl=ar)
NavigationSuiteScaffold
شريط تنقل في نوافذ مضغوطة.
![](https://developer.android.google.cn/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=2&hl=ar)
NavigationSuiteScaffold
" شريط تنقُّل في النوافذ الموسّعة.
إضافة التبعيات
NavigationSuiteScaffold
هي جزء من
حزمة التنقّل التكيُّفي في Material3
المكتبة. أضِف تبعية للمكتبة في ملف build.gradle
لتطبيقك.
أو الوحدة:
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
Groovy
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
إنشاء سقالة
الجزآن الرئيسيان في "NavigationSuiteScaffold
" هما عناصر حزمة التنقّل.
ومحتوى الوجهة المحدّدة. يمكنك تحديد
عناصر حزمة التنقل في عنصر قابل للإنشاء، ولكن من الشائع أن يتم تحديد هذه
في مكان آخر، على سبيل المثال، في تعداد:
enum class AppDestinations( @StringRes val label: Int, val icon: ImageVector, @StringRes val contentDescription: Int ) { HOME(R.string.home, Icons.Default.Home, R.string.home), FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites), SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping), PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile), }
لاستخدام NavigationSuiteScaffold
، يجب تتبُّع الوجهة الحالية التي
يمكنك القيام به باستخدام rememberSaveable
:
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
في المثال التالي، معلمة navigationSuiteItems
(النوع
يستخدم NavigationSuiteScope
دالة item
لتحديد واجهة المستخدم للتنقل لوجهة فردية. واجهة المستخدم الوجهة هي
المستخدم عبر أشرطة التنقل والقضبان والأدراج. لإنشاء عناصر التنقل،
تكرار حلقي AppDestinations
(الموضح في المقتطف السابق):
NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it } ) } } ) { // TODO: Destination content. }
في محتوى الوجهة lambda، استخدِم القيمة currentDestination
من أجل
لتحديد واجهة المستخدم التي تريد عرضها. إذا كنت تستخدم مكتبة تنقُّل في تطبيقك، استخدِمها
هنا لعرض الوجهة المناسبة. يمكن أن تكفي عبارة "متى" في:
NavigationSuiteScaffold( navigationSuiteItems = { /*...*/ } ) { // Destination content. when (currentDestination) { AppDestinations.HOME -> HomeDestination() AppDestinations.FAVORITES -> FavoritesDestination() AppDestinations.SHOPPING -> ShoppingDestination() AppDestinations.PROFILE -> ProfileDestination() } }
تغيير الألوان
ينشئ NavigationSuiteScaffold
Surface
على المنطقة بأكملها.
وتشغل السقالة، عادةً النافذة الكاملة. علاوة على ذلك، تحتوي السقالة
ترسم واجهة مستخدم معيّنة للتنقّل، مثل NavigationBar
يستخدم كل من مساحة العرض وواجهة المستخدم الخاصة بالتنقّل القيم المحدّدة في
، ولكن يمكنك إلغاء قيم المظاهر.
تحدّد المعلَمة containerColor
لون السطح. الإعداد التلقائي
هو لون خلفية نظام الألوان لديك. المَعلمة contentColor
لون المحتوى على ذلك السطح. الإعداد الافتراضي هو "تشغيل" اللون
لما تم تحديده لـ containerColor
. على سبيل المثال، إذا كانت containerColor
يستخدم اللون background
، ثم يستخدم contentColor
اللون onBackground
.
الاطّلاع على تصاميم Material Design 3 في Compose
لمزيد من التفاصيل حول كيفية عمل نظام الألوان. عند تجاوز هذه القيم،
استخدام القيم المحدّدة في المظهر لكي يتوافق تطبيقك مع العرض الداكن والفاتح
وسائل النقل:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary, ) { // Content... }
يتم رسم واجهة المستخدم للتنقّل في واجهة NavigationSuiteScaffold
.
يتم توفير القيم الافتراضية لألوان واجهة المستخدم من خلال
NavigationSuiteDefaults.colors()
، ولكن
يمكن أن تلغي هذه القيم أيضًا. على سبيل المثال، إذا كنت تريد خلفية
شريط التنقل ليكون شفافًا ولكن تكون القيم الأخرى هي القيم الافتراضية،
إلغاء navigationBarContainerColor
:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
في النهاية، يمكنك تخصيص كل عنصر في واجهة مستخدم التنقّل. عند استدعاء
item
، يمكنك تمرير مثيل
NavigationSuiteItemColors
تحدد الفئة
ألوان العناصر في شريط التنقل، وشريط التنقل،
الدرج. وهذا يعني أنه يمكن أن يكون لديك ألوان متطابقة عبر كل نوع من أنواع واجهة المستخدم للتنقل،
أو يمكنك تغيير الألوان حسب احتياجاتك. حدد الألوان في
مستوى NavigationSuiteScaffold
لاستخدام مثيل الكائن نفسه لكل العناصر
واستدعاء الدالة NavigationSuiteDefaults.itemColors()
لإلغاء فقط
الإعدادات التي تريد تغييرها:
val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors( navigationBarItemColors = NavigationBarItemDefaults.colors( indicatorColor = MaterialTheme.colorScheme.primaryContainer, selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer ), ) NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it }, colors = myNavigationSuiteItemColors, ) } }, ) { // Content... }
تخصيص أنواع التنقّل
يؤدي السلوك التلقائي لميزة NavigationSuiteScaffold
إلى تغيير واجهة المستخدم للتنقّل.
بناءً على حجم النافذة
الصفوف. ومع ذلك،
قد ترغب في إلغاء هذا السلوك. على سبيل المثال، إذا كان تطبيقك يعرض واحدة
جزء كبير من المحتوى للخلاصة، يمكن للتطبيق استخدام تنقل دائم
الدرج للنوافذ الموسعة ولكن مع استمرار الرجوع إلى السلوك الافتراضي
فئات النوافذ الصغيرة والمتوسطة الحجم:
val adaptiveInfo = currentWindowAdaptiveInfo() val customNavSuiteType = with(adaptiveInfo) { if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) { NavigationSuiteType.NavigationDrawer } else { NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo) } } NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, layoutType = customNavSuiteType, ) { // Content... }
مصادر إضافية
الاطلاع على إرشادات التصميم المتعدد الأبعاد:
يمكنك الاطّلاع على مكوّنات المكتبة التالية البالغ عددها androidx.compose.material3
: