แถบนำทาง

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

  • ปลายทาง 3-5 แห่งที่มีความสำคัญเท่ากัน
  • ขนาดหน้าต่างแบบกะทัดรัด
  • ปลายทางที่สอดคล้องกันในหน้าจอแอป
 แถบนำทางที่มีปลายทาง 4 แห่ง แต่ละปลายทางจะมีชื่อตัวยึดตำแหน่งที่เรียกว่า
รูปที่ 1 แถบนำทางที่มีปลายทาง 4 แห่ง

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

พื้นผิว API

ใช้ Composable 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))
    }
}

ข้อมูลสำคัญ

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

ผลลัพธ์

รูปภาพต่อไปนี้แสดงแถบนำทางที่ได้จากข้อมูลโค้ดก่อนหน้า

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

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