بناء تخطيط لوحة داعمة

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

تنفيذ لوحة الدعم

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

الشكل 1. تنسيق اللوحة الداعمة

إضافة التبعيات

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()
}
SampleSupportingPaneScaffold.kt

تتطلب السقالة PaneScaffoldDirective، الذي للتحكم في طريقة تقسيم الشاشة ومقدار المسافات التي يمكن استخدامها، ThreePaneScaffoldValue، التي توفّر القيمة الحالية وحالة الأجزاء (مثلاً ما إذا كانت موسّعة أو مخفية). بالنسبة إلى التلقائي السلوك، فاستخدام scaffoldDirective في المستكشف scaffoldValue على التوالي:

SupportingPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    mainPane = { /*...*/ },
    supportingPane = { /*...*/ },
)
SampleSupportingPaneScaffold.kt

الجزء الرئيسي والجزء الداعم هما عناصر قابلة للإنشاء تحتوي على المحتوى الخاص بك. استخدام 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")
        }
    },
)
SampleSupportingPaneScaffold.kt

عناصر جزء الاستخراج القابلة للإنشاء

استخراج الأجزاء الفردية من 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")
    }
}
SampleSupportingPaneScaffold.kt

يؤدي استخراج الأجزاء إلى عناصر قابلة للإنشاء إلى تبسيط استخدام 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() },
)
SampleSupportingPaneScaffold.kt