แถบนำทาง

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

แถบนำทางช่วยให้ผู้ใช้สลับระหว่างปลายทางในแอปได้ คุณควรใช้แถบนำทางในกรณีต่อไปนี้

• ปลายทาง 3-5 แห่งที่มีความสําคัญเท่าๆ กัน
• ขนาดหน้าต่างแบบกะทัดรัด
• ปลายทางที่สอดคล้องกันในหน้าจอแอป

หน้านี้จะแสดงวิธีแสดงแถบนำทางในแอปพร้อมหน้าจอที่เกี่ยวข้องและการนำทางขั้นพื้นฐาน

แพลตฟอร์ม API

ใช้คอมโพสิเบิล NavigationBar และ NavigationBarItem เพื่อใช้ตรรกะการเปลี่ยนปลายทาง NavigationBarItem แต่ละรายการแสดงถึงปลายทางเดียว

NavigationBarItem มีพารามิเตอร์หลักต่อไปนี้

• selected: กำหนดว่ารายการปัจจุบันจะไฮไลต์ด้วยภาพหรือไม่
• onClick(): ฟังก์ชัน Lambda ที่ต้องระบุซึ่งกำหนดการดำเนินการที่จะทำเมื่อผู้ใช้คลิกรายการ โดยปกติแล้ว คุณจะใช้เหตุการณ์การนําทาง อัปเดตสถานะของรายการที่เลือก หรือโหลดเนื้อหาที่เกี่ยวข้องในส่วนนี้
• label: แสดงข้อความภายในรายการ ไม่บังคับ
• icon: แสดงไอคอนภายในสินค้า ไม่บังคับ

ตัวอย่าง: แถบนำทางด้านล่าง

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

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

ข้อมูลสำคัญ

• NavigationBar แสดงคอลเล็กชันรายการ โดยแต่ละรายการจะสอดคล้องกับ Destination
• val navController = rememberNavController() จะสร้างและจดจําNavHostController ขึ้นมา ซึ่งจะจัดการการนําทางภายใน NavHost
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } จัดการสถานะของรายการที่เลือกอยู่ในปัจจุบัน
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } จัดการสถานะของรายการที่เลือกอยู่ในปัจจุบัน
  • startDestination.ordinal รับดัชนีตัวเลข (ตำแหน่ง) ของรายการ enum Destination.SONGS
• เมื่อมีการคลิกรายการ ระบบจะเรียกใช้ navController.navigate(route = destination.route) เพื่อไปยังหน้าจอที่เกี่ยวข้อง
• onClick lambda ของ NavigationBarItem จะอัปเดตสถานะ selectedDestination เพื่อไฮไลต์รายการที่คลิกให้เห็น
• โดยจะเรียกใช้คอมโพสิชัน AppNavHost โดยส่ง navController และ startDestination เพื่อแสดงเนื้อหาจริงของหน้าจอที่เลือก

ผลลัพธ์

รูปภาพต่อไปนี้แสดงแถบนําทางที่เกิดจากตัวอย่างข้อมูลก่อนหน้า

แหล่งข้อมูลเพิ่มเติม

• วัสดุ 3 - แถบนําทาง
• การไปยังส่วนต่างๆ ด้วย Compose