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 3
ngăn: ngăn chính, ngăn bổ trợ và ngăn bổ sung không bắt buộc. Giàn giáo
xử lý tất cả các phép tính để phân bổ không gian cửa sổ cho 3 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ợ.](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/supporting-pane.png?authuser=9&hl=vi)
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) — 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() }
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 = { /*...*/ }, )
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 đầy đủ bộ khung:
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") } }, )
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") } }
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() }, )