HarmonyOS 自定义弹框遮罩透传问题

在弹框展示之后需要透传事件的区域是屏幕中间一段横向区域(将屏幕横向分成三块,中间一块事件需要透传 上下两块不透传)maskRect该怎么设置?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

在A页面(A页面铺满全屏)弹出一个CustomDialog B(B里面的组件的高度为100,且在屏幕最下方。则其他区域为Mask区域,Mask区域可点击)。

示例代码如下:

@CustomDialog
export struct MyDialog1 {
  controller1: CustomDialogController
  title: string = ''

  build() {
    Row() {
      Column({ space: 10 }) {
        Text(this.title)
          .fontSize(25)
          .fontColor(Color.Blue)
        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          Button('取消')
            .onClick(() => {
              this.controller1.close()
            }).backgroundColor(0xffffff).fontColor(Color.Black)
          Button('确认')
            .onClick(() => {
              this.controller1.close()
            }).backgroundColor(0xffffff).fontColor(Color.Black)
        }.width("100%")
      }.width("100%")
    }.height(100)
  }
}

// main页面
@Entry
@Component
struct Index {
  @State dialogData: string = ''
  @State colorTest: Color = Color.Blue
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: MyDialog1({
      title: '弹窗1',
    }),
    // 弹窗容器样式是否自定义
    customStyle: false,
    // offset: {dx: 0, dy: 0},
    // 是否允许点击遮障层退出
    autoCancel: false,
    // 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传
    maskRect: ({
      x: 0,
      y: 667,
      width: '100%',
      height: 100
    }),
    // 自定义蒙层颜色
    // maskColor: (Color.Yellow)
  })

  confirm(data: string) {
    this.dialogData = data
    console.info(`recv dialog data: ${data}`) // 获取弹窗输入的信息
  }

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    // 将dialogController置空
    // this.dialogController1 = null
  }

  build() {
    Row() {
      Column({ space: 10 }) {
        Text(`这是一个弹窗的测试`)
          .fontSize(25).margin(20).fontColor(0x3399FF)
        Button('点击打开弹窗')
          .onClick(() => {
            this.dialogController1.open()
          })
        Button('点击改变颜色,不影响弹窗')
          .onClick(() => {
            this.colorTest = this.colorTest == Color.Blue ? Color.Yellow : Color.Blue
          })
          .backgroundColor(this.colorTest)
      }.width("100%")
    }.height("100%").backgroundColor(Color.Pink)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
自定义遮罩背景颜色无法设置
414浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
646浏览 • 1回复 待解决
HarmonyOS 自定义封装问题
141浏览 • 1回复 待解决
HarmonyOS 自定义不能全屏
256浏览 • 1回复 待解决
自定义的状态获取
1006浏览 • 1回复 待解决
是否可以自定义权限文字
1844浏览 • 1回复 待解决
HarmonyOS app版本升级需要自定义
279浏览 • 1回复 待解决
HarmonyOS 如何设置自定义的颜色
135浏览 • 1回复 待解决
如何给自定义加上圆角背景
2208浏览 • 1回复 待解决
HarmonyOS 背景色如何自定义图片
26浏览 • 1回复 待解决
HarmonyOS 自定义关闭后页面上移
140浏览 • 1回复 待解决
HarmonyOS 自定义导致机测不通过
252浏览 • 1回复 待解决
HarmonyOS 自定义弹窗遮罩未全屏
911浏览 • 1回复 待解决