منوها

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

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

سطح API

از کامپوننت‌های 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 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... */ }
                )
            }
        }
    }
}

نکات کلیدی در مورد کد

  • DropdownMenu زمانی قابل اسکرول است که ارتفاع کل محتوای آن از فضای موجود بیشتر شود. این کد یک DropdownMenu قابل اسکرول ایجاد می‌کند که ۱۰۰ آیتم را نمایش می‌دهد.
  • حلقه forEach به صورت پویا کامپوننت‌های DropdownMenuItem تولید می‌کند. این آیتم‌ها به صورت تنبل (lazyly) ایجاد نمی‌شوند، به این معنی که هر ۱۰۰ آیتم کشویی ایجاد شده و در کامپوننت وجود دارند.
  • 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 یک خط افقی برای جدا کردن گروه‌هایی از آیتم‌های منو درج می‌کنند.

نتیجه

قطعه کد قبلی یک منوی کشویی با آیکون‌ها و جداکننده‌ها ایجاد می‌کند:

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

منابع اضافی