[英]DropdownMenu in Jetpack Compose
I have a problem about DropdownMenu.我有关于 DropdownMenu 的问题。 When I click the Morevert Icon, the menu opens on the left, I want it to open on the right.当我单击 Morevert 图标时,菜单在左侧打开,我希望它在右侧打开。 I have a TextField ( weight=6f
) and Morevert Icon ( weight=1f
) in a Row
.我在Row
中有一个 TextField ( weight=6f
)和 Morevert Icon ( weight=1f
)。 I don't understand why it opens on the left.我不明白为什么它在左侧打开。 Thanks for any help.谢谢你的帮助。
Here is my code:这是我的代码:
@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")
}
}
}
}
} }
A DropdownMenu behaves similarly to a Popup, and will use the position of the parent layout to position itself on screen. DropdownMenu的行为类似于 Popup,并将使用父布局的 position 到屏幕上的 position 本身。 Commonly a DropdownMenu will be placed in a Box with a sibling that will be used as the 'anchor'.通常,DropdownMenu 将放置在具有兄弟姐妹的 Box 中,该兄弟姐妹将用作“锚”。
Currently the parent of DropdownMenu
is the Surface
whose position is upper-left corner.目前DropdownMenu
的父级是Surface
,其 position 位于左上角。
You can move DropdownMenu()
in the IconButton()
;您可以在IconButton()
中移动DropdownMenu()
) ; or even better wrap both DropdownMenu()
and IconButton()
in a Box()
.甚至更好地将DropdownMenu()
和IconButton()
包装在Box()
中。 Dropdown menu will use the box's position to calculate it's own position and IconButton will act as an anchor.下拉菜单将使用盒子的 position 来计算它自己的 position 和 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")
}
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.