ลิ้นชักการนำทาง

คอมโพเนนต์ลิ้นชักการนำทางคือเมนูแบบเลื่อนเข้าที่ช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ไปยังส่วนต่างๆ ของแอป ผู้ใช้เปิดใช้งานได้โดยการเลื่อนจากด้านข้าง หรือแตะไอคอนเมนู

พิจารณากรณีการใช้งาน 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
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer ยอมรับพารามิเตอร์ลิ้นชักเพิ่มเติมจำนวนหนึ่ง สำหรับ เช่น คุณสามารถสลับไปมาว่าจะให้ลิ้นชักตอบสนองต่อการลากด้วยหรือไม่ gesturesEnabled ตามตัวอย่างต่อไปนี้

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

ลักษณะการทำงานของการควบคุม

หากต้องการควบคุมวิธีเปิดและปิดลิ้นชัก ให้ใช้ 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
    }
}
MaterialLayoutSnippets.kt