منوها

منوهای کرکره‌ای به کاربران اجازه می‌دهند روی نماد، فیلد نوشتاری، یا مؤلفه دیگری کلیک کنند، و سپس از فهرست گزینه‌ها در سطحی موقت انتخاب کنند. این راهنما نحوه ایجاد منوهای ساده و منوهای پیچیده‌تر با جداکننده و نماد را شرح می‌دهد.

شکل ۱. منوِ کرکره‌ای ساده با دو مورد فهرست‌شده.

سطح میانای برنامه‌سازی کاربردی

از مؤلفه‌های 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... */ }
            )
        }
    }
}
Menus.kt

نکات کلیدی درباره کد

• یک DropdownMenu پایه را که شامل دو گزینه منو است تعریف می‌کند.
• پارامتر expanded نمایان بودن منو را به‌صورت ازهم بازشده یا جمع‌شده کنترل می‌کند.
• پارامتر onDismissRequest یک فراخوانی برگشتی را تعریف می‌کند که وقتی کاربر منو را می‌بندد اجرا می‌شود.
• DropdownMenuItem composable نشان‌دهنده موارد قابل‌انتخاب در منوِ کرکره‌ای است.
• 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... */ }
                )
            }
        }
    }
}
Menus.kt

نکات کلیدی درباره کد

• وقتی ارتفاع کل محتوای از فضای دردسترس بیشتر باشد، DropdownMenu پیمایش‌پذیر می‌شود. این کد یک DropdownMenu پیمایش‌پذیر ایجاد می‌کند که ۱۰۰ مورد جای‌بان را نمایش می‌دهد.
• حلقه forEach به‌طور پویا DropdownMenuItem ترکیب‌پذیر تولید می‌کند. موارد به‌صورت تنبل ایجاد نمی‌شوند، یعنی همه ۱۰۰ مورد منو کرکره‌ای ایجاد می‌شوند و در ترکیب‌بندی وجود دارند.
• IconButton با کلیک کردن، ازهم باز شدن و جمع شدن DropdownMenu را راه‌اندازی می‌کند.
• onClick lambda در هر 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... */ }
            )
        }
    }
}
Menus.kt

این کد DropdownMenu را در Box تعریف می‌کند.

نکات کلیدی درباره کد

• پارامترهای leadingIcon و trailingIcon نمادهایی را به ابتدا و انتهای DropdownMenuItem اضافه می‌کنند.
• IconButton باعث ازهم باز شدن منو می‌شود.
• ‫DropdownMenu حاوی چندین DropdownMenuItem ترکیب‌پذیر است که هرکدام نشان‌دهنده یک کنش قابل‌انتخاب است.
• HorizontalDivider composables insert a horizontal line to separate groups of menu items.

نتیجه

قطعه کد قبلی منوِ کرکره‌ای با نمادها و جداکننده‌ها تولید می‌کند:

شکل ۴. منوِ کرکره‌ای که با نمادهای پیشرو و پیرو به بخش‌هایی تقسیم شده است.

منابع بیشتر

• طراحی مواد: منوها