flutter控件点击弹出悬浮框实现
2020-09-23 本文已影响0人
旺仔_100
一、思路:最核心的控件是Overlay,Overlay中会添加一个OverlayEntry,它是需要展示的界面,整体就是一个悬浮控件。下图是效果,空开是点击按钮,黑色圈起来的是悬浮框。
悬浮控件.png
二、OverlayEntry的构建
GlobalKey _appMenuKey = GlobalKey();
getListViewHeight(BuildContext context ,int length){
if(setHeight(60) * length > MediaQuery.of(context).size.height * 0.6){
return MediaQuery.of(context).size.height * 0.6;
}
return setHeight(60) * length + setHeight(30);
}
OverlayEntry getOverlayEntry(BuildContext context) {
RenderBox renderBox = context.findRenderObject();
var size = renderBox.size;
renderBox = _appMenuKey.currentContext.findRenderObject();
var menusize = renderBox.size;
var menupositon = renderBox.localToGlobal(Offset.zero);
return OverlayEntry(builder: (context) {
return Positioned(
top: menupositon.dy + menusize.height,
width: size.width,
child: Container(
height: getListViewHeight(context,5),
child: Card(
elevation: 5,
child: ListView.separated(itemBuilder: (context, index) {
return Container(
height: setHeight(55),
child: GestureDetector(child: ListTile(
title: Text("传感器名称字很多字很多很多很多很多很多... | 编号:123456",maxLines: 1,style: textStyle_16_black,),
subtitle: Text("详细位置:海康威视东北门",maxLines: 1,style: textStyle_16_black,),
),onTap: (){
println(index);
//重新设置值并刷新
},),
);
},itemCount: 5,
separatorBuilder: (context,index){
return Divider(height: 0);
},),
)),
);
});
}
其中悬浮位置是计算出来的,_appMenuKey需要设置到点击控件的key中。
下面是点击控件的代码
Widget selectSensorWidget(BuildContext context) {
return Container(
padding: EdgeInsets.only(right: setSp(16)),
child: GestureDetector(
key: _appMenuKey,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text("空开"),
// Icon(Icons.keyboard_arrow_up),
Icon(Icons.keyboard_arrow_down)
],
),
onTap: () {
var overlayState = Overlay.of(context);
if (state.isExpend) {
overlayEntry = getOverlayEntry(context);
overlayState.insert(overlayEntry);
state.isExpend = false;
} else {
overlayEntry.remove();
state.isExpend = true;
}
},
),
);