HarmonyOS 弹窗,可触摸穿透

实现一个弹窗,如何实现蒙层的触摸穿透?

HarmonyOS
17h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

1.可以设置 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。

2.可以将弹窗组件的蒙层属性isModal设为false,自定义蒙层并通过Visibility控制显隐,使用hitTestBehavior(HitTestMode.None)可以实现自身不响应触摸测试。

样例demo如下:

@Entry
@Component
struct DDD {
  @State message: string = 'Hello World';
  @State visible: Visibility = Visibility.None
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Column() {
      Button('打开弹窗').onClick(() => {
        this.visible=Visibility.Visible
      })
      Column().width('100%').height('100%').position({x:0, y:0}).zIndex(10).backgroundColor(0x33000000).visibility(this.visible).hitTestBehavior(HitTestMode.None)

      Stack(){
        Flex({direction:FlexDirection.Column,alignContent:FlexAlign.Center,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}){
          Text("这是个可以穿透的弹窗")
            .fontColor(Color.Blue)
            .fontSize(18)
            .onClick(() => {
              console.info("啊啊啊啊啊啊啊啊啊啊啊啊")
            })
            .hitTestBehavior(HitTestMode.None)
            .visibility(this.visible)
            .zIndex(13)
          Row({space:10}){
            Button("确定")
              .onClick(() => {
                this.visible = Visibility.Hidden
              })
              .visibility(this.visible)

            Button("取消")
              .onClick(() => {
                this.visible = Visibility.Hidden
              })
              .visibility(this.visible)
          }
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .width("100%")
        }
        .border({radius:25})
        .visibility(this.visible)
        // .backgroundColor(Color.Green)//#00000000
        .hitTestBehavior(HitTestMode.None)
        .height(110)
        .width(220)
        .zIndex(12)
        List(){
          ForEach(this.arr,(item:number)=>{
            ListItem(){Row(){Text('文本')}.justifyContent(FlexAlign.Center).width('100%').backgroundColor(0xFFFFFF).height(100)}
          })
        }.divider({strokeWidth:2,color:'#F1F3F5'}).height('100%')
        .zIndex(9)
      }
    }.width("100%").height('100%')
  }
}
分享
微博
QQ
微信
回复
14h前
相关问题
半模态弹窗如何禁止两边触摸
162浏览 • 0回复 待解决
HarmonyOS 事件穿透问题
564浏览 • 1回复 待解决
HarmonyOS 如何实现事件穿透
21浏览 • 1回复 待解决
HarmonyOS 点击穿透的策略
70浏览 • 1回复 待解决
如何实现悬浮窗桌面穿透
842浏览 • 1回复 待解决
HarmonyOS web页面点击穿透问题
23浏览 • 1回复 待解决
floating window可以设置事件穿透吗?
288浏览 • 1回复 待解决
如何阻止Flex容器鼠标事件穿透
2022浏览 • 1回复 待解决
HarmonyOS 控件多指触摸问题
462浏览 • 1回复 待解决
HarmonyOS 触摸事件的冲突问题
9浏览 • 1回复 待解决
组件有没有支持事件穿透的属性
1783浏览 • 1回复 待解决
HarmonyOS 扩展文本
63浏览 • 1回复 待解决
HarmonyOS 子组件如何拦截触摸事件
107浏览 • 1回复 待解决
HarmonyOS 触摸手势相关的问题
23浏览 • 1回复 待解决
HarmonyOS 全局触摸应用切后台未触发
27浏览 • 1回复 待解决
如何查看触摸热区范围
380浏览 • 1回复 待解决
Progress触摸热区增大demo
922浏览 • 1回复 待解决