Ngăn điều hướng

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 chuyển đến nhiều phần trong ứng dụng. Người dùng có thể kích hoạt trình đơn này 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 ba trường hợp sử dụng sau để triển khai một 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 danh mục, chẳng hạn như trong ứng dụng tin tức hoặc viết blog.
• Quản lý tài khoản: Cung cấp đường liên kết nhanh đến các phần cài đặt tài khoản và hồ sơ trong các ứ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 trong một trình đơn duy nhất để giúp 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 trên đầu 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 một 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
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer chấp nhận một số thông số ngăn chứa bổ sung. Ví dụ: bạn có thể bật/tắt xem ngăn có phản hồi các lệnh kéo bằng tham số gesturesEnabled như trong ví dụ sau:

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

Hành vi kiểm soát

Để kiểm soát cách mở và đóng ngăn, hãy dùng hàm DrawerState. Bạn nên truyền DrawerState đến ModalNavigationDrawer bằng cách sử dụng tham số drawerState.

DrawerState cung cấp quyền truy cập vào các hàm open và close, 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 hàm tạm ngưng này cần có CoroutineScope mà bạn có thể tạo thực thể bằng rememberCoroutineScope. Bạn cũng có thể gọi các hàm tạm ngưng để phản hồi các sự kiện trê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
    }
}
MaterialLayoutSnippets.kt