يركز التخطيط الأساسي جزء الدعم انتباه المستخدم على الصفحة الرئيسية للتطبيق المحتوى مع عرض المحتوى الداعم ذي الصلة على سبيل المثال، إن الوظيفة الرئيسية المحتوى: قد يعرض جزء المحتوى معلومات حول فيلم تم عرضه مؤخرًا بينما قائمة بالأفلام الأخرى التي لها موضوع مماثل أو أو بطولة الممثلين. لمزيد من المعلومات حول لوحة الدعم التخطيط المتعارف عليه، فراجع إرشادات الأجزاء الداعمة للمواد 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
- التخطيط التكيّفي - التخطيطات التكيفية، مثل
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() }, )