效果圖

簡單在頁面中有一個圖片，長按圖片的時候呢就會觸發選單的顯示，

效果圖

請添加圖片描述

代碼實作

一個帶有長按功能的按鈕

GestureDetector( //手勢包含添加按鈕 實作點擊進行選擇圖片
                      child:Image.asset('images/addphoto.png'),
                      onLongPressStart: (LongPressStartDetails details) {
                        //setState(() {});
                        double globlePositionX = details.globalPosition.dx;//獲取全域觸摸到的x方向位置
                        double globlePositionY = details.globalPosition.dy - 20;//獲取全域y方向當位置并且下移20,選單一般需要顯示在下面，而不是按著的位置
                        onLongPress(context,globlePositionX,globlePositionY);
                      },
                    );

具體顯示的顯示實作

  //長按觸發彈出選單
  void onLongPress(BuildContext context,double x,double y){//當添加圖片當圖片被點擊時候
    final RenderBox? overlay = Overlay.of(context)?.context.findRenderObject() as RenderBox;//應該是找到容器，這個是抄PopupMenuButton里面抄來的
    
    RelativeRect position= RelativeRect.fromRect(Rect.fromLTRB(x, y, x+50, y-50),  Offset.zero & overlay!.size,); 
 //這里應該是畫一個浮動在上面的一個相對矩形，第一個矩形的坐標是根據第二個矩形而言的，
 //第一個矩形我猜應該是顯示的選單可以放的矩形，這里我選擇的是按照四個點的坐標來畫一個矩形，之前不是拿到了手指點擊的位置嗎，然后我畫來一個以那個位置為左上角的一個大小為50*50的矩形，其實選單應該大于這個矩形的，可能自動擴大了吧（注意，我們的坐標其實是按照正常全域坐標的，所以我們的容器要按照正常坐標來）
//而第二個矩形應該是容器，也就是放第一個矩形的容器，這個容器這里設定的是按照正常坐標，也就是左上角為0.0，然后大小是之前找到的容器的大小

    PopupMenuItem popupMenuItem2=new PopupMenuItem(child: Text("圖庫"),value: 2,);
    PopupMenuItem popupMenuItem1=new PopupMenuItem(child: Text("拍照"),value: 1,);
    List<PopupMenuEntry<dynamic>> list=[popupMenuItem1,popupMenuItem2];//選單欄需要顯示的選單項集合


    showMenu(context: context, position: position, items: list).then((value) {
      if(value==1){//根據value判斷出到底點了哪個選單
        _onImageButtonPressedTakePhoto(ImageSource.camera,context,imageQuality: 40);
      }
      if(value==2){
          _onImageButtonPressed(//執行打開相冊
              ImageSource.gallery,
               context,
              imageQuality: 40,//圖片壓縮
            );
      }
    }
    );
    // PopupMenuButton
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/351003.html

標籤：其他

上一篇：JAVA設計模式大總結（一）JAVA設計模式的六大原則以及類之間的六大關系

下一篇：Android---沉浸式狀態欄

Flutter 彈出選單實作（不是顯示的選單按鈕,隱式的）showMenu

隱式的選單

效果圖

代碼實作