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