HarmonyOS CustomDialogController如何弹出半屏弹窗

CustomDialogController如何弹出半屏弹窗使得弹窗内容未覆盖的区域仍然可以响应用户操作。

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

1.可以设置 弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。<br>2.可以将弹窗组件的蒙层属性isModal设为false,自定义蒙层并通过Visibility控制显隐,使用hitTestBehavior(HitTestMode.None)可以实现自身不响应触摸测试。样例demo

@CustomDialog
struct MyDialog {
  // 显隐控制设置为不占用
  @Link visible: Visibility
  controller1: CustomDialogController
  build() {
    Row() {
      Column({ space: 10 }) {
        Text('自定义弹窗').fontSize(25).fontColor(Color.Blue)
        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          Button('取消').onClick(() => {
            this.controller1.close()
            this.visible=Visibility.None
          }).backgroundColor(0xffffff).fontColor(Color.Black)
          Button('确认').onClick(() => {
            this.controller1.close()
            this.visible=Visibility.None
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        }.width("100%")
      }.width("100%")
    }.height(100)
  }
}
@Entry
@Component
struct Index {
  @State visible: Visibility = Visibility.None
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: MyDialog({
      visible: this.visible
    }), offset: {dx: 0, dy: 0},
    // 是否允许点击遮障层退出
    autoCancel: false,
    //设置窗口无蒙层
    isModal:false,
  })
  build() {
    Column({ space: 10 }) {
      Button('打开弹窗').onClick(() => {
        this.dialogController1.open()
        this.visible=Visibility.Visible
      })
      List(){
        ForEach(this.arr,(item:number)=>{
          ListItem(){Row(){Text('文本')}.justifyContent(FlexAlign.Center).width('100%').backgroundColor(0xFFFFFF).height(100)}
        })
      }.divider({strokeWidth:2,color:'#F1F3F5'}).height('90%')
      Column().width('100%').height('100%').position({x:0, y:0}).zIndex(10).backgroundColor(0x33000000).visibility(this.visible).hitTestBehavior(HitTestMode.None)
    }.width("100%")
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 如何实现页面?
266浏览 • 1回复 待解决
HarmonyOS 如何实现展开
465浏览 • 1回复 待解决
HarmonyOS bindSheet模态弹窗
306浏览 • 1回复 待解决
如何展示一个广告
527浏览 • 1回复 待解决
基于bindSheet的模态弹窗
1033浏览 • 1回复 待解决
模态弹窗如何禁止两边触摸
93浏览 • 0回复 待解决
如何通过路由的方式打开
398浏览 • 1回复 待解决
HarmonyOS 页面以弹窗的样式弹出
543浏览 • 1回复 待解决
是否有符合要求的弹窗组件
1928浏览 • 1回复 待解决
HarmonyOS CustomDialogController如何封装
449浏览 • 1回复 待解决