นำทางไปยังจุดหมาย

คอมโพเนนต์การนำทางเป็นวิธีที่เรียบง่ายและแบบทั่วไป นำทางไปยังจุดหมาย อินเทอร์เฟซนี้รองรับบริบทและ UI ที่หลากหลาย ของ Google ตัวอย่างเช่น คุณสามารถใช้คอมโพเนนต์การนำทาง กับการเขียน การดู ส่วนย่อย กิจกรรม และแม้แต่เฟรมเวิร์ก UI ที่กำหนดเอง

คำแนะนำนี้จะอธิบายวิธีใช้คอมโพเนนต์การนำทางเพื่อไปยัง ปลายทางในบริบทต่างๆ

ใช้ NavController

ประเภทคีย์ที่คุณใช้เพื่อย้ายไปมาระหว่างปลายทางคือ NavController ดูข้อมูลเพิ่มเติมเกี่ยวกับชั้นเรียนได้ที่สร้างตัวควบคุมการนำทาง และวิธีสร้างอินสแตนซ์ คู่มือนี้จะอธิบายรายละเอียดวิธีใช้

คุณจะใช้ฟังก์ชันเดียวที่มีฟังก์ชันเดียวได้ ไม่ว่าคุณจะใช้เฟรมเวิร์ก UI แบบใด เพื่อนำทางไปยังจุดหมาย: NavController.navigate()

มีโอเวอร์โหลดหลายรายการสำหรับ navigate() งานหนักเกินไป ที่สอดคล้องกับบริบทเฉพาะของคุณ เช่น คุณควรใช้แอตทริบิวต์ มากเกินไปเมื่อไปยัง Composable และอีกรายการเมื่อไปยังข้อมูลพร็อพเพอร์ตี้

ส่วนต่อไปนี้จะสรุปเกี่ยวกับโอเวอร์โหลดของ navigate() ที่คุณทำได้

ไปที่ Composable

หากต้องการไปยัง Composable คุณควรใช้ NavController.navigate<T> โอเวอร์โหลดนี้ navigate() จะรับอาร์กิวเมนต์ route เดียวที่คุณ ประเภทหนึ่งๆ ทำหน้าที่เป็นกุญแจสำคัญไปยังปลายทาง

@Serializable
object FriendsList

navController.navigate(route = FriendsList)

หากต้องการไปยัง Composable ในกราฟการนำทาง ก่อนอื่นให้กำหนด NavGraph เพื่อให้ปลายทางแต่ละรายการสอดคล้องกับประเภท สำหรับ Composable คุณทำได้ด้วยฟังก์ชัน composable()

แสดงเหตุการณ์จาก Composable

เมื่อฟังก์ชัน Composable จำเป็นต้องนำทางไปยังหน้าจอใหม่ คุณไม่ควรส่ง มีการอ้างอิงถึง NavController เพื่อให้เรียก navigate() ได้โดยตรง ตามหลักการ Unidirectional Data Flow (UDF) องค์ประกอบ Composable ควรแสดงเหตุการณ์ที่ NavController จัดการแทน

พูดง่ายๆ ก็คือ Composable ควรมีพารามิเตอร์ประเภท () -> Unit เมื่อคุณเพิ่มจุดหมายไปยัง NavHost ด้วย composable() ส่งการเรียกใช้ Composable ไปยัง NavController.navigate()

โปรดดูในหัวข้อย่อยต่อไปนี้

ตัวอย่าง

ตามการสาธิตในส่วนก่อนหน้านี้ ให้สังเกตประเด็นต่อไปนี้ใน ข้อมูลโค้ดต่อไปนี้

  1. ปลายทางแต่ละรายการในกราฟถูกสร้างขึ้นโดยใช้เส้นทาง ซึ่งเป็น ออบเจ็กต์หรือคลาสแบบอนุกรมซึ่งอธิบายข้อมูลที่จำเป็น ปลายทาง
  2. Composable ของ MyAppNavHost จะมีอินสแตนซ์ NavController
  3. ดังนั้น การโทรหา navigate() ควรเกิดขึ้นที่นั่น และไม่ใช่ใน Composable เช่น ProfileScreen
  4. ProfileScreen มีปุ่มที่พาผู้ใช้ไปยัง FriendsList เมื่อคลิก อย่างไรก็ตาม แท็กไม่ได้เรียก navigate() เอง
  5. แต่ปุ่มจะเรียกฟังก์ชันที่แสดงเป็นพารามิเตอร์ onNavigateToFriends
  6. เมื่อ MyAppNavHost เพิ่ม ProfileScreen ลงในกราฟการนำทาง onNavigateToFriends มันส่งแลมบ์ดาที่เรียก navigate(route = FriendsList)
  7. ซึ่งช่วยให้มั่นใจได้ว่าเมื่อผู้ใช้กดปุ่ม ProfileScreen ปุ่ม ไปที่ FriendsListScreen อย่างถูกต้อง
@Serializable
object Profile
@Serializable
object FriendsList

@Composable
fun MyAppNavHost(
    modifier: Modifier = Modifier,
    navController: NavHostController = rememberNavController(),

) {
    NavHost(
        modifier = modifier,
        navController = navController,
        startDestination = Profile
    ) {
        composable<Profile> {
            ProfileScreen(
                onNavigateToFriends = { navController.navigate(route = FriendsList) },
                /*...*/
            )
        }
        composable<FriendsList> { FriendsListScreen(/*...*/) }
    }
}

@Composable
fun ProfileScreen(
    onNavigateToFriends: () -> Unit,
    /*...*/
) {
    /*...*/
    Button(onClick = onNavigateToFriends) {
        Text(text = "See friends list")
    }
}

นำทางโดยใช้รหัสจำนวนเต็ม

หากต้องการนำทางไปยังปลายทางโดยใช้รหัสจำนวนเต็ม ให้เรียกใช้ navigate(int) ทำงานหนักเกินไป โดยใช้รหัสทรัพยากรของการดำเนินการหรือปลายทาง ข้อมูลโค้ดต่อไปนี้จะแสดงวิธีที่คุณสามารถใช้โอเวอร์โหลดนี้เพื่อไปยัง ViewTransactionsFragment:

Kotlin

viewTransactionsButton.setOnClickListener { view ->
  view.findNavController().navigate(R.id.viewTransactionsAction)
}

Java

viewTransactionsButton.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
      Navigation.findNavController(view).navigate(R.id.viewTransactionsAction);
  }
});

เมื่อไปยังส่วนต่างๆ โดยใช้รหัส คุณควรใช้การดำเนินการ หากทำได้ การทำงาน ให้ข้อมูลเพิ่มเติมในกราฟการนำทางของคุณ โดยแสดงให้เห็นว่า ปลายทางเข้าด้วยกัน

นำทางโดยใช้ NavDeepLinkRequest

หากต้องการไปยังปลายทางของ Deep Link โดยนัย ให้ใช้เมธอด navigate(NavDeepLinkRequest) ทำงานหนักเกินไป ข้อมูลโค้ดต่อไปนี้จะแสดง การนำวิธีการนี้ไปใช้:

Kotlin

val request = NavDeepLinkRequest.Builder
  .fromUri("android-app://androidx.navigation.app/profile".toUri())
  .build()
findNavController().navigate(request)

Java

NavDeepLinkRequest request = NavDeepLinkRequest.Builder
  .fromUri(Uri.parse("android-app://androidx.navigation.app/profile"))
  .build()
NavHostFragment.findNavController(this).navigate(request)

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

การดำเนินการและประเภท MIME

นอกเหนือจาก Uri แล้ว NavDeepLinkRequest ยังรองรับ Deep Link ด้วย ประเภทการกระทำ และประเภท MIME หากต้องการเพิ่มการดำเนินการในคำขอ ให้ใช้ fromAction() หรือ setAction() หากต้องการเพิ่มประเภท MIME ในคำขอ ใช้ fromMimeType() หรือ setMimeType()

เพื่อให้ NavDeepLinkRequest จับคู่ปลายทางของ Deep Link โดยนัยได้อย่างถูกต้อง URI, การดำเนินการ และ ประเภท MIME ทั้งหมดต้องตรงกับ NavDeepLink ใน ปลายทาง URI ต้องตรงกับรูปแบบ การดำเนินการต้องตรงกันทั้งหมด และประเภท MIME ต้องเกี่ยวข้องกัน ตัวอย่างเช่น image/jpg ตรงกับ วันที่ image/\*

บริบทเพิ่มเติม

เอกสารนี้ครอบคลุมวิธีใช้ NavController.navigate() ใน Use Case ทั่วไป แต่ฟังก์ชันนี้มีช่วงโอเวอร์โหลดที่คุณสามารถ ใช้ในบริบทต่างๆ และควบคู่กับเฟรมเวิร์ก Ui ใดก็ได้ โปรดดู สำหรับข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการโอเวอร์โหลดเหล่านี้

อ่านเพิ่มเติม

ดูข้อมูลเพิ่มเติมได้ที่หน้าต่อไปนี้