Jetpack Compose 中的下拉菜单

Question

我对 DropdownMenu 有疑问。当我单击 Morevert 图标时，菜单在左侧打开，我希望它在右侧打开。我在 Row 中有一个 TextField (weight=6f) 和 Morevert Icon (weight=1f)。我不明白为什么它在左边打开。感谢您的帮助。

这是我的代码：

@Composable
fun HistorySearchBar(
    text: String,
    onTextChange: (String) -> Unit,
    onCloseClicked: () -> Unit,
    onSearchClicked: (String) -> Unit
) {
    val focusRequester = remember { FocusRequester() }
    val focus = remember { mutableStateOf(false) }
    var showMenu by remember { mutableStateOf(false) }
    val inputService = LocalTextInputService.current

    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp),
        elevation = AppBarDefaults.TopAppBarElevation,
        color = MaterialTheme.colors.primary
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(
                modifier = Modifier.weight(6f)
                    .focusRequester(focusRequester)
                    .onFocusChanged {
                        if (focus.value != it.isFocused) {
                            focus.value = it.isFocused
                            if (!it.isFocused) {
                                onTextChange("")
                                inputService?.hideSoftwareKeyboard()
                            }
                        }

                },
            value = text,
            onValueChange = {
                onTextChange(it)
            },
            placeholder = {
                Text(
                    modifier = Modifier.alpha(ContentAlpha.medium),
                    text = "Search in History...",
                    color = Color.White
                )
            },
            textStyle = TextStyle(
                fontSize = MaterialTheme.typography.subtitle1.fontSize
            ),
            singleLine = true,
            trailingIcon = {
                if(text.isNotEmpty()) {
                    IconButton(
                        onClick = {
                            if (text.isNotEmpty()) {
                                onTextChange("")
                            } else {
                                onCloseClicked()
                            }
                        }) {
                        Icon(
                            imageVector = Icons.Default.Close,
                            contentDescription = "Search Icon",
                            tint = Color.White
                        )
                    }
                }}
            ,
            keyboardOptions = KeyboardOptions(
                imeAction = ImeAction.Search
            ),
            keyboardActions = KeyboardActions(
                onSearch = {
                    onSearchClicked(text)
                }
            ),
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                cursorColor = Color.White.copy(alpha = ContentAlpha.medium)
            )
        )
        IconButton(onClick = { showMenu = !showMenu}, modifier = Modifier.weight(1f)) {
            Icon(Icons.Default.MoreVert, "")
        }

        DropdownMenu(
            expanded = showMenu,
            onDismissRequest = { showMenu = false }) {
            DropdownMenuItem(onClick = { }) {
                Text(text= "Clear All History")
            }
        }
    }
}

}

Answer 1

A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. Commonly a DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'.

目前DropdownMenu的父级是Surface，其位置是upper-left角。

您可以在IconButton()中移动DropdownMenu()；甚至更好地将 DropdownMenu() 和 IconButton() 包装在 Box() 中。下拉菜单将使用框的位置来计算它自己的位置，而 IconButton 将充当锚点。

@Composable
fun HistorySearchBar(
    text: String,
) {
    var showMenu by remember { mutableStateOf(false) }
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .height(56.dp),
        elevation = AppBarDefaults.TopAppBarElevation,
        color = MaterialTheme.colors.primary
    ) {
        Row(modifier = Modifier.fillMaxWidth()) {
            TextField(...
            )
            Box(modifier = Modifier.weight(1f)){
                IconButton(onClick = { showMenu = !showMenu }) {
                    Icon(Icons.Default.MoreVert, "")
                }
                DropdownMenu(
                    expanded = showMenu,
                    onDismissRequest = { showMenu = false }) {
                    DropdownMenuItem(onClick = { }) {
                        Text(text = "Clear All History")
                    }
                }
            }
        }
    }
}

Jetpack Compose 中的下拉菜单

DropdownMenu in Jetpack Compose

kotlin

drop-down-menu

android-jetpack-compose