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

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

พิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ในการใช้ Navigation Drawer

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

ใน Material Design ลิ้นชักการนำทางมี 2 ประเภท ได้แก่

• มาตรฐาน: แชร์พื้นที่ภายในหน้าจอกับเนื้อหาอื่นๆ
• โมดัล: ปรากฏเหนือเนื้อหาอื่นๆ ภายในหน้าจอ

ตัวอย่าง

คุณสามารถใช้คอมโพสิชัน ModalNavigationDrawer เพื่อติดตั้งใช้งานลิ้นชักการนำทางได้

ใช้สล็อต drawerContent เพื่อจัดเตรียม ModalDrawerSheet และจัดเตรียมเนื้อหาของลิ้นชัก ตามตัวอย่างต่อไปนี้

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            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