แท็บ

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

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

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

แพลตฟอร์ม API

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

ผลลัพธ์

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

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

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