เมนู

เมนูแบบเลื่อนลงช่วยให้ผู้ใช้คลิกไอคอน ช่องข้อความ หรือคอมโพเนนต์อื่นๆ แล้ว เลือกจากรายการตัวเลือกบนพื้นผิวชั่วคราว คู่มือนี้อธิบาย วิธีสร้างทั้งเมนูพื้นฐานและเมนูที่ซับซ้อนมากขึ้นด้วยตัวคั่นและไอคอน

เมนูแบบเลื่อนลงที่มี 2 ตัวเลือกจะปรากฏขึ้น ไอคอนที่มีจุดแนวตั้ง 3 จุดแสดงว่าการคลิกไอคอนจะเปิดเมนู
รูปที่ 1 เมนูแบบเลื่อนลงพื้นฐานที่มีรายการ 2 รายการ

พื้นผิว API

ใช้คอมโพเนนต์ DropdownMenu, DropdownMenuItem และ IconButton เพื่อใช้เมนูแบบเลื่อนลงที่กำหนดเอง คอมโพเนนต์ DropdownMenu และ DropdownMenuItem ใช้เพื่อแสดงรายการเมนู ส่วน IconButton เป็นทริกเกอร์เพื่อแสดงหรือซ่อนเมนูแบบเลื่อนลง

พารามิเตอร์หลักสำหรับคอมโพเนนต์ DropdownMenu มีดังนี้

  • expanded: ระบุว่าเมนูจะแสดงหรือไม่
  • onDismissRequest: ใช้เพื่อจัดการการปิดเมนู
  • content: เนื้อหาที่ประกอบได้ของเมนู ซึ่งโดยทั่วไปจะมี DropdownMenuItem Composable

พารามิเตอร์หลักสำหรับ DropdownMenuItem มีดังนี้

  • text: กำหนดเนื้อหาที่แสดงในรายการเมนู
  • onClick: Callback เพื่อจัดการการโต้ตอบกับรายการในเมนู

สร้างเมนูแบบเลื่อนลงพื้นฐาน

ข้อมูลโค้ดต่อไปนี้แสดงการติดตั้งใช้งาน DropdownMenu ขั้นต่ำ

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}

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

  • กำหนด DropdownMenu พื้นฐานที่มีรายการในเมนู 2 รายการ
  • พารามิเตอร์ expanded จะควบคุมการมองเห็นเมนูเป็นแบบขยายหรือ ยุบ
  • พารามิเตอร์ onDismissRequest จะกำหนด Callback ที่จะดำเนินการเมื่อผู้ใช้ปิดเมนู
  • DropdownMenuItem Composable แสดงถึงรายการที่เลือกได้ใน เมนูแบบเลื่อนลง
  • IconButton จะทริกเกอร์การขยายและยุบเมนู

ผลลัพธ์

เมนูแบบเลื่อนลงที่เปิดขึ้นโดยไอคอนที่มีจุดแนวตั้ง 3 จุด เมนูจะแสดงตัวเลือกที่เลือกได้ 2 รายการ ได้แก่ ตัวเลือก 1 และตัวเลือก 2
รูปที่ 2 เมนูแบบเลื่อนลงที่เรียบง่ายซึ่งมีเพียง 2 ตัวเลือก

สร้างเมนูแบบเลื่อนลงที่ยาวขึ้น

DropdownMenu จะเลื่อนได้โดยค่าเริ่มต้นหากแสดงรายการเมนูทั้งหมดพร้อมกันไม่ได้ ข้อมูลโค้ดต่อไปนี้จะสร้างเมนูแบบเลื่อนลงที่ยาวขึ้นและเลื่อนได้

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}

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

  • DropdownMenu จะเลื่อนได้เมื่อความสูงทั้งหมดของเนื้อหา เกินพื้นที่ว่าง โค้ดนี้จะสร้าง DropdownMenu ที่เลื่อนได้ซึ่งแสดงรายการตัวยึดตำแหน่ง 100 รายการ
  • forEachลูปจะสร้าง DropdownMenuItemComposable แบบไดนามิก ระบบจะไม่สร้างรายการแบบเลื่อนลงแบบเลซีโหลด ซึ่งหมายความว่าระบบจะสร้างรายการแบบเลื่อนลงทั้ง 100 รายการ และรายการเหล่านั้นจะอยู่ในคอมโพสิต
  • IconButton จะทําให้DropdownMenu ขยายและยุบเมื่อคลิก
  • onClick Lambda ภายในแต่ละ DropdownMenuItem ช่วยให้คุณกำหนด การดำเนินการที่จะทำเมื่อผู้ใช้เลือกรายการเมนู

ผลลัพธ์

ข้อมูลโค้ดก่อนหน้าจะสร้างเมนูที่เลื่อนได้ต่อไปนี้

เมนูแบบเลื่อนลงที่มีตัวเลือกมากมาย ซึ่งต้องเลื่อนเพื่อดูรายการทั้งหมด
รูปที่ 3 เมนูแบบเลื่อนลงที่ยาวและเลื่อนได้

สร้างเมนูแบบเลื่อนลงที่ยาวขึ้นพร้อมตัวคั่น

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

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}

โค้ดนี้กำหนด DropdownMenu ภายใน Box

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

  • พารามิเตอร์ leadingIcon และ trailingIcon จะเพิ่มไอคอนที่จุดเริ่มต้นและจุดสิ้นสุดของ DropdownMenuItem
  • IconButton จะทริกเกอร์การขยายเมนู
  • DropdownMenu มี DropdownMenuItem ที่ประกอบได้หลายรายการ โดยแต่ละรายการ แสดงการดำเนินการที่เลือกได้
  • คอมโพสเซเบิล HorizontalDivider จะแทรกเส้นแนวนอนเพื่อคั่น กลุ่มของรายการเมนู

ผลลัพธ์

ข้อมูลโค้ดก่อนหน้าจะสร้างเมนูแบบเลื่อนลงที่มีไอคอนและตัวคั่น ดังนี้

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

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