Flutter版本的PopupWindow,可自行调整显示位置

在做Android开发的时候经常会使用Popupwindow来让一个弹框显示在某个View的上方或者下方,但是当显示位置不足时,Popupwindow会自动调整位置来让内容完整显示。最近在flutter开发中也有响应的需求,所以就按照Android组件的思路封装了一个flutter版本的PopupWindow.GitHub源码在最下方,需要的同学们自取就OK

先看效果图:

使用方法:

1.基础用法(不推荐,后续有更简便用法)

想要点击按钮后在按钮的上方显示

less 复制代码
ElevatedButton(
  key: _aboveKey,
  child: const Text('show above the button'),
  onPressed: () => _showAboveWindow(),
),

需要先计算出锚点widget在屏幕上的Y坐标,然后创建PopupWindow,

less 复制代码
void _showAboveWindow() {
  //需要先找到锚点widget
  final renderBox = _aboveKey.currentContext?.findRenderObject() as RenderBox?;
  if (renderBox == null) {
    return;
  }
  final offset = renderBox.localToGlobal(Offset.zero);
  
  _aboveWindow ??= DefaultPopupWindow(
    context: context,
    //展示在目标上方
    position: PopupWindowPosition.top,
    //传入锚点widget顶部的Y坐标
    anchorY: offset.dy,
    offset: Offset.zero,
    barrierColor: Colors.yellow.withOpacity(0.5),
    //弹框展示的内容是child
    child: GestureDetector(
      onTap: () => _aboveWindow?.dismiss(),
      child: Material(
        child: Container(
          color: Colors.red,
          padding: const EdgeInsets.all(20),
          width: MediaQuery.of(context).size.width,
          child: const Text(
            'This is the PopupWindow Content',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    ),
  );
  _aboveWindow?.show();
}

2.简便用法(推荐用法,代码量极少):

用PopupWindowWrapper来包裹住锚点widget

less 复制代码
PopupWindowWrapper(
  controller: _controller,//默认可以不传,可以在任何地方让弹框展示或者隐藏
  windowPosition: PopupWindowPosition.bottom,//展示在目标下方,默认就是下方
  windowBarrierDismissible: false,//点击空白区域是否可关闭,默认可以关闭
  //弹框内显示的内容
  windowContent: Material(
    child: GestureDetector(
      //让弹框切换状态(展示就隐藏,隐藏就展示),如果windowBarrierDismissible=true,可以不用
      onTap: () => _controller.switchStatus(),
      child: Container(
        color: Colors.red,
        padding: const EdgeInsets.all(20),
        width: MediaQuery.of(context).size.width,
        child: const Text(
          'This is the PopupWindow Content',
          style: TextStyle(fontSize: 20),
        ),
      ),
    ),
  ),
  //目标组件,弹框会显示在该组件的下方
  child: Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.blue, width: 2),
      borderRadius: const BorderRadius.all(Radius.circular(50)),
    ),
    child: const Text('show under the button'),
  ),
),

开发思路

主要Class关系

GitHub源码地址:github.com/cgztzero/Fl...

希望各位同学报团取暖,延续职业生涯~

相关推荐
小蜜蜂嗡嗡4 小时前
flutter封装vlcplayer的控制器
前端·javascript·flutter
你听得到1114 小时前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
哲科软件1 天前
跨平台开发的抉择:Flutter vs 原生安卓(Kotlin)的优劣对比与选型建议
android·flutter·kotlin
天涯海风1 天前
Kuikly 与 Flutter 的全面对比分析,结合技术架构、性能、开发体验等核心维度
flutter·kuikly
aiprtem1 天前
基于Flutter的web登录设计
前端·flutter
coder_pig1 天前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
程序员老刘1 天前
Android 16开发者全解读
android·flutter·客户端
Jalor1 天前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
吴Wu涛涛涛涛涛Tao1 天前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
九丝城主1 天前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--中篇
服务器·flutter·macos·vmware