เมนูแบบเลื่อนลงช่วยให้ผู้ใช้คลิกไอคอน ช่องข้อความ หรือคอมโพเนนต์อื่นๆ แล้วเลือกจากรายการตัวเลือกบนพื้นผิวชั่วคราว คู่มือนี้จะอธิบายวิธีสร้างทั้งเมนูพื้นฐานและเมนูที่ซับซ้อนมากขึ้นด้วยตัวแบ่งและไอคอน
แพลตฟอร์ม API
ใช้คอมโพเนนต์ DropdownMenu
, DropdownMenuItem
และ IconButton
เพื่อใช้เมนูแบบเลื่อนลงที่กําหนดเอง คอมโพเนนต์ DropdownMenu
และ
DropdownMenuItem
ใช้เพื่อแสดงรายการเมนู ส่วน IconButton
เป็นทริกเกอร์เพื่อแสดงหรือซ่อนเมนูแบบเลื่อนลง
พารามิเตอร์หลักสําหรับคอมโพเนนต์ DropdownMenu
มีดังนี้
expanded
: ระบุว่าเมนูแสดงหรือไม่onDismissRequest
: ใช้เพื่อจัดการการปิดเมนูcontent
: เนื้อหาที่คอมโพสิเบิลของเมนู ซึ่งมักจะประกอบด้วยคอมโพสิเบิลDropdownMenuItem
พารามิเตอร์หลักของ 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
จะกำหนดการเรียกกลับที่จะดำเนินการเมื่อผู้ใช้ปิดเมนู - Composable
DropdownMenuItem
แสดงรายการที่เลือกได้ในเมนูแบบเลื่อนลง IconButton
จะทริกเกอร์การขยายและยุบเมนู
ผลลัพธ์
สร้างเมนูแบบเลื่อนลงที่ยาวขึ้น
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
loop จะสร้างคอมโพสิเบิลDropdownMenuItem
แบบไดนามิก ระบบไม่ได้สร้างรายการแบบเลื่อนลงแบบ Lazy ซึ่งหมายความว่าระบบจะสร้างรายการแบบเลื่อนลงทั้งหมด 100 รายการและแสดงอยู่ในองค์ประกอบIconButton
จะทริกเกอร์การขยายและยุบDropdownMenu
เมื่อมีการคลิกonClick
แลมดาภายในแต่ละDropdownMenuItem
ช่วยให้คุณกําหนดการดําเนินการที่จะทำเมื่อผู้ใช้เลือกรายการเมนู
ผลลัพธ์
ข้อมูลโค้ดก่อนหน้าจะสร้างเมนูแบบเลื่อนได้ดังต่อไปนี้
สร้างเมนูแบบเลื่อนลงที่ยาวขึ้นพร้อมตัวแบ่ง
ข้อมูลโค้ดต่อไปนี้แสดงการใช้งานเมนูแบบเลื่อนลงขั้นสูงขึ้น ในข้อมูลโค้ดนี้ ระบบจะเพิ่มไอคอนนำหน้าและตามหลังลงในรายการเมนู และตัวแบ่งจะแยกกลุ่มรายการเมนู
@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
จะแทรกเส้นแนวนอนเพื่อแยกกลุ่มรายการเมนู
ผลลัพธ์
ข้อมูลโค้ดก่อนหน้าจะสร้างเมนูแบบเลื่อนลงที่มีไอคอนและตัวแบ่ง
แหล่งข้อมูลเพิ่มเติม
- Material Design: เมนู