Hầu hết các ứng dụng đều có một vài đích đến cấp cao nhất có thể truy cập được thông qua giao diện người dùng điều hướng chính của ứng dụng. Trong các cửa sổ nhỏ gọn, chẳng hạn như điện thoại tiêu chuẩn màn hình, đích đến thường được hiển thị trong thanh điều hướng ở cuối cửa sổ. Trong cửa sổ mở rộng, chẳng hạn như ứng dụng toàn màn hình trên máy tính bảng, dải điều hướng dọc theo ứng dụng thường là lựa chọn tốt hơn vì bạn có thể dễ dàng tiếp cận các nút điều khiển điều hướng hơn khi giữ cạnh bên trái và bên phải của thiết bị.
NavigationSuiteScaffold
đơn giản hoá quá trình chuyển đổi
giữa các giao diện người dùng điều hướng bằng cách cho thấy thành phần kết hợp
giao diện người dùng điều hướng thích hợp
dựa trên WindowSizeClass
. Điều này bao gồm động
thay đổi giao diện người dùng trong các thay đổi về kích thước cửa sổ thời gian chạy. Hành vi mặc định là
hiển thị một trong các thành phần giao diện người dùng sau:
- Thanh điều hướng nếu chiều rộng hoặc chiều cao nhỏ gọn hoặc nếu thiết bị đang ở tư thế trên mặt bàn
- Dải điều hướng cho mọi thao tác khác
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_bar.png?authuser=9&hl=vi)
NavigationSuiteScaffold
hiển thị một thanh điều hướng trong các cửa sổ thu gọn.
![](https://developer.android.com/static/develop/ui/compose/images/layouts/adaptive/navigationsuitescaffold_with_nav_rail.png?authuser=9&hl=vi)
NavigationSuiteScaffold
hiển thị dải điều hướng trong cửa sổ mở rộng.
Thêm phần phụ thuộc
NavigationSuiteScaffold
là một phần của
Bộ công cụ điều hướng thích ứng Material3
thư viện của bạn. Thêm phần phụ thuộc cho thư viện trong tệp build.gradle
của ứng dụng
hoặc mô-đun:
Kotlin
implementation("androidx.compose.material3:material3-adaptive-navigation-suite")
Groovy
implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'
Tạo một scaffold (giàn giáo)
Hai phần chính của NavigationSuiteScaffold
là các mục trong bộ điều hướng
và nội dung cho đích đến đã chọn. Bạn có thể trực tiếp xác định
các mục của bộ điều hướng trong một thành phần kết hợp, nhưng chúng ta thường sẽ xác định các mục này
ở nơi khác, ví dụ: trong một enum:
enum class AppDestinations( @StringRes val label: Int, val icon: ImageVector, @StringRes val contentDescription: Int ) { HOME(R.string.home, Icons.Default.Home, R.string.home), FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites), SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping), PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile), }
Để sử dụng NavigationSuiteScaffold
, bạn phải theo dõi đích đến hiện tại.
bạn có thể thực hiện bằng cách sử dụng rememberSaveable
:
var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
Trong ví dụ sau, tham số navigationSuiteItems
(loại
NavigationSuiteScope
sử dụng hàm item
để xác định giao diện người dùng điều hướng cho một đích đến riêng lẻ. Giao diện người dùng đích là
được sử dụng trên thanh điều hướng, dải và ngăn điều hướng. Để tạo các mục điều hướng, bạn
lặp lại qua AppDestinations
(được xác định trong đoạn mã trước):
NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it } ) } } ) { // TODO: Destination content. }
Trong lambda của nội dung đích, hãy dùng giá trị currentDestination
để
quyết định giao diện người dùng nào sẽ hiển thị. Nếu bạn dùng một thư viện điều hướng trong ứng dụng, hãy dùng thư viện đó
ở đây để hiển thị đích đến thích hợp. Câu lệnh when có thể là đủ:
NavigationSuiteScaffold( navigationSuiteItems = { /*...*/ } ) { // Destination content. when (currentDestination) { AppDestinations.HOME -> HomeDestination() AppDestinations.FAVORITES -> FavoritesDestination() AppDestinations.SHOPPING -> ShoppingDestination() AppDestinations.PROFILE -> ProfileDestination() } }
Thay đổi màu sắc
NavigationSuiteScaffold
tạo một Surface
trên toàn bộ khu vực
Scaffold chiếm, thường là toàn cửa sổ. Trên hết, scaffold (giàn giáo)
vẽ một giao diện người dùng điều hướng cụ thể, chẳng hạn như NavigationBar
.
Cả nền tảng và giao diện người dùng điều hướng đều sử dụng các giá trị được chỉ định trong
giao diện nhưng bạn có thể ghi đè các giá trị giao diện.
Tham số containerColor
chỉ định màu của bề mặt. Mặc định
là màu nền trong bảng phối màu của bạn. Tham số contentColor
chỉ định màu của nội dung trên bề mặt đó. Mặc định là "bật" màu
của bất kỳ giá trị nào được chỉ định cho containerColor
. Ví dụ: nếu containerColor
sử dụng màu background
, sau đó contentColor
sử dụng màu onBackground
.
Xem Tuỳ chỉnh giao diện Material Design 3 trong Compose
để biết thêm chi tiết về cách hoạt động của hệ màu. Khi ghi đè các giá trị này,
dùng các giá trị được xác định trong giao diện để ứng dụng hỗ trợ giao diện tối và sáng
chế độ:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, containerColor = MaterialTheme.colorScheme.primary, contentColor = MaterialTheme.colorScheme.onPrimary, ) { // Content... }
Giao diện người dùng điều hướng được vẽ trước khu vực NavigationSuiteScaffold
.
Giá trị mặc định cho màu của giao diện người dùng được cung cấp bởi
NavigationSuiteDefaults.colors()
, nhưng bạn
cũng có thể ghi đè các giá trị này. Ví dụ: nếu bạn muốn nền của
thanh điều hướng trong suốt nhưng các giá trị khác là giá trị mặc định,
ghi đè navigationBarContainerColor
:
NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, navigationSuiteColors = NavigationSuiteDefaults.colors( navigationBarContainerColor = Color.Transparent, ) ) { // Content... }
Cuối cùng, bạn có thể tuỳ chỉnh từng mục trong giao diện người dùng điều hướng. Khi gọi hàm
item
, bạn có thể truyền vào một thực thể của
NavigationSuiteItemColors
. Lớp này sẽ chỉ định
màu của các mục trong thanh điều hướng, dải điều hướng và thanh điều hướng
ngăn. Tức là bạn có thể sử dụng màu giống nhau trên từng loại giao diện người dùng điều hướng,
hoặc có thể thay đổi màu sắc theo nhu cầu của mình. Xác định màu ở
Cấp độ NavigationSuiteScaffold
để sử dụng cùng một thực thể đối tượng cho tất cả các mục
và gọi hàm NavigationSuiteDefaults.itemColors()
để chỉ ghi đè
những danh sách mà bạn muốn thay đổi:
val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors( navigationBarItemColors = NavigationBarItemDefaults.colors( indicatorColor = MaterialTheme.colorScheme.primaryContainer, selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer ), ) NavigationSuiteScaffold( navigationSuiteItems = { AppDestinations.entries.forEach { item( icon = { Icon( it.icon, contentDescription = stringResource(it.contentDescription) ) }, label = { Text(stringResource(it.label)) }, selected = it == currentDestination, onClick = { currentDestination = it }, colors = myNavigationSuiteItemColors, ) } }, ) { // Content... }
Tuỳ chỉnh các loại điều hướng
Hành vi mặc định của NavigationSuiteScaffold
sẽ thay đổi giao diện người dùng điều hướng
dựa trên kích thước cửa sổ
các lớp. Tuy nhiên, bạn
có thể muốn ghi đè hành vi này. Ví dụ: nếu ứng dụng của bạn hiển thị một
ngăn nội dung lớn cho một nguồn cấp dữ liệu, ứng dụng có thể dùng ngăn điều hướng cố định
cho các cửa sổ mở rộng nhưng vẫn quay lại chế độ mặc định cho
các lớp kích thước cửa sổ nhỏ gọn và trung bình:
val adaptiveInfo = currentWindowAdaptiveInfo() val customNavSuiteType = with(adaptiveInfo) { if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) { NavigationSuiteType.NavigationDrawer } else { NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo) } } NavigationSuiteScaffold( navigationSuiteItems = { /* ... */ }, layoutType = customNavSuiteType, ) { // Content... }
Tài nguyên khác
Xem hướng dẫn về Material Design:
Hãy xem các thành phần thư viện androidx.compose.material3
sau đây: