دستورالعمل ساخت قاب نگهدارنده مواد

این دستورالعمل نحوه ایجاد یک طرح‌بندی تطبیقی ​​با یک صفحه اصلی و یک صفحه پشتیبان را با استفاده از SupportingPaneSceneStrategy از کتابخانه Material 3 Adaptive نشان می‌دهد. این طرح‌بندی برای نمایش محتوای تکمیلی در کنار محتوای اصلی در صفحات نمایش بزرگتر مفید است.

چگونه کار می‌کند؟

این مثال سه مقصد دارد: MainVideo ، RelatedVideos و Profile .

SupportingPaneSceneStrategy

استراتژی rememberSupportingPaneSceneStrategy منطق این طرح‌بندی تطبیقی ​​را فراهم می‌کند.

  • نقش‌های پنل : به هر مقصد با استفاده از فراداده‌ها نقشی اختصاص داده می‌شود:

    • SupportingPaneSceneStrategy.mainPane() : برای محتوای اصلی. این پنل همیشه قابل مشاهده است.
    • SupportingPaneSceneStrategy.supportingPane() : برای محتوای تکمیلی. این پنل در کنار پنل اصلی در صفحات نمایش بزرگتر نمایش داده می‌شود.
    • SupportingPaneSceneStrategy.extraPane() : برای محتوای درجه سه که می‌تواند در کنار صفحه پشتیبان، حتی در صفحه‌های نمایش بزرگتر نمایش داده شود.
  • طرح‌بندی تطبیقی : استراتژی SupportingPaneSceneStrategy به طور خودکار طرح‌بندی را مدیریت می‌کند. در صفحه نمایش‌های کوچک‌تر، فقط صفحه اصلی نمایش داده می‌شود. در صفحه نمایش‌های بزرگ‌تر، صفحه پشتیبانی در کنار صفحه اصلی نمایش داده می‌شود.

  • Back Navigation : در این مثال، BackNavigationBehavior به PopUntilCurrentDestinationChange تغییر یافته است. این بدان معناست که وقتی کاربر دکمه بازگشت را فشار می‌دهد، پنجره پشتیبان بسته می‌شود و پنجره اصلی زیر آن نمایان می‌گردد.

  • ناوبری : ناوبری با اضافه کردن و حذف کردن مقصدها از پشته پشتی انجام می‌شود. SupportingPaneSceneStrategy این تغییرات را مشاهده کرده و طرح‌بندی را بر اساس آن تنظیم می‌کند.

package com.example.nav3recipes.material.supportingpane

/*
 * Copyright 2025 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfoV2
import androidx.compose.material3.adaptive.layout.calculatePaneScaffoldDirective
import androidx.compose.material3.adaptive.navigation.BackNavigationBehavior
import androidx.compose.material3.adaptive.navigation3.SupportingPaneSceneStrategy
import androidx.compose.material3.adaptive.navigation3.rememberSupportingPaneSceneStrategy
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.dropUnlessResumed
import androidx.navigation3.runtime.NavKey
import androidx.navigation3.runtime.entryProvider
import androidx.navigation3.runtime.rememberNavBackStack
import androidx.navigation3.ui.NavDisplay
import com.example.nav3recipes.content.ContentBlue
import com.example.nav3recipes.content.ContentGreen
import com.example.nav3recipes.content.ContentRed
import com.example.nav3recipes.ui.setEdgeToEdgeConfig
import kotlinx.serialization.Serializable

@Serializable
private object MainVideo : NavKey

@Serializable
private data object RelatedVideos : NavKey

@Serializable
private data object Profile : NavKey

class MaterialSupportingPaneActivity : ComponentActivity() {

    @OptIn(ExperimentalMaterial3AdaptiveApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        setEdgeToEdgeConfig()
        super.onCreate(savedInstanceState)

        setContent {

            val backStack = rememberNavBackStack(MainVideo)

            // Override the defaults so that there isn't a horizontal or vertical space between the panes.
            // See b/444438086
            val windowAdaptiveInfo = currentWindowAdaptiveInfoV2()
            val directive = remember(windowAdaptiveInfo) {
                calculatePaneScaffoldDirective(windowAdaptiveInfo)
                    .copy(horizontalPartitionSpacerSize = 0.dp, verticalPartitionSpacerSize = 0.dp)
            }

            // Override the defaults so that the supporting pane can be dismissed by pressing back.
            // See b/445826749
            val supportingPaneStrategy = rememberSupportingPaneSceneStrategy<NavKey>(
                backNavigationBehavior = BackNavigationBehavior.PopUntilCurrentDestinationChange,
                directive = directive
            )

            NavDisplay(
                backStack = backStack,
                onBack = { backStack.removeLastOrNull() },
                sceneStrategies = listOf(supportingPaneStrategy),
                entryProvider = entryProvider {
                    entry<MainVideo>(
                        metadata = SupportingPaneSceneStrategy.mainPane()
                    ) {
                        ContentRed("Video content") {
                            Button(onClick = dropUnlessResumed {
                                backStack.add(RelatedVideos)
                            }) {
                                Text("View related videos")
                            }
                        }
                    }
                    entry<RelatedVideos>(
                        metadata = SupportingPaneSceneStrategy.supportingPane()
                    ) {
                        ContentBlue("Related videos") {
                            Column(horizontalAlignment = Alignment.CenterHorizontally) {
                                Button(onClick = dropUnlessResumed {
                                    backStack.add(Profile)
                                }) {
                                    Text("View profile")
                                }
                            }
                        }
                    }
                    entry<Profile>(
                        metadata = SupportingPaneSceneStrategy.extraPane()
                    ) {
                        ContentGreen("Profile")
                    }
                }
            )
        }
    }
}