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
2024-09-27 11:18:21
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

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

  1. 如何去掉半模态组件右上角的关闭按钮
  • 默认情况下,HarmonyOS 在半模态组件的右上角会显示一个关闭按钮。根据官方文档,目前没有直接的方法去掉这个按钮。不过,可以尝试通过自定义全屏模式并在内部手动处理关闭事件来实现这一功能。
  1. 控制半模态组件在下滑时不自动关闭
  • 你可以通过设置​​dragBar​​ 为​​false​​ 来禁用拖动关闭功能。如果希望保留拖动效果但不关闭,需要自定义手势处理逻辑。
  1. 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%')  
  }  
}

### 解释

  1. 去掉关闭按钮
  • 如前所述,目前 HarmonyOS 官方文档中没有直接移除关闭按钮的方法。可以尝试在自定义对话框或其他方式进行替代。
  1. 控制半模态组件在下滑时不自动关闭
  • 将​​dragBar​​ 设为​​false​​ 禁用拖动关闭功能。
  • 你也可以自定义手势,通过​​SwipeGesture​​ 控制高度变化而不是关闭组件。
  1. 确保手势监听有效
  • 修正了条件判断的逻辑(如​​event.angle < 0​​),确保不同方向的滑动能正确响应高度变化。

通过这些修改,可以提高组件的可控性和用户交互体验。如果有进一步的问题或需求,请随时提问。

分享
微博
QQ
微信
回复
2024-09-28 16:14:18
put_get

问题1:可以使用showClose来控制关闭按钮的显示。

问题2:可以使用shouldDismiss来监听下拉动作。

问题3:可以使用detents来实现根据手势滑动自动变更半模态组件高度。

参考文档中示例2:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5#%E7%A4%BA%E4%BE%8B2

分享
微博
QQ
微信
回复
2024-09-27 17:47:08
相关问题
模态转场如何控制固定高度
1865浏览 • 1回复 待解决
如何固定模态转场的高度
453浏览 • 1回复 待解决
模态转场来实现弹框样式的页面
836浏览 • 1回复 待解决
HarmonyOS bindSheet模态弹窗
113浏览 • 1回复 待解决
应用怎么实现模态效果
2211浏览 • 1回复 待解决
基于bindSheet的模态弹窗
928浏览 • 1回复 待解决
如何实现模态转场操作过程?
252浏览 • 1回复 待解决
CustomDialog如何实现模态详情页效果
1700浏览 • 1回复 待解决