منوها

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

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

سطح 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... */ }
            )
        }
    }
}
Menus.kt

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

  • یک DropdownMenu پایه شامل دو آیتم منو را تعریف می کند.
  • پارامتر expanded ، نمایان شدن منو را به صورت باز یا جمع شده کنترل می کند.
  • پارامتر onDismissRequest یک فراخوانی را تعریف می کند که زمانی که کاربر منو را می بندد اجرا می شود.
  • DropdownMenuItem composable موارد قابل انتخاب را در منوی کشویی نشان می دهد.
  • یک IconButton باعث گسترش و فروپاشی منو می شود.

نتیجه

یک منوی کشویی که توسط یک نماد با سه نقطه عمودی فعال می شود. منو دو گزینه قابل انتخاب، گزینه 1 و گزینه 2 را نمایش می دهد.
شکل 2. یک منوی کشویی حداقل با تنها دو گزینه.

یک منوی کشویی طولانی تر ایجاد کنید

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

نتیجه

قطعه کد قبلی منوی قابل پیمایش زیر را تولید می کند:

یک منوی کشویی با گزینه های زیادی که برای مشاهده همه نیاز به پیمایش دارد موارد
شکل 3. یک منوی کشویی طولانی و قابل پیمایش.

یک منوی کشویی طولانی تر با تقسیم کننده ها ایجاد کنید

قطعه زیر اجرای پیشرفته تری از یک منوی کشویی را نشان می دهد. در این قطعه، آیکون های پیشرو و انتهایی به آیتم های منو اضافه می شوند و تقسیم کننده ها گروه هایی از آیتم های منو را از هم جدا می کنند. 

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

نتیجه

قطعه قبلی یک منوی کشویی با نمادها و تقسیم کننده ها تولید می کند:

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

منابع اضافی