点击弹出来的CustomDialog的Mask区域时,如何将焦点传递给Dialog下面的页面

点击弹出来的CustomDialog的Mask区域时,如何将焦点传递给Dialog下面的页面

HarmonyOS
2024-01-31 10:33:32
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
catholicity

设置是否允许点击遮障层退出、遮蔽层区域外的事件透传、自定义蒙层颜色

// 自定义弹窗组件1 
@CustomDialog 
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.Red) 
  }) 
 
  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
微信
回复
2024-02-01 17:27:38
相关问题
自定义弹窗中变量如何传递给页面
372浏览 • 1回复 待解决
页面关闭如何传递数据
216浏览 • 1回复 待解决
如何控制软键盘弹出页面的遮挡?
892浏览 • 1回复 待解决
如何将页面设置为深色模式
281浏览 • 1回复 待解决
如何将点击事件透传到下一层
267浏览 • 1回复 待解决
panel组件点击区域问题
2802浏览 • 1回复 待解决
如何将 Checkbox 文字放在左边 ?
8809浏览 • 1回复 待解决
Canvas如何绘制app.media下面的图片?
420浏览 • 1回复 待解决
如何将容器定位到屏幕最底部
228浏览 • 1回复 待解决
如何将easymock数据插入到数据库?
506浏览 • 1回复 待解决
如何将AbilityUI界面设置成透明
231浏览 • 1回复 待解决
如何将时间戳转换为日期格式时间
375浏览 • 1回复 待解决