如何调整Jetpack Compose中Scaffold顶部栏下拉菜单的显示位置

要让下拉菜单在顶部栏左侧或右侧灵活显示，你可以通过动态控制对齐状态来实现，结合你现有的Scaffold结构，具体修改如下：

1. 添加对齐状态变量 #

在你的AgendaScreenState中新增一个控制对齐方向的变量：

data class AgendaScreenState(
    // 其他现有字段...
    val dropdownAlignment: Alignment.Horizontal = Alignment.End // 默认右对齐
)

2. 修改下拉菜单的对齐逻辑 #

将AgendaDropDownMenu的align参数替换为状态变量，同时根据触发按钮的位置更新这个状态：

Scaffold(
    modifier = modifier,
    topBar = {
        Column(modifier = Modifier.fillMaxWidth()) {
            AgendaTopBar(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(color = MaterialTheme.colorScheme.backgroundBackColor)
                    .padding(start = 16.dp, end = 16.dp, top = 8.dp, bottom = 8.dp),
                initials = agendaScreenState.usersInitials,
                displayMonth = agendaScreenState.selectedDate.month.toString(),
                // 假设你有左侧触发按钮，比如onLeftButtonClicked
                onLeftButtonClicked = {
                    agendaScreenEvent(AgendaScreenEvent.OnSetDropdownAlignment(Alignment.Start))
                    agendaScreenEvent(AgendaScreenEvent.OnOpenLogoutDropDownMenu(shouldOpen = true))
                },
                onProfileButtonClicked = {
                    agendaScreenEvent(AgendaScreenEvent.OnSetDropdownAlignment(Alignment.End))
                    agendaScreenEvent(AgendaScreenEvent.OnOpenLogoutDropDownMenu(shouldOpen = true))
                },
                onDateClicked = {
                    calendarState.show()
                },
            )

            AgendaDropDownMenu(
                modifier = Modifier
                    .background(color = MaterialTheme.colorScheme.dropDownMenuBackgroundColor)
                    .align(agendaScreenState.dropdownAlignment), // 动态绑定对齐方向
                shouldOpenDropdown = agendaScreenState.shouldOpenLogoutDropDownMenu,
                onCloseDropdown = {
                    agendaScreenEvent(
                        AgendaScreenEvent.OnChangedShowDropdownStatus(shouldOpen = false)
                    )
                },
                listOfMenuItemId = listOf(me.androidbox.presentation.R.string.logout),
                onSelectedOption = { _ ->
                    agendaScreenEvent(AgendaScreenEvent.OnOpenLogoutDropDownMenu(shouldOpen = false))
                    onLogout()
                }
            )
        }
    },
    floatingActionButton = { 
        // 现有代码...
    }
)

3. 新增对应的事件处理 #

在AgendaScreenEvent中添加设置对齐方向的事件，并在ViewModel中处理状态更新：

sealed class AgendaScreenEvent {
    // 其他现有事件...
    data class OnSetDropdownAlignment(val alignment: Alignment.Horizontal) : AgendaScreenEvent()
}

// ViewModel中的状态更新逻辑
fun handleEvent(event: AgendaScreenEvent) {
    when(event) {
        is AgendaScreenEvent.OnSetDropdownAlignment -> {
            _state.update { it.copy(dropdownAlignment = event.alignment) }
        }
        // 其他事件处理...
    }
}

关键说明 #

• Column的align(Alignment)修饰符支持动态参数，通过状态变量切换Alignment.Start（左侧）或Alignment.End（右侧），就能实现菜单的左右定位。
• 点击不同位置的触发按钮时，先更新对齐状态再打开菜单，即可让菜单显示在对应位置。

内容的提问来源于stack exchange，提问作者ant2009