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

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

  • ปลายทางระดับบนสุดที่ต้องเข้าถึงได้ทุกที่ในแอป
  • จุดหมายหลัก 3-7 แห่ง
  • เลย์เอาต์แท็บเล็ตหรือเดสก์ท็อป
แถบนำทางแนวตั้งทางด้านซ้ายของหน้าจอที่มีปลายทาง 4 แห่ง (ไฟล์ทั้งหมด, ล่าสุด, รูปภาพ และคลัง) โดยแต่ละแห่งจะมีไอคอนที่เกี่ยวข้องและปุ่มการทำงานแบบลอย
รูปที่ 1 แถบนำทางที่มีปลายทาง 4 แห่งและปุ่มการทำงานแบบลอย

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

พื้นผิว 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)
    }
}

ข้อมูลสำคัญ

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

ผลลัพธ์

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

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

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