Thành phần ngăn điều hướng là một trình đơn dạng trượt cho phép người dùng di chuyển vào các phần khác nhau của ứng dụng. Người dùng có thể kích hoạt nó bằng cách vuốt từ cạnh bên hoặc nhấn vào một biểu tượng trình đơn.
Hãy xem xét 3 trường hợp sử dụng sau đây để triển khai Ngăn điều hướng:
- Sắp xếp nội dung: Cho phép người dùng chuyển đổi giữa các chế độ cài đặt các danh mục, chẳng hạn như trong ứng dụng tin tức hoặc blog.
- Quản lý tài khoản: Cung cấp các đường liên kết nhanh đến phần cài đặt tài khoản và hồ sơ trong ứng dụng có tài khoản người dùng.
- Khám phá tính năng: Sắp xếp nhiều tính năng và chế độ cài đặt thành một để người dùng dễ dàng khám phá và truy cập trong các ứng dụng phức tạp.
Trong Material Design, có 2 loại ngăn điều hướng:
- Chuẩn: Chia sẻ không gian trong một màn hình với nội dung khác.
- Modal: Xuất hiện phía trên cùng nội dung khác trong màn hình.
Ví dụ
Bạn có thể dùng thành phần kết hợp ModalNavigationDrawer
để triển khai
ngăn điều hướng.
Sử dụng khe drawerContent
để cung cấp ModalDrawerSheet
và cung cấp
nội dung của ngăn, như trong ví dụ sau:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) Divider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { // Screen content }
ModalNavigationDrawer
chấp nhận một số thông số ngăn chứa bổ sung. Cho
Ví dụ: bạn có thể chuyển đổi xem ngăn có phản hồi các lệnh kéo hay không bằng
tham số gesturesEnabled
như trong ví dụ sau:
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
Kiểm soát hành vi
Để kiểm soát cách mở và đóng ngăn, hãy sử dụng DrawerState
. Bạn nên
truyền DrawerState
đến ModalNavigationDrawer
bằng drawerState
.
DrawerState
cung cấp quyền truy cập vào các hàm open
và close
, vì
cũng như các thuộc tính liên quan đến trạng thái ngăn hiện tại. Các chính sách tạm ngưng này
các hàm này cần có CoroutineScope
mà bạn có thể tạo thực thể bằng cách sử dụng
rememberCoroutineScope
. Bạn cũng có thể gọi các hàm tạm ngưng trong
phản hồi các sự kiện giao diện người dùng.
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) val scope = rememberCoroutineScope() ModalNavigationDrawer( drawerState = drawerState, drawerContent = { ModalDrawerSheet { /* Drawer content */ } }, ) { Scaffold( floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show drawer") }, icon = { Icon(Icons.Filled.Add, contentDescription = "") }, onClick = { scope.launch { drawerState.apply { if (isClosed) open() else close() } } } ) } ) { contentPadding -> // Screen content } }