Просмотр исходного кода

修复点击抽屉外无法关闭菜单的问题

chendeben 1 год назад
Родитель
Сommit
813646bb26
1 измененных файлов с 16 добавлено и 7 удалено
  1. 16 7
      entry/src/main/ets/pages/NewIndex.ets

+ 16 - 7
entry/src/main/ets/pages/NewIndex.ets

@@ -245,6 +245,20 @@ struct NewIndex {
             .visibility(this.mType === 3 ? Visibility.Visible : Visibility.None)
             .visibility(this.mType === 3 ? Visibility.Visible : Visibility.None)
           AboutPage()
           AboutPage()
             .visibility(this.mType === 4 ? Visibility.Visible : Visibility.None)
             .visibility(this.mType === 4 ? Visibility.Visible : Visibility.None)
+          
+          // 抽屉打开时的遮罩层,用于拦截点击事件
+          if (this.isShowDrawer) {
+            Column()
+              .width('100%')
+              .height('100%')
+              .backgroundColor(Color.Transparent)
+              .onClick(() => {
+                // 点击遮罩层关闭抽屉
+                animateTo({ duration: 555 }, () => {
+                  this.isShowDrawer = false
+                })
+              })
+          }
         }
         }
       }
       }
     }
     }
@@ -299,7 +313,8 @@ struct NewIndex {
       .width('100%')
       .width('100%')
       .height('100%')
       .height('100%')
       .onClick((event: ClickEvent) => {
       .onClick((event: ClickEvent) => {
-        // 阻止事件冒泡
+        // 点击抽屉内部不关闭,通过返回值阻止事件传播
+        return true
       })
       })
     }
     }
     // .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'36%':'70%')
     // .width(this.currentBreakpoint !== BreakpointTypeEnum.SM?'36%':'70%')
@@ -313,12 +328,6 @@ struct NewIndex {
     // .backgroundColor($r('app.color.silvery'))
     // .backgroundColor($r('app.color.silvery'))
     .backgroundColor($r('app.color.index_background'))
     .backgroundColor($r('app.color.index_background'))
     .alignItems(HorizontalAlign.Start)
     .alignItems(HorizontalAlign.Start)
-    .onClick((event: ClickEvent) => {
-      // 点击抽屉外部关闭抽屉
-      animateTo({ duration: 555 }, () => {
-        this.isShowDrawer = false
-      })
-    })
     .translate({ x: this.offsetX, y: 0, z: 0 })
     .translate({ x: this.offsetX, y: 0, z: 0 })
     .transition({ type: TransitionType.Insert, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
     .transition({ type: TransitionType.Insert, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
     .transition({ type: TransitionType.Delete, translate: { x: -DisplayUtil.getWidth(), y: 0 } })
     .transition({ type: TransitionType.Delete, translate: { x: -DisplayUtil.getWidth(), y: 0 } })