简体   繁体   中英

Jetpack compose: how to force a dropdownmenu to be anchored underneath its parent?

I'm currently using a dropdownmenu for selecting one of many options in my app. The problem is that the dropdownmenu expands above where it is originally anchored once it has many elements in it (see images attached). How can I force the drop down menu to stay anchored to the bottom of the button as in the first image? Thanks!

what i want (only works with few items in the list)

the problem (occurs when there is lots of items in the list)

Edit: here is the relevant code:

Box(modifier = Modifier.fillMaxWidth()) { // box for dropdown menu
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { showCategories = true }
                ) {
                    Icon(Icons.Default.Favorite, null)
                    Text("${currentCategory.name}")
                    Icon(
                        painter = painterResource(id = R.drawable.ic_baseline_expand_more_24),
                        contentDescription = "expand more"
                    )
                }
                DropdownMenu(
                    expanded = showCategories,
                    onDismissRequest = {
                        showCategories = false
                    }
                ) {
                    categories.forEach {
                        DropdownMenuItem(
                            onClick = {
                                onCategoryChangeRequest(it)
                                showCategories = false
                            }
                        ) {
                            Text(it.name)
                        }
                    }
                }
            }

You can assign a max size for your DropdownMenu .

DropdownMenu(
    modifier = Modifier.requiredSizeIn(maxHeight = 200.dp),
    ...
)

It worked for me...

在此处输入图像描述

I'm not sure but, try using the offset parameter of the DropdownMenu() .

DropdownMenu(
    offset = DpOffset(x = (-66).dp, y = (-10).dp)
)

Change the x and y values. They accept both positive and negative values.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM