แท็บ

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

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

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

พื้นผิว API

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

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

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

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

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

@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)
    }
}

ข้อมูลสำคัญ

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

ผลลัพธ์

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

 แท็บ 3 แท็บจัดเรียงในแนวนอนที่ด้านบนของหน้าจอแอป แท็บต่างๆ ได้แก่ เพลง อัลบั้ม และเพลย์ลิสต์ โดยแท็บเพลงจะได้รับการเลือกและขีดเส้นใต้
รูปที่ 2 3 แท็บ ได้แก่ เพลง อัลบั้ม และเพลย์ลิสต์ จัดเรียงในแนวนอน

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