แท็บ

แท็บช่วยให้คุณจัดระเบียบกลุ่มเนื้อหาที่เกี่ยวข้องได้ แท็บมี 2 ประเภท ได้แก่

• แท็บหลัก: วางไว้ที่ด้านบนของบานหน้าต่างเนื้อหาใต้แถบแอปด้านบน โดยจะแสดงปลายทางเนื้อหาหลัก และควรใช้เมื่อต้องการแท็บเพียงชุดเดียว
• แท็บรอง: ใช้ภายในพื้นที่เนื้อหาเพื่อแยกเนื้อหาที่เกี่ยวข้องเพิ่มเติมและสร้างลำดับชั้น จำเป็นเมื่อหน้าจอต้องการแท็บมากกว่า 1 ระดับ

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

แพลตฟอร์ม API

ใช้คอมโพสได้ Tab, PrimaryTabRow และ SecondaryTabRow เพื่อใช้แท็บ คอมโพสได้ Tab แสดงถึงแท็บแต่ละรายการภายใน แถว และโดยทั่วไปจะใช้ภายใน PrimaryTabRow (สำหรับแท็บตัวบ่งชี้หลัก ) หรือ SecondaryTabRow (สำหรับแท็บตัวบ่งชี้รอง)

Tab มีพารามิเตอร์หลักต่อไปนี้

• selected: กำหนดว่าจะไฮไลต์แท็บปัจจุบันด้วยภาพหรือไม่
• onClick(): ฟังก์ชัน Lambda ที่จำเป็นซึ่งกำหนดการดำเนินการที่จะทำเมื่อผู้ใช้คลิกแท็บ โดยปกติแล้วคุณจะจัดการเหตุการณ์การนำทาง อัปเดตสถานะแท็บที่เลือก หรือโหลดเนื้อหาที่เกี่ยวข้องในฟังก์ชันนี้
• text: แสดงข้อความภายในแท็บ ไม่บังคับ
• icon: แสดงไอคอนภายในแท็บ ไม่บังคับ
• enabled: ควบคุมว่าแท็บเปิดใช้อยู่และโต้ตอบได้หรือไม่ หากตั้งค่าเป็น "เท็จ" แท็บจะปรากฏในสถานะปิดใช้และจะไม่ตอบสนองต่อการคลิก

ตัวอย่าง: การนำทางแบบใช้แท็บ

ข้อมูลโค้ดต่อไปนี้จะใช้แถบการนำทางด้านบนที่มีแท็บเพื่อไปยังหน้าจอต่างๆ ในแอป

@Composable
fun NavigationTabExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        PrimaryTabRow(selectedTabIndex = selectedDestination, modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                Tab(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    text = {
                        Text(
                            text = destination.label,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis
                        )
                    }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

ข้อมูลสำคัญ

• PrimaryTabRow จะแสดงแท็บในแนวนอน โดยแต่ละแท็บจะสอดคล้องกับ Destination
• val navController = rememberNavController() จะสร้างและจดจำอินสแตนซ์ของ NavHostController ซึ่งจัดการการนำทางภายใน NavHost
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } จะจัดการสถานะของแท็บที่เลือก
  • startDestination.ordinal จะรับดัชนีตัวเลข (ตำแหน่ง) ของรายการ Enum Destination.SONGS
• เมื่อคลิกแท็บ Lambda onClick จะเรียก navController.navigate(route = destination.route) เพื่อไปยังหน้าจอที่เกี่ยวข้อง
• Lambda onClick ของ Tab จะอัปเดตสถานะ selectedDestination เพื่อไฮไลต์แท็บที่คลิกด้วยภาพ
• โดยจะเรียกคอมโพสได้ AppNavHost โดยส่ง navController และ startDestination เพื่อแสดงเนื้อหาจริงของหน้าจอที่เลือก

ผลลัพธ์

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

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

• Material 3 - แท็บ
• การนำทางด้วย Compose