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

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

• ปลายทางระดับบนสุดที่ต้องเข้าถึงได้ทุกที่ในแอป
• ปลายทางหลัก 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) เพื่อไปยังหน้าจอที่เกี่ยวข้อง
• Lambda onClick ของ NavigationRailItem จะอัปเดตสถานะ selectedDestination เพื่อไฮไลต์รายการแถบข้างที่คลิกด้วยภาพ
• โดยจะเรียกฟังก์ชันที่ประกอบกันได้ AppNavHost และส่ง navController กับ startDestination เพื่อแสดงเนื้อหาจริงของหน้าจอที่เลือก

ผลลัพธ์

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

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

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