คอมโพเนนต์ลิ้นชักการนำทางคือเมนูแบบเลื่อนเข้าที่ช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ไปยังส่วนต่างๆ ของแอป ผู้ใช้เปิดใช้งานได้โดยการเลื่อนจากด้านข้าง หรือแตะไอคอนเมนู
พิจารณากรณีการใช้งาน 3 อย่างต่อไปนี้สำหรับการใช้ลิ้นชักการนำทาง
- การจัดระเบียบเนื้อหา: ให้ผู้ใช้สลับใช้ส่วนต่างๆ ได้ เช่น ในแอปข่าวหรือการเขียนบล็อก
- การจัดการบัญชี: ระบุลิงก์ด่วนไปยังการตั้งค่าบัญชีและโปรไฟล์ ในแอปที่มีบัญชีผู้ใช้
- การค้นพบฟีเจอร์: จัดระเบียบฟีเจอร์และการตั้งค่าหลายรายการในที่เดียว เพื่อให้ผู้ใช้ค้นพบและเข้าถึงแอปที่ซับซ้อนได้ง่ายขึ้น
ในดีไซน์ Material มีลิ้นชักการนำทาง 2 ประเภทดังนี้
- มาตรฐาน: แชร์พื้นที่ภายในหน้าจอกับเนื้อหาอื่น
- คำสั่ง: ปรากฏเหนือเนื้อหาอื่นๆ ภายในหน้าจอ
ตัวอย่าง
คุณสามารถใช้ ModalNavigationDrawer
Composable เพื่อติดตั้งใช้งาน
ลิ้นชักการนำทาง
ใช้สล็อต drawerContent
เพื่อระบุ ModalDrawerSheet
และระบุ
ของลิ้นชัก ดังตัวอย่างต่อไปนี้
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
ยอมรับพารามิเตอร์ลิ้นชักเพิ่มเติมจำนวนหนึ่ง สำหรับ
เช่น คุณสามารถสลับไปมาว่าจะให้ลิ้นชักตอบสนองต่อการลากด้วยหรือไม่
gesturesEnabled
ตามตัวอย่างต่อไปนี้
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { // Drawer contents } }, gesturesEnabled = false ) { // Screen content }
ลักษณะการทำงานของการควบคุม
หากต้องการควบคุมวิธีเปิดและปิดลิ้นชัก ให้ใช้ DrawerState
คุณควร
ส่ง DrawerState
ไปยัง ModalNavigationDrawer
โดยใช้ drawerState
พารามิเตอร์
DrawerState
ให้สิทธิ์เข้าถึงฟังก์ชัน open
และ close
ในฐานะ
ตลอดจนคุณสมบัติที่เกี่ยวข้องกับสถานะลิ้นชักปัจจุบัน การระงับเหล่านี้
ฟังก์ชันต้องมี CoroutineScope
ซึ่งคุณสามารถสร้างอินสแตนซ์โดยใช้
rememberCoroutineScope
นอกจากนี้คุณยังเรียกใช้ฟังก์ชันการระงับได้ใน
การตอบสนองต่อเหตุการณ์ UI
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 } }