Công thức ngăn hỗ trợ Material

Công thức này minh hoạ cách tạo một bố cục thích ứng có ngăn chính và ngăn phụ bằng cách sử dụng SupportingPaneSceneStrategy trong thư viện Thích ứng Material 3. Bố cục này hữu ích khi hiển thị nội dung bổ sung cùng với nội dung chính trên màn hình lớn.

Cách hoạt động

Ví dụ này có 3 điểm đến: MainVideo, RelatedVideos và Profile.

SupportingPaneSceneStrategy

rememberSupportingPaneSceneStrategy cung cấp logic cho bố cục thích ứng này.

  • Vai trò của ngăn: Mỗi đích đến được chỉ định một vai trò bằng cách sử dụng siêu dữ liệu:

    • SupportingPaneSceneStrategy.mainPane(): Đối với nội dung chính. Ngăn này luôn hiển thị.
    • SupportingPaneSceneStrategy.supportingPane(): Đối với nội dung bổ sung. Ngăn này xuất hiện cùng với ngăn chính trên màn hình lớn.
    • SupportingPaneSceneStrategy.extraPane(): Đối với nội dung cấp ba có thể hiển thị cùng với ngăn hỗ trợ trên cả những màn hình lớn hơn.

  • Bố cục thích ứng: SupportingPaneSceneStrategy sẽ tự động xử lý bố cục. Trên các màn hình nhỏ hơn, chỉ có ngăn chính xuất hiện. Trên màn hình lớn, ngăn hỗ trợ sẽ xuất hiện bên cạnh ngăn chính.

  • Thao tác quay lại: BackNavigationBehavior được tuỳ chỉnh thành PopUntilCurrentDestinationChange trong ví dụ này. Điều này có nghĩa là khi người dùng nhấn nút quay lại, ngăn hỗ trợ sẽ bị đóng, để lộ ngăn chính bên dưới.

  • Điều hướng: Thao tác điều hướng được xử lý bằng cách thêm và xoá đích đến khỏi ngăn xếp lui. SupportingPaneSceneStrategy sẽ quan sát những thay đổi này và điều chỉnh bố cục cho phù hợp.

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