แถบข้างสำหรับไปยังส่วนต่างๆ

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

รางช่วยให้เข้าถึงปลายทางในแอปที่ทำงานบนอุปกรณ์ที่มีหน้าจอขนาดใหญ่ คุณควรใช้แถบนําทางในกรณีต่อไปนี้

• ปลายทางระดับบนสุดที่ต้องเข้าถึงได้จากทุกที่ในแอป
• จุดหมายหลัก 3-7 แห่ง
• เลย์เอาต์แท็บเล็ตหรือเดสก์ท็อป

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

แพลตฟอร์ม API

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

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

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

ตัวอย่าง: การนําทางตามราง

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

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

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

ข้อมูลสำคัญ

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

ผลลัพธ์

รูปภาพต่อไปนี้แสดงผลลัพธ์ของข้อมูลโค้ดก่อนหน้า

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

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