Jetpack Compose 点击Icon无法正常切换DropdownMenu显隐如何解决

该问题由事件分发顺序导致：DropdownMenu基于Popup实现，展开时处于独立的窗口层级，触摸事件优先级高于下层普通组件。当点击Icon区域关闭菜单时，Popup层会先检测到外部点击，触发onDismissRequest将expanded设为false，菜单销毁后，同一次点击事件才会传递到下层的Icon组件，触发点击切换逻辑将expanded重新设为true，最终表现为点击Icon无法关闭菜单。

你设想的让onDismissRequest消费交互事件的方案不可行，因为Popup和下层内容属于不同的窗口，事件流相互独立，Popup层无法直接拦截下层组件的触摸事件。

方案1：加点击防抖（兼容所有Compose Material版本） #

通过记录菜单关闭的时间戳，过滤同一次点击触发的Icon点击事件，实现成本低，无兼容问题：

@Composable
fun MyComponent() {
  var expanded by remember { mutableStateOf(false) }
  // 记录上次菜单关闭的时间戳
  var lastDismissTimestamp by remember { mutableStateOf(0L) }

  Column() {
    Icon(Icons.Filled.Menu, "",
      Modifier.clickable {
        // 距离上次关闭小于300ms时，判定为同一次点击，不执行切换
        if (System.currentTimeMillis() - lastDismissTimestamp > 300) {
          expanded = !expanded
        }
      }
    )
    DropdownMenu(expanded, {
      expanded = false
      lastDismissTimestamp = System.currentTimeMillis()
    }) {
      DropdownMenuItem({ }) {
        Text("Menu item")
      }
    }
  }
}

方案2：使用官方锚定组件（推荐，Material 3） #

Material 3提供了专门的ExposedDropdownMenuBox组件，原生处理了锚点点击和菜单关闭的冲突问题，不需要额外自定义逻辑：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyComponent() {
  var expanded by remember { mutableStateOf(false) }

  ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = { expanded = it }
  ) {
    Icon(
      Icons.Filled.Menu, 
      contentDescription = "菜单",
      // 标记为菜单锚点，组件会自动处理点击冲突
      modifier = Modifier.menuAnchor()
    )
    ExposedDropdownMenu(
      expanded = expanded,
      onDismissRequest = { expanded = false }
    ) {
      DropdownMenuItem(
        onClick = { /* 处理菜单项点击逻辑 */ },
        text = { Text("Menu item") }
      )
    }
  }
}

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