如何在Flutter中创建下拉菜单显示于按钮上方的PopupMenuButton

方案：使用PopupWindow替代PopupMenu实现精准位置控制 #

PopupMenu的位置控制灵活性有限，改用PopupWindow可以动态计算菜单高度，完美适配按钮上方的显示需求，避免留白或覆盖按钮的问题。

步骤1：定义菜单布局（popup_menu.xml）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/popup_bg">

    <TextView
        android:id="@+id/menu_item1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="菜单项1"/>

    <TextView
        android:id="@+id/menu_item2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="菜单项2"/>

    <!-- 更多菜单项按需添加 -->
</LinearLayout>

步骤2：代码中实现PopupWindow显示逻辑

// 获取触发菜单的按钮
val triggerBtn = findViewById<Button>(R.id.trigger_btn)

// 加载菜单布局
val popupView = LayoutInflater.from(this).inflate(R.layout.popup_menu, null)

// 创建PopupWindow，先设置宽高为自适应内容
val popupWindow = PopupWindow(
    popupView,
    ViewGroup.LayoutParams.WRAP_CONTENT,
    ViewGroup.LayoutParams.WRAP_CONTENT
)

// 提前测量菜单实际高度（必须先测量才能拿到准确值）
popupView.measure(
    View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
    View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
)
val menuHeight = popupView.measuredHeight
val btnHeight = triggerBtn.height

// 设置按钮点击显示菜单
triggerBtn.setOnClickListener {
    popupWindow.showAsDropDown(
        triggerBtn,
        (triggerBtn.width - popupView.measuredWidth) / 2, // 水平居中偏移
        -(menuHeight + btnHeight) // 垂直偏移：让菜单底部对齐按钮顶部，不覆盖按钮
    )
}

// 给菜单项绑定点击事件
popupView.findViewById<TextView>(R.id.menu_item1).setOnClickListener {
    // 处理菜单项1的逻辑
    popupWindow.dismiss()
}

popupView.findViewById<TextView>(R.id.menu_item2).setOnClickListener {
    // 处理菜单项2的逻辑
    popupWindow.dismiss()
}

核心要点说明

• 动态测量高度：通过measure()方法获取菜单实际高度，避免硬写固定值导致的适配问题，无论菜单项数量多少都能准确计算位置。
• 精准偏移计算：垂直偏移量设为-(菜单高度 + 按钮高度)，确保菜单底部刚好对齐按钮顶部，既不会出现过多留白，也不会覆盖按钮本身。
• 水平居中对齐：通过(按钮宽度 - 菜单宽度)/2的偏移量，让菜单在按钮上方保持水平居中，贴合设计图的视觉要求。

补充：坚持使用PopupMenu的兼容性方案（不推荐） #

如果必须使用PopupMenu，可通过反射调整内部布局，但该方法依赖系统源码实现，不同Android版本可能存在兼容性问题，仅作参考：

val popupMenu = PopupMenu(this, triggerBtn)
popupMenu.inflate(R.menu.your_menu)

// 反射获取内部MenuPopupHelper调整位置
val field = PopupMenu::class.java.getDeclaredField("mPopup")
field.isAccessible = true
val menuPopupHelper = field.get(popupMenu) as MenuPopupHelper

menuPopupHelper.gravity = Gravity.TOP
// 若需精准偏移，需额外反射获取菜单视图并测量高度，逻辑较繁琐
popupMenu.show()

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