Flutter中点击ListView项内按钮时如何显示下方悬浮弹窗？

核心思路 #

通过PopupWindow实现自定义弹窗，获取点击按钮在屏幕中的绝对坐标，计算弹窗的显示位置，确保弹窗精准锚定在按钮正下方。

具体实现步骤 #

1. 编写弹窗布局
   创建弹窗的XML布局（如popup_menu_layout.xml），根据需求设计弹窗内容：

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="#FFFFFF"
       android:orientation="vertical"
       android:elevation="4dp"
       android:padding="8dp">
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="选项1"
           android:padding="12dp"/>
       <View
           android:layout_width="match_parent"
           android:layout_height="1dp"
           android:background="#EEEEEE"/>
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="选项2"
           android:padding="12dp"/>
   </LinearLayout>
   

2. 给列表项按钮设置点击事件
   在ListView的Adapter中，为每个列表项内的按钮绑定点击监听：

   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
       ViewHolder holder;
       if (convertView == null) {
           convertView = LayoutInflater.from(mContext).inflate(R.layout.list_item_layout, parent, false);
           holder = new ViewHolder();
           holder.popupBtn = convertView.findViewById(R.id.item_popup_btn);
           convertView.setTag(holder);
       } else {
           holder = (ViewHolder) convertView.getTag();
       }
   
       holder.popupBtn.setOnClickListener(v -> showPrecisionPopup(v));
       return convertView;
   }
   
   static class ViewHolder {
       Button popupBtn;
   }
   

3. 实现精准定位弹窗的方法
   编写showPrecisionPopup方法，完成弹窗的创建与定位：

   private void showPrecisionPopup(View anchorView) {
       // 加载弹窗布局
       View popupView = LayoutInflater.from(mContext).inflate(R.layout.popup_menu_layout, null);
       // 创建PopupWindow，宽高自适应内容
       PopupWindow popupWindow = new PopupWindow(popupView,
               ViewGroup.LayoutParams.WRAP_CONTENT,
               ViewGroup.LayoutParams.WRAP_CONTENT);
   
       // 配置弹窗基础属性
       popupWindow.setOutsideTouchable(true); // 点击外部关闭弹窗
       popupWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); // 必须设置背景，否则外部点击不生效
       popupWindow.setFocusable(true); // 让弹窗内控件可响应点击
   
       // 方式一：推荐用showAsDropDown快速实现精准定位
       // 默认将弹窗显示在锚点View正下方、左对齐，偏移量设为0即可精准匹配
       popupWindow.showAsDropDown(anchorView, 0, 0);
   
       // 方式二：手动计算屏幕坐标（适配特殊布局场景）
       /*
       int[] location = new int[2];
       anchorView.getLocationOnScreen(location);
       int popupX = location[0];
       int popupY = location[1] + anchorView.getHeight();
       popupWindow.showAtLocation(anchorView.getRootView(), Gravity.NO_GRAVITY, popupX, popupY);
       */
   }
   

关键注意事项 #

• 弹窗背景设置：必须为PopupWindow设置背景，否则外部点击关闭、焦点获取等功能会失效。
• 屏幕边界适配：如果按钮位于屏幕底部，弹窗可能被遮挡，可通过计算弹窗高度与剩余屏幕高度，动态调整弹窗显示位置（比如向上偏移显示）。
• 内存优化：在Adapter中使用ViewHolder模式避免重复创建视图，弹窗使用后及时销毁，防止内存泄漏。

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