يركز التخطيط الأساسي للجزء الداعم على اهتمام المستخدم بالمحتوى الرئيسي لتطبيقك مع عرض المحتوى الداعم ذي الصلة أيضًا. على سبيل المثال، قد يعرض جزء المحتوى الرئيسي معلومات عن فيلم أخير بينما تعرض اللوحة الداعمة قائمة بالأفلام الأخرى التي لها موضوع مماثل أو المخرج نفسه أو ممثلون بطولة. للمزيد من المعلومات حول التخطيط الأساسي للجزء الداعم، يُرجى الاطّلاع على إرشادات الأجزاء المتوافقة مع المادة 3.
تنفيذ جزء داعم
تتألف SupportingPaneScaffold
من ما يصل إلى ثلاث لوحات: جزء رئيسي ولوحة داعمة ولوحة إضافية اختيارية. تتعامل السقالة مع جميع العمليات الحسابية
لتخصيص مساحة النافذة للأجزاء الثلاثة. على الشاشات الكبيرة، تعرض السقالة الجزء الرئيسي مع الجزء الداعم على الجانب. على الشاشات الصغيرة، تعرض المنصّة إما ملء الشاشة الرئيسي أو الداعم.
إضافة التبعيات
SupportingPaneScaffold
هي جزء من
مكتبة التصميم التكيّفي في Material 3.
أضِف التبعيات الثلاثة التالية ذات الصلة إلى ملف build.gradle
في تطبيقك أو وحدتك:
Kotlin
implementation("androidx.compose.material3.adaptive:adaptive") implementation("androidx.compose.material3.adaptive:adaptive-layout") implementation("androidx.compose.material3.adaptive:adaptive-navigation")
رائع
implementation 'androidx.compose.material3.adaptive:adaptive' implementation 'androidx.compose.material3.adaptive:adaptive-layout' implementation 'androidx.compose.material3.adaptive:adaptive-navigation'
- تكيّفية: وحدات أساسية منخفضة المستوى، مثل
HingeInfo
وPosture
- تكيّفي-layout - التنسيقات التكيُّفية، مثل
SupportingPaneScaffold
- التنقل التكيفية - عناصر قابلة للإنشاء للتنقل داخل الأجزاء وبينها
إنشاء مستكشف وسقالات
في النوافذ الصغيرة، يتم عرض لوحة واحدة فقط في كل مرة، لذا استخدِم ThreePaneScaffoldNavigator
للانتقال من وإلى اللوحات. إنشاء مثيل للمستكشف باستخدام
rememberSupportingPaneScaffoldNavigator
.
للتعامل مع إيماءات الرجوع، استخدِم BackHandler
التي تتحقّق من
canNavigateBack()
وتتصل بـ navigateBack()
:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() }
تتطلّب السلاسة عنصر PaneScaffoldDirective
تتحكّم في
كيفية تقسيم الشاشة وحجم التباعد الذي يجب استخدامه، وThreePaneScaffoldValue
التي توفّر الحالة
الحالية للأجزاء (مثل ما إذا كانت موسّعة أو مخفية). بالنسبة إلى السلوك التلقائي،
استخدِم رمزَي التنقّل scaffoldDirective
وscaffoldValue
على التوالي:
SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { /*...*/ }, supportingPane = { /*...*/ }, )
اللوحة الرئيسية والجزء الداعم هما جزءان قابلان للإنشاء يتضمّنان المحتوى الخاص بك. استخدِم AnimatedPane
لتطبيق الصور المتحركة التلقائية في اللوحة أثناء التنقّل. استخدِم قيمة العمود الأساسي للتأكّد مما إذا كانت اللوحة الداعمة مخفيّة أم لا. وفي حال كان الأمر كذلك، يمكنك عرض زر يستدعي navigateTo(ThreePaneScaffoldRole.Secondary)
لعرض اللوحة الداعمة.
في ما يلي تنفيذ كامل للأداة الأساسية:
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Main pane content if (navigator.scaffoldValue[SupportingPaneScaffoldRole.Supporting] == PaneAdaptedValue.Hidden) { Button( modifier = Modifier.wrapContentSize(), onClick = { navigator.navigateTo(SupportingPaneScaffoldRole.Supporting) } ) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } }, supportingPane = { AnimatedPane(modifier = Modifier.safeContentPadding()) { // Supporting pane content Text("Supporting pane") } }, )
استخراج الجزء القابل للإنشاء
استخرِج الأجزاء الفردية من SupportingPaneScaffold
في العناصر
القابلة للإنشاء كي تكون قابلة لإعادة الاستخدام والاختبار. استخدِم ThreePaneScaffoldScope
للوصول إلى AnimatedPane
إذا كنت تريد استخدام الصور المتحركة التلقائية:
@Composable fun ThreePaneScaffoldScope.MainPane( shouldShowSupportingPaneButton: Boolean, onNavigateToSupportingPane: () -> Unit, modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Main pane content if (shouldShowSupportingPaneButton) { Button(onClick = onNavigateToSupportingPane) { Text("Show supporting pane") } } else { Text("Supporting pane is shown") } } } @Composable fun ThreePaneScaffoldScope.SupportingPane( modifier: Modifier = Modifier, ) { AnimatedPane(modifier = modifier.safeContentPadding()) { // Supporting pane content Text("This is the supporting pane") } }
يؤدّي استخراج الأجزاء إلى عناصر قابلة للإنشاء إلى تسهيل استخدام
SupportingPaneScaffold
(مقارنة ما يلي بالتنفيذ الكامل
لأداة الإنشاء في القسم السابق):
val navigator = rememberSupportingPaneScaffoldNavigator() BackHandler(navigator.canNavigateBack()) { navigator.navigateBack() } SupportingPaneScaffold( directive = navigator.scaffoldDirective, value = navigator.scaffoldValue, mainPane = { MainPane( shouldShowSupportingPaneButton = navigator.scaffoldValue.secondary == PaneAdaptedValue.Hidden, onNavigateToSupportingPane = { navigator.navigateTo(ThreePaneScaffoldRole.Secondary) } ) }, supportingPane = { SupportingPane() }, )