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

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

相关推荐
火柴就是我1 天前
flutter 之真手势冲突处理
android·flutter
Speed1231 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间1 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭1 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone1 天前
从flutter源码看其渲染机制
android·flutter
ALLIN2 天前
Flutter 三种方式实现页面切换后保持原页面状态
flutter
Dabei2 天前
Flutter 国际化
flutter
Dabei2 天前
Flutter MQTT 通信文档
flutter
Dabei2 天前
Flutter 中实现 TCP 通信
flutter
孤鸿玉2 天前
ios flutter_echarts 不在当前屏幕 白屏修复
flutter