منوهای کرکرهای به کاربران امکان میدهند روی نماد، فیلد نوشتاری، یا عنصر دیگری کلیک کنند و سپس از فهرست گزینهها در سطحی موقت انتخاب کنند. این راهنما نحوه ایجاد منوهای پایه و منوهای پیچیدهتر با جداکننده و نماد را توضیح میدهد.
سطح میانای برنامهسازی کاربردی
از DropdownMenu، DropdownMenuItem، و IconButton
عناصر برای پیادهسازی منو کرکرهای سفارشی استفاده کنید. از عناصر DropdownMenu و
DropdownMenuItem برای نمایش موارد منو استفاده میشود، درحالیکه
IconButton محرک نمایش یا پنهان کردن منو کرکرهای است.
پارامترهای کلیدی برای عنصر DropdownMenu شامل موارد زیر است:
-
expanded: نشان میدهد که منو قابلمشاهده است یا نه. -
onDismissRequest: برای مدیریت بستن منو استفاده میشود. content: محتوای ترکیبپذیر منو، که معمولاً شاملDropdownMenuItemترکیبپذیر است.
پارامترهای کلیدی برای DropdownMenuItem شامل موارد زیر است:
text: محتوای نمایشدادهشده در گزینه منو را تعریف میکند.onClick: بازخوانی برای مدیریت تعامل با مورد در منو.
ایجاد منو کرکرهای پایه
تکهکد زیر یک پیادهسازی 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پایهای را تعریف میکند که حاوی دو گزینه منو است.- پارامتر
expandedرؤیتپذیری منو را بهصورت ازهم بازشده یا جمعشده کنترل میکند. - پارامتر
onDismissRequestیک بازخوان را تعریف میکند که وقتی کاربر منو را میبندد اجرا میشود. - عنصر ترکیبی
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پیمایشپذیری ایجاد میکند که ۱۰۰ مورد جایبان را نمایش میدهد. - حلقه
forEachبهطور پویاDropdownMenuItemعنصر ترکیبشدنی تولید میکند. عناصر بهصورت تنبل ایجاد نمیشوند، به این معنی که همه ۱۰۰ عنصر کرکرهای ایجاد میشوند و در ترکیب وجود دارند. 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خط افقیای را برای جدا کردن گروههای گزینههای منو درج میکنند.
نتیجه
تکهکد قبلی منو کرکرهای با نمادها و جداکنندهها تولید میکند:
منابع بیشتر
- طراحی سهبعدی: منوها