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 天前
AI三大核心概念通俗指南:AIGC、Agent、MCP
人工智能·flutter·架构
火柴就是我1 天前
每日见闻之Container Decoration
android·flutter
古希腊被code拿捏的神2 天前
【Flutter】面试记录
flutter·面试·职场和发展
nc_kai2 天前
Flutter 之 table_calendar 控件
flutter
0wioiw02 天前
Flutter基础(前端教程⑨-图片)
前端·flutter
Engandend2 天前
Flutter与iOS混合开发交互
flutter·ios·程序员
浅忆无痕2 天前
Flutter抓包
前端·flutter
火柴就是我2 天前
每日见闻之尝试大白话说清Flutter的事件传递
flutter
yjm2 天前
从一例 Lottie OOM 线上事故读源码
android·app
Lucifer晓2 天前
记录一次Flutter项目上传App Store Connect出现“Validation failed”错误的问题
flutter·ios