BindPopup的offset属性是基于什么定位进行偏移的

bindpopup offset是相对于什么定位进行偏移的?基准点是什么?例如说offset写了x: 100, y: 100,当我触摸屏幕的时候 x,y是基于哪个点进行偏移?

HarmonyOS
2024-07-22 12:13:33
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
flyCloud00

基于绑定的组件左上角的锚点为基准点;目前bindpopup在5.0上规格有变动,当前Webview文档中的写法已不完全适配长按菜单的功能。如果需使用bindpopup功能。需要单独在webview组件前(同层)增加一个大小为0的组件来承载bindpopup。并且目前UX规范,针对边距有一个左右大小为7vp的偏移,以保证弹出菜单在屏幕范围内。

参考代码:

import web_webview from '@ohos.web.webview' 
import pasteboard from '@ohos.pasteboard' 
 
const TAG = 'ContextMenu'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: web_webview.WebviewController = new web_webview.WebviewController() 
  private result: WebContextMenuResult | undefined = undefined; 
  @State linkUrl: string = ''; 
  @State offsetX: number = 0; 
  @State offsetY: number = 0; 
  @State showMenu: boolean = false; 
 
  @Builder 
  //构建自定义菜单及触发功能接口 
  MenuBuilder() { 
    //以垂直列表形式显示的菜单。 
    Menu() { 
      //展示菜单Menu中具体的item菜单项。 
      MenuItem({ 
        content: '复制图片', 
      }) 
        .width(100) 
        .height(50) 
        .onClick(() => { 
          this.result?.copyImage(); 
          this.showMenu = false; 
        }) 
      MenuItem({ 
        content: '剪切', 
      }) 
        .width(100) 
        .height(50) 
        .onClick(() => { 
          this.result?.cut(); 
          this.showMenu = false; 
        }) 
      MenuItem({ 
        content: '复制', 
      }) 
        .width(100) 
        .height(50) 
        .onClick(() => { 
          this.result?.copy(); 
          this.showMenu = false; 
        }) 
      MenuItem({ 
        content: '粘贴', 
      }) 
        .width(100) 
        .height(50) 
        .onClick(() => { 
          this.result?.paste(); 
          this.showMenu = false; 
        }) 
      MenuItem({ 
        content: '复制链接', 
      }) 
        .width(100) 
        .height(50) 
        .onClick(() => { 
          let pasteData = pasteboard.createData('text/plain', this.linkUrl); 
          pasteboard.getSystemPasteboard().setData(pasteData, (error) => { 
            if (error) { 
              return; 
            } 
          }) 
          this.showMenu = false; 
        }) 
      MenuItem({ 
        content: '全选', 
      }) 
        .width(100) 
        .height(50) 
        .onClick(() => { 
          this.result?.selectAll(); 
          this.showMenu = false; 
        }) 
    } 
    .width(150) 
    .height(300) 
    .backgroundColor("#eeeeee") 
  } 
 
  build() { 
    Column() { 
      Row() 
        .width(0) 
        .height(0) 
        .position({ x: 0, y: 0 }) 
        .bindPopup(this.showMenu, 
          { 
            builder: this.MenuBuilder(), 
            enableArrow: false, 
            placement: Placement.LeftTop, 
            targetSpace: 0, 
            shadow: { 
              radius: 0 
            }, 
            offset: { x: this.offsetX - 7, y: this.offsetY }, 
            mask: false, 
            onStateChange: (e) => { 
              if (!e.isVisible) { 
                this.showMenu = false; 
                this.result!.closeContextMenu(); 
              } 
            } 
          }) 
 
      Web({ src: '', controller: this.controller })//触发自定义弹窗 
        .onControllerAttached(() => { 
          this.controller.setCustomUserAgent(this.controller.getUserAgent() + " Android") 
          this.controller.loadUrl($rawfile("OnContextMenuShow/index.html")) 
        })//触发自定义弹窗 
        .onContextMenuShow((event) => { 
          if (event) { 
            this.result = event.result 
            console.info("x coord = " + event.param.x()) 
            console.info("link url = " + event.param.getLinkUrl()) 
            this.linkUrl = event.param.getLinkUrl() 
          } 
          console.info(TAG, `x: ${this.offsetX}, y: ${this.offsetY}`); 
          this.showMenu = true; 
          this.offsetX = Math.max(px2vp(event?.param.x() ?? 0) - 0, 0); 
          this.offsetY = Math.max(px2vp(event?.param.y() ?? 0) - 0, 0); 
          return true 
        }) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-07-22 19:57:56
相关问题
HarmonyOS 组件.bindPopup属性使用问题
120浏览 • 1回复 待解决
基于反混淆工具混淆后日志定位
277浏览 • 1回复 待解决
Redis管理通过什么进行
2608浏览 • 1回复 待解决
鸿蒙基于Android吗?
11553浏览 • 2回复 已解决
基于ImageKit对图片进行处理
476浏览 • 1回复 待解决
基于CameraKit对相机进行操作
488浏览 • 1回复 待解决
基于PhotoViewPicker对图片进行操作
570浏览 • 1回复 待解决
基于libuv异步库进行线程通信
1692浏览 • 0回复 待解决
分页使用pageNum还是offset优缺点
3193浏览 • 1回复 待解决
XComponent怎么与native进行关联
2404浏览 • 1回复 待解决
组件通用属性clip有什么作用?
345浏览 • 1回复 待解决
什么PolarDB自治中心?
2672浏览 • 1回复 待解决
什么PolarDB实时性能?
2603浏览 • 1回复 待解决
什么PolarDB锁分析?
2712浏览 • 1回复 待解决
什么PolarDB性能洞察?
3349浏览 • 1回复 待解决