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

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

تنفيذ جزء داعم

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

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

SupportingPaneScaffold هي جزء من مكتبة التصميم التكيّفي في Material 3.

أضِف التبعيات الثلاثة التالية ذات الصلة إلى ملف build.gradle في تطبيقك أو وحدتك:

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()
}
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