Android学习记录

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;
          }
        },
      ),
    );
上一篇 下一篇

猜你喜欢

热点阅读