Flutter：自定义组件的上下左右弹出层

最新推荐文章于 2023-11-01 14:43:10 发布
最新推荐文章于 2023-11-01 14:43:10 发布
阅读量1.8k 收藏 3
点赞数 1
分类专栏： Flutter点石成金 文章标签： flutter Flutter开发 Flutter实现弹出层 Flutter弹出框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ming_147/article/details/132568400
版权

背景

最近要使用Flutter实现一个下拉菜单，需求就是，在当前组件下点击，其下方弹出一个菜单选项，如下图所示：

实现起来，貌似没什么障碍，在Flutter中本身就提供了弹出层PopupMenuButton组件和showMenu方法，于是开搞，代码如下：

PopupMenuButton<String>(
      initialValue: '下拉菜单一',
      child: const Text("下拉菜单"),
      itemBuilder: (context) {
        return <PopupMenuEntry<String>>[
          const PopupMenuItem<String>(
            value: '下拉菜单一',
            child: Text('下拉菜单一'),
          ),
          const PopupMenuItem<String>(
            value: '下拉菜单二',
            child: Text('下拉菜单二'),
          ),
          const PopupMenuItem<String>(
            value: '下拉菜单三',
            child: Text('下拉菜单三'),
          )
        ];
      },
    )

直接使用showMenu也行，代码如下：

 showMenu(
            context: context,
            position: const RelativeRect.fromLTRB(0, 0, 0, 0),
            items: <PopupMenuEntry>[
              const PopupMenuItem(value: "下拉菜单一",child: Text("下拉菜单一"),),
              const PopupMenuItem(value: "下拉菜单二",child: Text("下拉菜单二"),),
              const PopupMenuItem(value: "下拉菜单三",child: Text("下拉菜单三"),),
            ]);

PopupMenuButton运行看结果：

showMenu位置传的是左上角，这个就不贴图了。

看到效果后，我诧异了，这也不符合我的需求啊，直接把选项给我盖住了，这还得了，况且位置也不对啊，怎么搞？还好，无论使用PopupMenuButton还是showMenu，都给我们提供了位置。

PopupMenuButton设置位置：

offset: Offset(dx, dy)

showMenu设置位置：

 position: const RelativeRect.fromLTRB(left, top, right, bottom)

使用位置后，我们再看效果：

dx设置为0，dy设置为50：

PopupMenuButton<String>(
      initialValue: '下拉菜单一',
      offset: const Offset(0, 50),
      itemBuilder: (context) {
        return <PopupMenuEntry<String>>[
          const PopupMenuItem<String>(
            value: '下拉菜单一',
            child: Text('下拉菜单一'),
          ),
          const PopupMenuItem<String>(
            value: '下拉菜单二',
            child: Text('下拉菜单二'),
          ),
          const PopupMenuItem<String>(
            value: '下拉菜单三',
            child: Text('下拉菜单三'),
          )
        ];
      },
      child: Text(
        "下拉菜单",
        key: _key,
      ),
    )

效果如下图：

这样看起来确实好多了，但是我的疑问就来了，如果我想实现在左边展示呢？在上边、右边，甚至左上右上，左下右下呢？通过坐标计算，确实能实现，但是计算起来麻烦，也不精确，很难作为上上策，再者，这种弹窗方式样式，在实际开发中也很难满足我们的需求。

既然原生的组件无法满足我们的需求，怎么搞？只有自定义一个组件了。

今天的内容大致如下：

1、自定义弹出层效果一览

2、弹出层逻辑实现

3、使用注意事项

4、源码

一、自定义弹出层效果一览

目前自定义的组件，可以在目标组件，左、上、右、下，左上、右上，左下、右下八个方向进行精确的弹出，当然了，除此之外，也可以动态的展示到自己想要的位置，并且弹出层效果可以自定义，效果是我弹出了一个黑色矩形，你可以弹出一个列表，一个图片等等。

 

二、弹出层逻辑实现

1、悬浮在其他顶部小部件之上

为了更好的展示弹出效果，和不影响UI层的相关逻辑，针对弹出层，我们可以悬浮在内容层之上，做透明处理即可，这里使用到了Overlay对象，它是一个类似悬浮小弹窗，如Toast，安卓的PopupWindow效果。

相关代码如下，创建OverlayEntry，并插入到Overlay中，这样就可以把OverlayEntry中构建的小部件叠加悬浮在其他顶部小部件之上。

OverlayState overlayState = Overlay.of(key.currentContext!);

OverlayEntry _overlayEntry = OverlayEntry();

overlayState.insert(_overlayEntry!);

 

2、获取弹出目标组件的左上右下

所谓目标组件，就是，你想要在哪个组件（左上右下）进行弹出，确定了目标组件之后，为了使弹出层，精确的展示在目标组件的方位，需要拿到目标组件的位置，也就是左上右下的位置，这里使用到了GlobalKey作为获取方式，具体的位置信息获取如下：

///获取组件的位置
  static WidgetSize getWidgetSize(GlobalKey key) {
    //获取组件的位置，在左上右下
    final RenderBox renderBox =
        (key.currentContext?.findRenderObject() as RenderBox);
    final left = renderBox.localToGlobal(Offset.zero).dx; //左边
    final top = renderBox.localToGlobal(Offset(renderBox.size.width, 0)).dy;
    final bottom = renderBox.localToGlobal(Offset(0, renderBox.size.height)).dy;
    final right = renderBox
        .localToGlobal(Offset(renderBox.size.width, renderBox.size.height))
        .dx;
    return WidgetSize(left, top, right, bottom);
  }

创建记录位置对象，用来标记左上右下。

///组件对象，标记左上右下
class WidgetSize {
  double left;
  double top;
  double right;
  double bottom;

  WidgetSize(this.left, this.top, this.right, this.bottom);
}

3、设置弹出层的位置

弹出层位置，这里利用到了Positioned组件，控制其left和top位置，基本上和PopupMenuButton类似，无非就是自己实现了位置的测量而已。

首先根据传递的属性WindowDirection，确定要设置的方位。

具体各个方位计算如下：

目标组件下边：

top坐标：目标组件的底部坐标+边距

left坐标：目标组件的右部坐标-弹出层的宽度/2-目标组件宽度/2

目标组件左边：

top坐标：目标组件的底部坐标-弹出层的高度/2-目标组件的高度/2

left坐标：目标组件的左边坐标-弹出层的宽度-边距

目标组件上边：

top坐标：目标组件的上边坐标-弹出层的高度-边距

left坐标：目标组件的右部坐标-弹出层的宽度/2-目标组件宽度/2

目标组件右边：

top坐标：目标组件的底部坐标-弹出层的高度/2-目标组件的高度/2

left坐标：目标组件的右边坐标+边距

目标组件左上：

top坐标：目标组件的底部坐标-弹出层的高度-目标组件的高度-边距

left坐标：目标组件的左边坐标-弹出层的宽度-边距

目标组件右上：

top坐标：目标组件的底部坐标-弹出层的高度-目标组件的高度-边距

left坐标：目标组件的左边坐标+边距

目标组件左下：

top坐标：目标组件的底部坐标+边距

left坐标：目标组件的左边坐标-弹出层的宽度-边距

目标组件右下：

top坐标：目标组件+边距

left坐标：目标组件右边的坐标+边距

var size = getWidgetSize(key); //获取在目标组件的位置

    double widgetTop = 0.0;
    double widgetLeft = 0.0;
    switch (direction) {
      case WindowDirection.bottom: //下面
        widgetTop = size.bottom + margin;
        widgetLeft =
            size.right - childWidth / 2 - ((size.right - size.left) / 2);
        break;
      case WindowDirection.left: //左面
        widgetTop =
            size.bottom - childHeight / 2 - ((size.bottom - size.top) / 2);
        widgetLeft = size.left - childWidth - margin;
        break;
      case WindowDirection.top: //上面
        widgetTop = size.top - childHeight - margin;
        widgetLeft =
            size.right - childWidth / 2 - ((size.right - size.left) / 2);
        break;
      case WindowDirection.right: //右面
        widgetTop =
            size.bottom - childHeight / 2 - ((size.bottom - size.top) / 2);
        widgetLeft = size.right + margin;
        break;
      case WindowDirection.topLeft: //左上
        widgetTop =
            size.bottom - childHeight - (size.bottom - size.top) - margin;
        widgetLeft = size.left - childWidth - margin;
        break;
      case WindowDirection.topRight: //右上
        widgetTop =
            size.bottom - childHeight - (size.bottom - size.top) - margin;
        widgetLeft = size.right + margin;
        break;
      case WindowDirection.bottomLeft: //左下
        widgetTop = size.bottom + margin;
        widgetLeft = size.left - childWidth - margin;
        break;
      case WindowDirection.bottomRight: //右下
        widgetTop = size.bottom + margin;
        widgetLeft = size.right + margin;
        break;
      case WindowDirection.none: //取消 自己测量位置
        widgetTop = top;
        widgetLeft = left;
        break;
    }

三、使用注意事项

1、为了能够精确的设置弹出层的位置，其弹出层的宽度和高度是必须要传递的，也就是childWidth和childHeight属性。

2、如果想自己设置位置，可以不传childWidth和childHeight，设置direction为WindowDirection.none，并且left和top坐标需要传递。

3、margin属性设置弹出层距离目标组件的距离。

四、源码

源码地址

https://github.com/AbnerMing888/flutter_widget/blob/master/lib/utils/popup_window.dart

使用方式

PopupWindow.create(
              _key,
              const BaseWidget(
                width: 100,
                height: 100,
                backgroundColor: Colors.black,
              ),
              direction: direction,
              margin: 10,
              childWidth: 100,
              childHeight: 100);

参数介绍

属性

类型

概述

key

GlobalKey

目标组件的key

child

Widget

弹出层

childWidth

double

弹出层的宽

childHeight

double

弹出层的高

direction

WindowDirection

位置：

left//左

top//上

right//右

bottom//下

topLeft, //左上角

topRight, //右上角

bottomLeft, //左下

bottomRight, //右下

none//取消位置，自己定义

left

double

相对于屏幕的左侧坐标

top

double

相对于屏幕的顶部坐标

margin

double

弹出层距离目标组件的距离

程序员一鸣
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
flutter 弹窗之系列一
我很好
03-26 2395
override},// 一些耗时操作},// await 其他耗时操作@override),},'\n点击显示弹窗一\n',),),},'\n点击显示弹窗二\n',),),],)),/// 点击背景是否关闭弹窗/// 页面状态，用来做动画判断/// 动画时长/// 初始化dialog的内容/// [isClose]用来标识动画的状态/// [milliseconds]用来标识动画时长builder) {// 背景。
flutter中【底部弹出输入框】实现
最新发布
season_26的博客
05-24 972
图二，如果为return SizedBox给弹窗设置背景色为white，输入框看不清楚。子组件接收到这个函数，在对应位置调用这个函数，将内部值作为函数参数（父组件对该函数作具体规定，如对接收的参数作何处理等），父组件就拿到了弹窗内的值。图一，为return Container设置背景色为white，输入框的灰色十分明显。官网的两种示例，一种是直角弹窗，一种是圆角弹窗。，其背景色会覆盖弹窗的背景色设置，弹窗背景色就无法被看到。针对函数的封装，可以封装为一个类，也可以封装为单独的函数。
flutter 自定义中间弹窗
python4_1的博客
10-20 237
flutter自定义中间弹窗按钮
flutter的弹出框
浩星
03-30 3034
前言： flutter的弹框有很多，这里分享两个 AlertDialog AlertDialog 是一个用于向用户传递信息的弹出层。 new MaterialButton( color: Colors.blue, child: new Text('点我'), onPressed: () { showDialog<Null>( context: context, barrierDis...
flutter疑难杂症之记一次RenderBox测量坐标错误
不忘初心
05-09 1889
项目中用到精确坐标计算，要求在绘制完成后立即测量控件在屏幕中的坐标，代码如下： void initState（）{ ... WidgetsBinding.instance.addPostFrameCallback((callback) { _calculateAfterLayout(); }); ... }...
flutter 实现消息提醒弹窗
weixin_44911775的博客
09-23 2772
2.如果出现第二条消息，即如果第一个对象不为空时，如果全局ID等于传来的ID，就用eventbus，如果不等，就创建第二个对象，半秒钟弹出，而且让第一个对象半秒钟就消失，为空，确保只有一个对象不为null，下次进来的时候就会走第一个对象的方法。1.如果第一个对象不为空，第二个对象为空，就用eventbus，取消定时器，重置时间关闭弹窗。如果第一个对象是空的就创建第一个对象。三种情况，两个都是null，第一个对象为null，第二个对象为null，不要让两个同时为null。可以用两个覆盖对象来实现效果。
Flutter高阶技术：如何实现自定义弹出菜单框
06-03
本篇文章将深入探讨如何在Flutter中创建自定义弹出菜单框，包括它的设计原理、实现步骤以及相关组件的使用。 首先，我们要理解弹出菜单框的基本概念。它通常是在用户点击某个按钮或进行特定操作后，从屏幕边缘滑出...
Flutter开发：自定义Drawer的滑出位置的大小
01-03
那么本篇博文分享一个网上教程不多的一个知识点，那就是自定义Drawer的滑出位置的大小，自定义Drawer滑出位置就需要修改一个double的widthPercent属性，widthPercent一般默认值是0.7，然后想要修改widthPercent的...
poc-theme-flutter:自定义扑主题的POC
03-29
POC-Flutter自定义主题主要目标是创建一个支持深色/浅色模式的自定义主题。怎么做的它是使用创建的。 GlobalAppTheme是存储黑暗模式的继承小部件。 MTheme是另一个继承主题的继承控件。 嵌套主题可以有多个级别。 ...
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
主要介绍了Flutter之自定义Dialog实现版本更新弹窗功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
popwindow简单实现顶部筛选
05-19
使用popwindow简单实现的顶部筛选框，有简单的缩放效果，布局可自己调
Flutter入门与实战：菜单弹出框
09-15
Flutter以其丰富的自定义能力和跨平台兼容性，为开发者提供了多种创建菜单弹出框的方式。让我们一起探索如何在Flutter应用中实现这一功能。 首先，我们需要了解Flutter中的基础概念。Flutter是一个由Google开发的...
Flutter 自定义Drawer 滑出位置的大小实例代码详解
08-19
Flutter 自定义Drawer 滑出位置的大小实例代码详解 Flutter 中的 Drawer 控件是一个非常常用的控件，它可以侧边栏滑出导航菜单，类似于 iOS 开发或者 Android 开发中的“抽屉”效果。_drawer 控件的使用频率也是...
Flutter实战之自定义日志打印组件详解
08-26
Flutter自定义日志打印组件详解 本文主要介绍了Flutter中自定义日志打印组件的详细实现过程。自定义日志打印组件是为了解决Flutter中默认的日志打印方式不友好的问题。如果不进行自定义，我们只能使用自带的print()...
flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果
一名开发者
07-13 2202
flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果，使用到了flutter的showDialog与showModalBottomSheet来显示对话框与屏幕下方弹出一个对话框功能。
Flutter 04 按钮Button和事件处理、弹框Dialog、Toast
sziitjin的博客
11-01 899
/ 自定义dialogFunction()?onClosed;@overridePadding(Align(),Align(),],),),Container(],),)),//top值，可以改变这个值来改变toast在屏幕中的位置)),///往Overlay中插入插入OverlayEntry///两秒后，移除Toast});//toast UI绘制Container(),msg,),],//处理重复多次点击//相同信息内容。
flutter -各类自定义弹窗(图片预览，输入框，键盘)以及如何阻止事件冒泡
Emperor灬fly的博客
07-27 1707
       开局废话：由于公司app后期需要做混合开发，又担心h5的性能问题。于是迫不得已，只能两端齐搞，验证一些性能优化的问题。打开了一年前flutter正式发布时，蹭热度创建的现已布满藤蔓的仓库，微微颤抖的双手，开始敲击键盘。        先说下普通的自定义弹窗吧，鉴于弹窗一般只起一些提示，跟选择功能，所以没必要去单独注册路由，继承showDialog父类就可以
flutter 自定义tab组件
08-14
在Flutter中，可以通过自定义Widget来创建一个自定义的Tab组件。首先，我们可以创建一个自定义的Tab类，继承自StatefulWidget，并实现它的build方法。 ```dart class CustomTab extends StatefulWidget { final String title; final bool isSelected; final Function onTap; CustomTab({required this.title, required this.isSelected, required this.onTap}); @override _CustomTabState createState() => _CustomTabState(); } class _CustomTabState extends State<CustomTab> { @override Widget build(BuildContext context) { return GestureDetector( onTap: widget.onTap, child: Container( color: widget.isSelected ? Colors.blue : Colors.transparent, child: Text( widget.title, style: TextStyle( fontSize: 16, color: widget.isSelected ? Colors.white : Colors.black, ), ), ), ); } } ``` 在这个自定义Tab类中，我们需要传入三个参数：title（标签的标题），isSelected（标签是否被选中），onTap（点击标签的回调方法）。 接下来，我们可以在TabBar中使用这个自定义Tab组件。 ```dart class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Custom Tab'), ), body: Column( children: [ TabBar( controller: _tabController, tabs: [ CustomTab( title: 'Tab 1', isSelected: _tabController.index == 0, onTap: () { _tabController.animateTo(0); }, ), CustomTab( title: 'Tab 2', isSelected: _tabController.index == 1, onTap: () { _tabController.animateTo(1); }, ), CustomTab( title: 'Tab 3', isSelected: _tabController.index == 2, onTap: () { _tabController.animateTo(2); }, ), ], ), Expanded( child: TabBarView( controller: _tabController, children: [ Center(child: Text('Content 1')), Center(child: Text('Content 2')), Center(child: Text('Content 3')), ], ), ), ], ), ); } } ``` 在这个例子中，我们使用TabBar和TabBarView来显示标签和对应的内容。自定义的Tab组件被作为TabBar的child组件传入。TabBar接收一个TabController来管理标签的切换。每个自定义Tab组件通过传入isSelected参数来判断自身是否被选中，并通过onTap回调方法来触发点击事件并切换标签。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员一鸣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值