Jetpack Compose中的DropdownMenu

Question

我有一个关于DropdownMenu的问题。当我点击Morevert图标时，菜单会在左边打开，但我希望它在右边打开。我在一个Row中有一个TextField（权重为6f）和Morevert图标（权重为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")
            }
        }
    }
}

}

- Hasan Cihad Altay

Answer 1

一个DropdownMenu的行为类似于一个弹出框，会使用父布局的位置在屏幕上定位自己。通常情况下，一个DropdownMenu会被放置在一个Box中，有一个兄弟视图被用作“锚点”。

目前，DropdownMenu的父容器是Surface，其位置在左上角。

你可以将DropdownMenu()移动到IconButton()内部；或更好地，将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")
                    }
                }
            }
        }
    }
}

- Shreyash.K

---

感谢您的回答和解释。 - Hasan Cihad Altay

很高兴能帮忙。此外，您可能希望将 TextField 的权重设置为 1f，并对 MoreVert 父 Box 应用一些固定宽度，例如 48.dp，除非您希望实现不同的效果。 - Shreyash.K

另外一个友好的提示是：尝试尽可能地保持代码示例的简短。仅包含必要的部分。这有助于其他人更快地找到解决方案。 - Shreyash.K