背景

最近要使用Flutter實(shí)現(xiàn)一個(gè)下拉菜單，需求就是，在當(dāng)前組件下點(diǎn)擊，其下方彈出一個(gè)菜單選項(xiàng)，如下圖所示：

實(shí)現(xiàn)起來，貌似沒什么障礙，在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運(yùn)行看結(jié)果：

showMenu位置傳的是左上角，這個(gè)就不貼圖了。

看到效果后，我詫異了，這也不符合我的需求啊，直接把選項(xiàng)給我蓋住了，這還得了，況且位置也不對(duì)啊，怎么搞？還好，無論使用PopupMenuButton還是showMenu，都給我們提供了位置。

PopupMenuButton設(shè)置位置：

offset: Offset(dx, dy)

showMenu設(shè)置位置：

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

使用位置后，我們?cè)倏葱Ч?#xff1a;

dx設(shè)置為0，dy設(shè)置為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,),)

效果如下圖：

這樣看起來確實(shí)好多了，但是我的疑問就來了，如果我想實(shí)現(xiàn)在左邊展示呢？在上邊、右邊，甚至左上右上，左下右下呢？通過坐標(biāo)計(jì)算，確實(shí)能實(shí)現(xiàn)，但是計(jì)算起來麻煩，也不精確，很難作為上上策，再者，這種彈窗方式樣式，在實(shí)際開發(fā)中也很難滿足我們的需求。

既然原生的組件無法滿足我們的需求，怎么搞？只有自定義一個(gè)組件了。

今天的內(nèi)容大致如下：

1、自定義彈出層效果一覽

2、彈出層邏輯實(shí)現(xiàn)

3、使用注意事項(xiàng)

4、源碼

一、自定義彈出層效果一覽

目前自定義的組件，可以在目標(biāo)組件，左、上、右、下，左上、右上，左下、右下八個(gè)方向進(jìn)行精確的彈出，當(dāng)然了，除此之外，也可以動(dòng)態(tài)的展示到自己想要的位置，并且彈出層效果可以自定義，效果是我彈出了一個(gè)黑色矩形，你可以彈出一個(gè)列表，一個(gè)圖片等等。

?

二、彈出層邏輯實(shí)現(xiàn)

1、懸浮在其他頂部小部件之上

為了更好的展示彈出效果，和不影響UI層的相關(guān)邏輯，針對(duì)彈出層，我們可以懸浮在內(nèi)容層之上，做透明處理即可，這里使用到了Overlay對(duì)象，它是一個(gè)類似懸浮小彈窗，如Toast，安卓的PopupWindow效果。

相關(guān)代碼如下，創(chuàng)建OverlayEntry，并插入到Overlay中，這樣就可以把OverlayEntry中構(gòu)建的小部件疊加懸浮在其他頂部小部件之上。

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

?

2、獲取彈出目標(biāo)組件的左上右下

所謂目標(biāo)組件，就是，你想要在哪個(gè)組件（左上右下）進(jìn)行彈出，確定了目標(biāo)組件之后，為了使彈出層，精確的展示在目標(biāo)組件的方位，需要拿到目標(biāo)組件的位置，也就是左上右下的位置，這里使用到了GlobalKey作為獲取方式，具體的位置信息獲取如下：

///獲取組件的位置static WidgetSize getWidgetSize(GlobalKey key) {//獲取組件的位置，在左上右下final RenderBox renderBox =(key.currentContext?.findRenderObject() as RenderBox);final left = renderBox.localToGlobal(Offset.zero).dx; //左邊f(xié)inal 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);}

創(chuàng)建記錄位置對(duì)象，用來標(biāo)記左上右下。

///組件對(duì)象，標(biāo)記左上右下
class WidgetSize {double left;double top;double right;double bottom;WidgetSize(this.left, this.top, this.right, this.bottom);
}

3、設(shè)置彈出層的位置

彈出層位置，這里利用到了Positioned組件，控制其left和top位置，基本上和PopupMenuButton類似，無非就是自己實(shí)現(xiàn)了位置的測量而已。

首先根據(jù)傳遞的屬性WindowDirection，確定要設(shè)置的方位。

具體各個(gè)方位計(jì)算如下：

目標(biāo)組件下邊：

top坐標(biāo)：目標(biāo)組件的底部坐標(biāo)+邊距

left坐標(biāo)：目標(biāo)組件的右部坐標(biāo)-彈出層的寬度/2-目標(biāo)組件寬度/2

目標(biāo)組件左邊：

top坐標(biāo)：目標(biāo)組件的底部坐標(biāo)-彈出層的高度/2-目標(biāo)組件的高度/2

left坐標(biāo)：目標(biāo)組件的左邊坐標(biāo)-彈出層的寬度-邊距

目標(biāo)組件上邊：

top坐標(biāo)：目標(biāo)組件的上邊坐標(biāo)-彈出層的高度-邊距

left坐標(biāo)：目標(biāo)組件的右部坐標(biāo)-彈出層的寬度/2-目標(biāo)組件寬度/2

目標(biāo)組件右邊：

top坐標(biāo)：目標(biāo)組件的底部坐標(biāo)-彈出層的高度/2-目標(biāo)組件的高度/2

left坐標(biāo)：目標(biāo)組件的右邊坐標(biāo)+邊距

目標(biāo)組件左上：

top坐標(biāo)：目標(biāo)組件的底部坐標(biāo)-彈出層的高度-目標(biāo)組件的高度-邊距

left坐標(biāo)：目標(biāo)組件的左邊坐標(biāo)-彈出層的寬度-邊距

目標(biāo)組件右上：

top坐標(biāo)：目標(biāo)組件的底部坐標(biāo)-彈出層的高度-目標(biāo)組件的高度-邊距

left坐標(biāo)：目標(biāo)組件的左邊坐標(biāo)+邊距

目標(biāo)組件左下：

top坐標(biāo)：目標(biāo)組件的底部坐標(biāo)+邊距

left坐標(biāo)：目標(biāo)組件的左邊坐標(biāo)-彈出層的寬度-邊距

目標(biāo)組件右下：

top坐標(biāo)：目標(biāo)組件+邊距

left坐標(biāo)：目標(biāo)組件右邊的坐標(biāo)+邊距

var size = getWidgetSize(key); //獲取在目標(biāo)組件的位置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;}

三、使用注意事項(xiàng)

1、為了能夠精確的設(shè)置彈出層的位置，其彈出層的寬度和高度是必須要傳遞的，也就是childWidth和childHeight屬性。

2、如果想自己設(shè)置位置，可以不傳childWidth和childHeight，設(shè)置direction為WindowDirection.none，并且left和top坐標(biāo)需要傳遞。

3、margin屬性設(shè)置彈出層距離目標(biāo)組件的距離。

四、源碼

源碼地址

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);

參數(shù)介紹

屬性	類型	概述
key	GlobalKey	目標(biāo)組件的key
child	Widget	彈出層
childWidth	double	彈出層的寬
childHeight	double	彈出層的高
direction	WindowDirection	位置： left//左 top//上 right//右 bottom//下 topLeft, //左上角 topRight, //右上角 bottomLeft, //左下 bottomRight, //右下 none//取消位置，自己定義
left	double	相對(duì)于屏幕的左側(cè)坐標(biāo)
top	double	相對(duì)于屏幕的頂部坐標(biāo)
margin	double	彈出層距離目標(biāo)組件的距離