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

يجذب تنسيق اللوحة الداعمة الأساسي انتباه المستخدم إلى المحتوى الرئيسي لتطبيقك مع عرض المحتوى الإضافي ذي الصلة أيضًا. على سبيل المثال، قد تعرض لوحة المحتوى الرئيسية معلومات عن فيلم حديث، بينما تعرض لوحة المحتوى التابع قائمة بأفلام أخرى تتضمّن موضوعًا مشابهًا أو مخرجًا مماثلاً أو ممثلين رئيسيين مماثلين. لمزيد من المعلومات عن التنسيق الأساسي للّوحة الداعمة، يُرجى الاطّلاع على إرشادات اللوحة الداعمة في Material 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
• ‫adaptive-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