HarmonyOS 鸿蒙Next 自定义弹窗有蒙层时如何实现滑动后面的list内容

HarmonyOS 鸿蒙Next 自定义弹窗有蒙层时如何实现滑动后面的list内容

【关键字】

• 自定义弹窗 / 蒙层 / 触摸 / 响应

【问题描述】

• 自定义弹窗有蒙层的情况下，能滑动后面的list内容吗？

【解决方案】

• 可以设置弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
• 可以将弹窗组件的蒙层属性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%")
}
}