[移动开发]Flutter Overlay+Overlay+MouseRegion实现多级菜单

Flutter并没有Qt一样提供菜单栏多级菜单，想要实现该功能就需要自定义，已知点击按钮可以通过Overlay弹出菜单悬浮框，考虑可不可以在ovelay中在嵌入一个Overlay实现多级菜单，实践证明该方法可行，

具体实现为先定义两个??OverlayEntry作为要显示悬浮窗

LayerLink?fixLink?=?new?LayerLink();
??OverlayEntry??fixOverlay;
??LayerLink?moveMailLink?=?new?LayerLink();?//移动邮件选择
??OverlayEntry??moveMailOverlay;

之后创建初级菜单

OverlayEntry?creatFixOverlay()?{
????OverlayEntry?fixOverlay?=?new?OverlayEntry(builder:?(context)?{
??????return?Positioned(
????????width:?200,
????????child:?new?CompositedTransformFollower(
??????????link:?fixLink,
??????????offset:?Offset(0,?30),
??????????child:?new?Material(
????????????child:?Container(
????????????????decoration:?BoxDecoration(
????????????????????border:?Border.all(width:?0.2,?color:?Colors.black45)),
????????????????child:?CompositedTransformTarget(
??????????????????link:?moveMailLink,
??????????????????child:?MouseRegion(
????????????????????onHover:?_Hover,
????????????????????onExit:?_Exit,
????????????????????child:?ListTile(
??????????????????????title:?Text("移动至"),
??????????????????????trailing:?Icon(Icons.chevron_right),
??????????????????????onTap:?()?{},
????????????????????),
??????????????????),
????????????????)),
??????????),
????????),
??????);
????});
????return?fixOverlay;
??}

可以看到在初级菜单中的加入了 CompositedTransformTarget显示二级菜单，这样在点击初级菜单中选项后就可响应弹出二级菜单，二级菜单创建如下;

??OverlayEntry?createMoveMailOverlay()?{
????OverlayEntry?moveOverlay?=?new?OverlayEntry(builder:?(context)?{
??????return?Positioned(
??????????width:?100,
??????????height:?200,
??????????child:?new?CompositedTransformFollower(
????????????offset:?Offset(200,?20),
????????????link:?moveMailLink,
????????????child:?Material(
??????????????child:?Container(
????????????????decoration:?BoxDecoration(
????????????????????border:?Border.all(width:?0.2,?color:?Colors.black45)),
????????????????child:?selectMoveList(),
??????????????),
????????????),
??????????));
????});
????return?moveOverlay;
??}

到此可以显示一二级菜单，同理可以推出多级菜单显示方法，从初级菜单中可以看到加入了?MouseRegion目的是当鼠标悬停在指定Widget自动弹出二级菜单，鼠标离开二级菜单消失。但是只是这样的话当鼠标离开初级菜单时对应的二级菜单会马上消失，并不存在从初级菜单到二级菜单的过程，因此在设计Exit函数时应该对鼠标离开的方向加以判断，当鼠标是从初级菜单离开到二级菜单时不要删除二级菜单，向其他方向移动时在删除二级菜单。

?MouseRegion函数设计如下

??void?_Hover(PointerHoverEvent?details)?{
????if?(moveMailOverlay?!=?null)?{
??????moveMailOverlay!.remove();
??????moveMailOverlay?=?null;
??????moveMailOverlay?=?createMoveMailOverlay();
??????Overlay.of(context)?.insert(moveMailOverlay!);
????}?else?{
??????moveMailOverlay?=?createMoveMailOverlay();
??????Overlay.of(context)?.insert(moveMailOverlay!);
????}
??}
??void?_Exit(PointerExitEvent?details)?{
????Offset?offset?=?details.position;
????if?(offset.dx?<?1043?||?offset.dy?>?80)?{
??????if?(moveMailOverlay?!=?null)?{
????????moveMailOverlay!.remove();
????????moveMailOverlay?=?null;
??????}
????}
??}

至此就完成了多级菜单的创建，效果见下图

?