แท็บ

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

แท็บช่วยให้คุณจัดระเบียบกลุ่มเนื้อหาที่เกี่ยวข้องได้ แท็บมี 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
• เมื่อคลิกแท็บ ระบบจะเรียกใช้ navController.navigate(route = destination.route) เพื่อไปยังหน้าจอที่เกี่ยวข้อง
• onClick lambda ของ Tab จะอัปเดตสถานะ selectedDestination เพื่อไฮไลต์แท็บที่คลิกให้เห็น
• โดยจะเรียกใช้คอมโพสิชัน AppNavHost โดยส่ง navController และ startDestination เพื่อแสดงเนื้อหาจริงของหน้าจอที่เลือก

ผลลัพธ์

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

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

• วัสดุ 3 - แท็บ
• การไปยังส่วนต่างๆ ด้วย Compose