منوها

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

منوِ کرکره‌ای با دو گزینه نمایش داده می‌شود. نمادی با سه نقطه عمودی نشان می‌دهد که کلیک کردن روی آن منو را باز می‌کند.
شکل ۱. منو کرکره‌ای ساده‌ای که دو مورد در آن فهرست شده است.

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

از 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 خط افقی‌ای را برای جدا کردن گروه‌های گزینه‌های منو درج می‌کنند.

نتیجه

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

منو کرکره‌ای با بخش‌هایی برای «نمایه»، «تنظیمات»، «ارسال بازخورد»، «درباره»، و «راهنما». هر گزینه نمادی دارد، مثلاً نماد شخص برای «نمایه».
شکل ۴. منو کرکره‌ای که به بخش‌هایی با نمادهای پیشرو و پیرو تقسیم شده است.

منابع بیشتر