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...

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