HarmonyOS 半模态转场+Gesture 手势组件SwipeGesture问题

1.半模态组件右上角出现一个关闭的按钮是否可以去掉？

2.半模态组件出现的然下滑半模态组件就关闭了这个是否可以控制？

3.半模态套用Gesture手势组件SwipeGesture 失效并没有监听到

下列demo源码：

@Entry  
@Component  
struct GovernmentMapPage {  
  @State message: string = '政务地图';  
  @State isShow: boolean = true  
  @State sheetHeight: number = 200;  
  @State showDragBar: boolean = false;  
  
  @Builder  
  myBuilder() {  
    Column() {  
      Button("半屏")  
        .margin(10)  
        .fontSize(20)  
        .onClick(() => {  
          this.sheetHeight = 500;  
        })  
      Button("满屏")  
        .margin(10)  
        .fontSize(20)  
        .onClick(() => {  
          this.sheetHeight = -1;  
        })  
      Button("五分之一")  
        .margin(10)  
        .fontSize(20)  
        .onClick(() => {  
          this.sheetHeight = 200;  
        })  
    }  
    .width('100%')  
    .height('100%')  
    .gesture(  
      // 绑定滑动手势且限制仅在竖直方向滑动时触发  
      SwipeGesture({ direction: SwipeDirection.Vertical })// 当滑动手势触发时，获取滑动的速度和角度，实现对组件的布局参数的修改  
        .onAction((event: GestureEvent) => {  
          // console.log("滑动速度="+event.speed)  
          console.log("滑动角度=" + event.angle)  
          if (event.angle > 0) {  
            if (this.sheetHeight >= -1) {  
              this.sheetHeight = 500;  
            } else if (this.sheetHeight >= 500) {  
              this.sheetHeight = 200;  
            }  
          } else if (event.angle > 0) {  
            if (this.sheetHeight >= 200) {  
              this.sheetHeight = 500;  
            } else if (this.sheetHeight >= 500) {  
              this.sheetHeight = -1;  
            }  
          }  
        })  
    )  
  
  }  
  build() {  
    Column() {  
      Button("政务地图")  
        .onClick(() => {  
          this.isShow = true  
        })  
        .fontSize(20)  
        .margin(10)  
        .bindSheet($$this.isShow, this.myBuilder(), {  
          height: this.sheetHeight,  
          dragBar: this.showDragBar,  
          backgroundColor: Color.Blue,  
          onAppear: () => {  
            console.log("BindSheet onAppear.")  
          },  
          onDisappear: () => {  
            console.log("BindSheet onDisappear.")  
          }  
        })  
    }  
    .justifyContent(FlexAlign.Center)  
    .width('100%')  
    .height('100%')  
  }  
}

HarmonyOS

zbw_apple

2024-09-27 11:18:21

浏览

回答 2

待解决

回答 2

按赞同

按时间

鱼弦CTO

你提出了三个主要问题，以下是针对每个问题的解决方案：

如何去掉半模态组件右上角的关闭按钮：

默认情况下，HarmonyOS 在半模态组件的右上角会显示一个关闭按钮。根据官方文档，目前没有直接的方法去掉这个按钮。不过，可以尝试通过自定义全屏模式并在内部手动处理关闭事件来实现这一功能。

控制半模态组件在下滑时不自动关闭：

你可以通过设置dragBar 为false 来禁用拖动关闭功能。如果希望保留拖动效果但不关闭，需要自定义手势处理逻辑。

Gesture 手势组件 SwipeGesture 不起作用：

确认手势绑定在正确的位置，并修正手势方向处理逻辑。

### 改进后的代码

@Entry  
@Component  
struct GovernmentMapPage {  
  @State message: string = '政务地图';  
  @State isShow: boolean = true  
  @State sheetHeight: number = 200;  
  @State showDragBar: boolean = false;  
  
  @Builder  
  myBuilder() {  
    Column() {  
      Button("半屏")  
        .margin(10)  
        .fontSize(20)  
        .onClick(() => {  
          this.sheetHeight = 500;  
        })  
      Button("满屏")  
        .margin(10)  
        .fontSize(20)  
        .onClick(() => {  
          this.sheetHeight = -1;  
        })  
      Button("五分之一")  
        .margin(10)  
        .fontSize(20)  
        .onClick(() => {  
          this.sheetHeight = 200;  
        })  
    }  
    .width('100%')  
    .height('100%')  
    .gesture(  
      // 绑定滑动手势且限制仅在竖直方向滑动时触发  
      SwipeGesture({ direction: SwipeDirection.Vertical })
        .onAction((event: GestureEvent) => {  
          console.log("滑动角度=" + event.angle)
          if (event.angle > 0) {  
            if (this.sheetHeight >= -1) {  
              this.sheetHeight = 500;  
            } else if (this.sheetHeight >= 500) {  
              this.sheetHeight = 200;  
            }  
          } else if (event.angle < 0) {  
            if (this.sheetHeight <= 200) {  
              this.sheetHeight = 500;  
            } else if (this.sheetHeight <= 500) {  
              this.sheetHeight = -1;  
            }  
          }  
        })  
    )  
  }  

  build() {  
    Column() {  
      Button("政务地图")  
        .onClick(() => {  
          this.isShow = true  
        })  
        .fontSize(20)  
        .margin(10)  
        .bindSheet($$this.isShow, this.myBuilder(), {  
          height: this.sheetHeight,  
          dragBar: this.showDragBar,  
          backgroundColor: Color.Blue,  
          onAppear: () => {  
            console.log("BindSheet onAppear.")  
          },  
          onDisappear: () => {  
            console.log("BindSheet onDisappear.")  
          }  
        })  
    }  
    .justifyContent(FlexAlign.Center)  
    .width('100%')  
    .height('100%')  
  }  
}

### 解释