Xây dựng bố cục ngăn bổ trợ

Bố cục chuẩn của ngăn bổ trợ tập trung sự chú ý của người dùng vào nội dung chính của ứng dụng, đồng thời hiển thị nội dung hỗ trợ phù hợp. Ví dụ: ngăn nội dung chính có thể hiển thị thông tin về một bộ phim gần đây, trong khi ngăn phụ hiển thị danh sách các bộ phim khác có chủ đề tương tự hoặc cùng một đạo diễn hoặc diễn viên chính. Để biết thêm thông tin về bố cục chuẩn của ngăn hỗ trợ, hãy xem Nguyên tắc về ngăn hỗ trợ trong Material 3.

Triển khai ngăn hỗ trợ

SupportingPaneScaffold bao gồm tối đa 3 ngăn: một ngăn chính, một ngăn bổ trợ và một ngăn bổ sung không bắt buộc. Khung này xử lý tất cả các phép tính để phân bổ không gian cửa sổ cho ba ngăn. Trên màn hình lớn, ngăn xếp hiển thị ngăn chính với ngăn hỗ trợ ở bên cạnh. Trên màn hình nhỏ, ngăn chính hoặc ngăn hỗ trợ sẽ hiển thị toàn màn hình.

Hình 1. Bố cục ngăn bổ trợ.

Thêm phần phụ thuộc

SupportingPaneScaffold là một phần của thư viện bố cục thích ứng Material 3.

Thêm ba phần phụ thuộc có liên quan sau vào tệp build.gradle của ứng dụng hoặc mô-đun:

Kotlin

implementation("androidx.compose.material3.adaptive:adaptive")
implementation("androidx.compose.material3.adaptive:adaptive-layout")
implementation("androidx.compose.material3.adaptive:adaptive-navigation")

Groovy

implementation 'androidx.compose.material3.adaptive:adaptive'
implementation 'androidx.compose.material3.adaptive:adaptive-layout'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation'

• thích ứng – Các khối xây dựng cấp thấp như HingeInfo và Posture
• adaptive-layout – Bố cục thích ứng, chẳng hạn như SupportingPaneScaffold
• adaptive-navigation – Các thành phần kết hợp để điều hướng trong và giữa các ngăn

Tạo trình điều hướng và scaffold

Trong cửa sổ nhỏ, mỗi lần chỉ hiển thị một ngăn, vì vậy, hãy sử dụng ThreePaneScaffoldNavigator để di chuyển đến và đi từ các ngăn. Tạo một thực thể của trình điều hướng bằng rememberSupportingPaneScaffoldNavigator. Để xử lý các cử chỉ quay lại, hãy sử dụng BackHandler để kiểm tra canNavigateBack() và gọi navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}
SampleSupportingPaneScaffold.kt

Cấu trúc này yêu cầu PaneScaffoldDirective để kiểm soát cách chia màn hình và khoảng cách cần sử dụng, cũng như ThreePaneScaffoldValue để cung cấp trạng thái hiện tại của các ngăn (chẳng hạn như liệu các ngăn đó có được mở rộng hay ẩn). Đối với hành vi mặc định, hãy sử dụng scaffoldDirective và scaffoldValue của trình điều hướng tương ứng:

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

Ngăn chính và ngăn hỗ trợ là các thành phần kết hợp chứa nội dung của bạn. Sử dụng AnimatedPane để áp dụng ảnh động ngăn mặc định trong quá trình điều hướng. Sử dụng giá trị của ngăn scaffolding để kiểm tra xem ngăn hỗ trợ có bị ẩn hay không; nếu có, hãy hiển thị một nút gọi navigateTo(ThreePaneScaffoldRole.Secondary) để hiển thị ngăn hỗ trợ.

Dưới đây là cách triển khai hoàn chỉnh của giàn giáo:

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

Trích xuất thành phần kết hợp ngăn

Trích xuất các ngăn riêng lẻ của SupportingPaneScaffold vào các thành phần kết hợp riêng để có thể sử dụng lại và kiểm thử. Sử dụng ThreePaneScaffoldScope để truy cập vào AnimatedPane nếu bạn muốn sử dụng ảnh động mặc định:

@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

Việc trích xuất các ngăn thành các thành phần kết hợp giúp đơn giản hoá việc sử dụng SupportingPaneScaffold (so sánh các nội dung sau đây với quá trình triển khai hoàn chỉnh scaffold trong phần trước):

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