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 giao diện chính của ứng dụng mà vẫn hiển thị nội dung hỗ trợ phù hợp. Ví dụ: chính có thể hiển thị thông tin về một bộ phim gần đây trong khi ngăn nội dung ngăn hiển thị danh sách các phim khác có cùng chủ đề hoặc chủ đề đạo diễn hoặc diễn viên tham gia. Để biết thêm thông tin về ngăn bổ trợ bố cục chuẩn, hãy xem Nguyên tắc về ngăn bổ trợ của Material 3.

Triển khai ngăn hỗ trợ

SupportingPaneScaffold bao gồm tối đa ba ngăn: ngăn chính, ngăn hỗ trợ và 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. Bật màn hình lớn, scaffold (giàn giáo) sẽ hiển thị ngăn chính với ngăn hỗ trợ nằm trên cạnh trang. Trên màn hình nhỏ, Scaffold hiển thị ngăn toàn màn hình.

Nội dung chính chiếm hầu hết màn hình cùng với nội dung hỗ trợ.
Hình 1. Bố cục ngăn hỗ 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 đây 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 thành phần 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ác cửa sổ nhỏ, mỗi lần chỉ một ngăn hiển thị, vì vậy hãy sử dụng ThreePaneScaffoldNavigator để di chuyển đến và đi 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 dùng BackHandler để kiểm tra canNavigateBack() và các cuộc gọi navigateBack():

val navigator = rememberSupportingPaneScaffoldNavigator()

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

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

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

Ngăn chính và ngăn bổ 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 của ngăn mặc định trong điều hướng. Dùng giá trị scaffold để kiểm tra xem ngăn bổ trợ có đang ẩn; nếu có, hãy hiển thị một nút gọi navigateTo(ThreePaneScaffoldRole.Secondary) để hiển thị ngăn bổ 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 các thành phần kết hợp của ngăn

Trích xuất các ngăn riêng lẻ của SupportingPaneScaffold thành các ngăn riêng thành phần kết hợp để làm cho chúng có thể tái sử dụng và kiểm thử được. Sử dụng ThreePaneScaffoldScope để truy cập AnimatedPane nếu bạn muốn có ả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 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 đoạn mã sau với phương thức triển khai hoàn chỉnh của 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

Trước
Xây dựng bố cục danh sách-chi tiết
Tiếp
Căn chỉnh