在开发中常常需要一个悬浮窗口来做各种筛选,实现悬浮控件需要知道悬浮控件应该出现在什么位置以及窗口的大小,而获取悬浮控件的所需的位置需要知道父控件的position。在flutter 中通过BuildContext findRenderObject获取widget的position和size。
bool _isShow = false;
OverlayEntry _overlay;
//触发事件控件的全局key ,通过key可以获取到key对应的控件
GlobalKey _tapWidget = Globalkey();
OverlayEntry _createSelectViewWithContext(BuildContext context){
//屏幕宽高
RenderBox renderBox = context.findRenderObject();
var screenSize = renderBox.size;
//触发事件的控件的位置和大小
renderBox = _tapWidget.findRenderObject();
var parentSize = renderBox.size;
var parentPosition = renderBox.localToGlobal(Offset.zero);
//正式创建Overlay
return OverlayEntry(
builder: (context) => Positioned (
top: parentPosition.dy + parentSize.height,
width: screenSize.width,
height:screenSize.height-parentPosition.dy-parentPosition.height,
child:Stack(
children:<Widget>[
GestureDetctor(//黑色 26透明度背景
onTap:(){
setState( () {
_isShow = false;
});
//点击背景 隐藏窗口
_showOverlay(_isShow);
},
child: Container(
height: screenSize.height-parentPosition.dy-parentPosition.height,
width:screenSize.width,
color:Colors.black26,
),
),
Container( height:100),//悬浮窗口自定义
]
),
)
);
}
//现实显示具体方法 在需要的地方掉用即可
_showOverlay(bool isShow) {
if (isShow) {
_overlay = _createSelectViewWithContext(context);
Overlay.of(context).inset(_overlay);
} else {
_overlay.remove();
}
}