我正在尝试制作一个 Ui 组件，因此当我单击“附件”按钮时，应该会弹出一个下拉菜单并显示下拉菜单项。我想让下拉菜单作为“下拉”菜单弹出，这意味着单击图标时，我想向上显示菜单，而不是向下显示菜单。但是当我制作它时，它没有显示下拉菜单中的项目。
这些是我的下拉菜单的代码片段，以及它的使用位置->
@Composable
fun AttachmentsDropDownMenu(
modifier: Modifier = Modifier,
state: MessageScreenState,
action: (MessageScreenAction) -> Unit
){
val buttonHeight = 48.dp // Height of your button
val dropdownHeight = 120.dp // Approximate height of your dropdown
// Dropdown Menu
DropdownMenu(
expanded = state.showAttachmentDropDown,
onDismissRequest = { action(MessageScreenAction.onHideAttachmentDropDownMenu) },
modifier = modifier.offset(y = -dropdownHeight - buttonHeight) // Shift above the button
) {
DropdownMenuItem(
onClick = { action(MessageScreenAction.onHideAttachmentDropDownMenu) },
text = { Text(text = "Photo")}
)
DropdownMenuItem(
onClick = { action(MessageScreenAction.onHideAttachmentDropDownMenu) },
text = { Text(text = "Video")}
)
DropdownMenuItem(
onClick = { action(MessageScreenAction.onHideAttachmentDropDownMenu)},
text = { Text(text = "Document")}
)
}
}
这里使用下拉菜单：
@Composable
fun MessagesScreen(
modifier: Modifier = Modifier,
id: Int,
state: MessageScreenState,
onActions: (MessageScreenAction) -> Unit
){
Scaffold(
modifier = modifier
.fillMaxSize()
) {innerPadding->
Column (
modifier = Modifier
.padding(innerPadding)
){
LazyColumn(
modifier = Modifier
.fillMaxSize()
.weight(1f)
) {
items((1..100).toList()){
Text(text = "item ${it}")
}
}
//For reply
Row (
modifier = Modifier
.padding(8.dp)
.fillMaxWidth()
.wrapContentHeight(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
){
Row (
modifier = Modifier
.height(50.dp)
.weight(1f)
.clip(RoundedCornerShape(32.dp))
.background(Color.LightGray),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
){
Icon(
imageVector = ImageVector.vectorResource(id = R.drawable.mood_24dp_5f6368_fill0_wght400_grad0_opsz24),
contentDescription = "emojis",
modifier = Modifier
.padding(start = 8.dp)
.clickable {
//TODO DO SOMETHING to show emojis
}
.size(30.dp)
)
//Reply text message
Box(
modifier = Modifier
.padding(horizontal = 8.dp)
.weight(1f)
) {
// Placeholder Text
if (state.replyMessage.isEmpty()) {
Text(
text = "Enter your message here...",
style = TextStyle(color = Color.Gray)
)
}
// BasicTextField
BasicTextField(
value = state.replyMessage,
onValueChange = {
onActions(MessageScreenAction.onReplyMessageChange(it))
},
modifier = Modifier.fillMaxWidth()
)
}
Icon(
imageVector = ImageVector.vectorResource(id = R.drawable.attachment) ,
contentDescription = "attachment",
modifier = Modifier
.padding(end = 8.dp)
.clickable {
//TODO DO SOMETHING about sharing attachments
onActions(MessageScreenAction.onShowAttachmentDropDownMenu)
}
.size(30.dp)
)
Icon(
imageVector = ImageVector.vectorResource(id = R.drawable.baseline_camera_alt_24),
contentDescription = "camera",
modifier = Modifier
.padding(end = 8.dp)
.clickable {
//TODO DO SOMETHING about camera feature
}
.size(30.dp)
)
}
Spacer(modifier = Modifier.width(8.dp))
Box(modifier = Modifier
.size(50.dp)
.clip(CircleShape)
.background(Color.Green)
.clickable {
//TODO implement the audio recording button when there is no message typed
},
contentAlignment = Alignment.Center
){
Icon(
imageVector = if (state.replyMessage == "") ImageVector.vectorResource(id = R.drawable.baseline_mic_24) else ImageVector.vectorResource(
id = R.drawable.send_24dp_5f6368_fill0_wght400_grad0_opsz24
),
contentDescription = if (state.replyMessage == "") "Mic" else "Send",
modifier = Modifier
.size(40.dp)
)
}
}
// Attachments Dropdown Menu
if (state.showAttachmentDropDown) {
AttachmentsDropDownMenu(
state = state,
action = onActions,
modifier = Modifier
.padding(8.dp) // Positioning near the attachment button
)
}
}
}
}
用组合和填充替换手动偏移逻辑，以实现“下拉”行为。
更新代码如下：
@Composable
fun AttachmentDropDownMenu (
modifier: Modifier = Modifier,
state: MessageScreenState,
action: (MessageScreenAction) -> Unit
){
Box(modifier = modifier) {
DropdownMenu(
expanded = state.showAttachmentDropDown,
onDismissRequest = { action(MessageScreenAction.onHideAttachmentDropDownMenu) },
modifier = Modifier
.background(MaterialTheme.colorScheme.surface) // Optional background styling
) {
DropdownMenuItem(
onClick = { action(MessageScreenAction.onHideAttachmentDropDownMenu) },
text = { Text(text = "Photo") }
)
DropdownMenuItem(
onClick = { action(MessageScreenAction.onHideAttachmentDropDownMenu) },
text = { Text(text = "Video") }
)
DropdownMenuItem(
onClick = { action(MessageScreenAction.onHideAttachmentDropDownMenu) },
text = { Text(text = "Document") }
)
}
}
}
将 AttachmentsDropDownMenu 放在按钮上方。
@Composable
fun MessagesScreen(
modifier: Modifier = Modifier,
id: Int,
state: MessageScreenState,
onActions: (MessageScreenAction) -> Unit
) {
Scaffold(
modifier = modifier.fillMaxSize()
) { innerPadding ->
Column(
modifier = Modifier.padding(innerPadding)
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.weight(1f)
) {
items((1..100).toList()) {
Text(text = "item ${it}")
}
}
// Reply Row
Box(modifier = Modifier.fillMaxWidth()) {
Row(
modifier = Modifier
.align(Alignment.BottomCenter)
.padding(8.dp)
.height(50.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(32.dp))
.background(Color.LightGray),
verticalAlignment = Alignment.CenterVertically
) {
// Existing Icons and TextField
Icon(
imageVector = ImageVector.vectorResource(id = R.drawable.attachment),
contentDescription = "attachment",
modifier = Modifier
.clickable {
onActions(MessageScreenAction.onShowAttachmentDropDownMenu)
}
.padding(8.dp)
)
// Other icons here...
}
// Attachments Dropdown Menu
if (state.showAttachmentDropDown) {
AttachmentsDropDownMenu(
state = state,
action = onActions,
modifier = Modifier
.align(Alignment.TopCenter) // Align dropdown above the button
.padding(bottom = 50.dp) // Adjust as per button height
)
}
}
}
}
}