นำทางจากแถบแอปด้านบน

คู่มือนี้จะสาธิตวิธีสร้างไอคอนการนำทางในแอปยอดนิยม ดำเนินการนำทาง

ตัวอย่าง

ข้อมูลโค้ดต่อไปนี้เป็นตัวอย่างสั้นๆ ของวิธีใช้งานแอปยอดนิยม ที่มีไอคอนการนำทางที่ใช้งานได้ ในกรณีนี้ ไอคอนจะนำผู้ใช้ไปยัง ปลายทางก่อนหน้าของผู้ใช้ในแอป

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}
AppBar.kt

ประเด็นสำคัญเกี่ยวกับโค้ด

สิ่งที่ควรทราบในตัวอย่างนี้

  • TopBarNavigationExample ที่ประกอบกันได้จะกำหนดพารามิเตอร์ navigateBack ประเภท () -> Unit
  • จะส่ง navigateBack สำหรับพารามิเตอร์ navigationIcon ของ CenterAlignedTopAppBar

ดังนั้น เมื่อใดก็ตามที่ผู้ใช้คลิกไอคอน การนำทางในแอปด้านบน โทรหา navigateBack()

ส่งฟังก์ชัน

ตัวอย่างนี้ใช้ลูกศรย้อนกลับสำหรับไอคอน ดังนั้น อาร์กิวเมนต์ของ navigateBack() ควรนำผู้ใช้ไปยังปลายทางก่อนหน้า

โดยโทรติดต่อ TopBarNavigationExample ที่ NavController.popBackStack() คุณทำเช่นนี้ได้เมื่อคุณสร้าง กราฟการนำทาง เช่น

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

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

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