HarmonyOS鸿蒙Next中bindSheet-设置背景透明的时候，手势上拉，底下会空出来一截，怎么关掉这个呢

HarmonyOS鸿蒙Next中bindSheet-设置背景透明的时候，手势上拉，底下会空出来一截，怎么关掉这个呢

.bindSheet(this.isShowPopup, this.Popup(), {
  height: '80%',
  effectEdge: 1,
  dragBar: false,
  showClose: false,
  radius: {topLeft: 16, topRight: 16},
  backgroundColor: Color.Transparent,
  onDisappear: () => {},
  onWillDisappear: () => {
    
  }
})

@Builder
Popup(){
  PopupBuilder({show: this.isShowPopup!!})
}

@ComponentV2
export struct PopupBuilder {
  @Param show: boolean = false
  @Event $show: (val: boolean) => void = (val: boolean) => {};

  build() {
    Column() {
      SymbolGlyph($r('sys.symbol.xmark_circle'))
        .margin({bottom: 16, right: 16})
        .fontSize(40)
        .fontColor([$r('app.color.font_color_4')])
        .onClick(() => {
          this.$show(false)
        })

      Column(){

      }
      .layoutWeight(1)
      .width('100%')
      .padding({bottom: 40})
      .backgroundColor($r('app.color.bg_color2'))
      .borderRadius({topLeft: 16, topRight: 16})
      .clip(true)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.End)
  }
}

cke_23755.png

bindSheet-设置背景透明的时候，手势上拉，底下会空出来一截，怎么关掉这个呢，本来是想做顶部那个关闭图标的，觉得手势下拉关闭弹窗好用才用的bindSheet，然后顶部图标会被裁切出去，就把背景透明，弄成两个代码块在弹窗里，现在这个上拉之后底部好丑，体验不行。effectEdge: 1,这个没啥效果


更多关于HarmonyOS鸿蒙Next中bindSheet-设置背景透明的时候，手势上拉，底下会空出来一截，怎么关掉这个呢的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

解决办法：给 bindSheet 添加 scrollSizeMode: ScrollSizeMode.CONTINUOUS 属性。

.bindSheet(this.isShowPopup!!, this.Popup(), {
  // ...

  /**
   * 设置半模态面板滑动时，内容区域刷新时机。默认 ScrollSizeMode.FOLLOW_DETENT
   *    1. FOLLOW_DETENT  设置半模态面板跟手滑动结束后更新内容显示区域。
   *    2. CONTINUOUS     设置半模态面板在滑动过程中持续更新内容显示区域。
   */
  scrollSizeMode: ScrollSizeMode.CONTINUOUS,
})

（另外，你的 isShowPopup 参数不做双向绑定嘛？贴的代码里没写。）

你这个需求后面又可以延伸出来两个问题：

  1. 如果直接不想要半模态跟随手指上拉滚动。
  2. 后续Column组件里的内容过长，导致显示不全。

可以使用同一种办法解决：给内容区的的 Column 组件外面套一个 Scroll 组件，并配置合适的嵌套滚动策略：

// PopupBuilder
build(){
  Column() {
    // 原本你的关闭图标
    SymbolGlyph($r('sys.symbol.xmark_circle'))

    // 给原本内容区的 `Column` 组件外面套上 `Scroll` 组件
    Scroll(){
      Column(){
        // 假如这里又很多组件，已经超出了原本 `Column` 组件的可视高度
      }
      // 省略一些样式属性
    }
    .layoutWeight(1)
    .backgroundColor(Color.Pink)
    .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
    // 嵌套滚动策略
    .nestedScroll({
      scrollBackward: NestedScrollMode.SELF_FIRST,
      scrollForward: NestedScrollMode.PARENT_FIRST
    })
  }
}

更多关于HarmonyOS鸿蒙Next中bindSheet-设置背景透明的时候，手势上拉，底下会空出来一截，怎么关掉这个呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你这个也解决不了他那个下面透明的问题，目前无解，只能给那个里面的内容设置背景颜色才能好看一点，

设置scrollSizeMode: ScrollSizeMode.CONTINUOUS可以，但是一个是会有点鬼畜抽动，然后会有一个白色的背景色闪现

双向绑定我给放到这里去了 onWillDisappear: () => { this.isShowPopup = false; }，

回复效果图： cke_335.gif

哎？我用API 21模拟器和Mate60 Pro API21真机使用这个方式，就是和上面gif的效果一样，不存在你上面说的两种情况啊。你说的抽动是不是下滑关闭的时候他会突然闪现到拉起时的高度然后再关闭？，

没事，我里面套了个webview，应该网页的问题，我固定一下网页高度就行了，感谢，

this.Popup()

这个 Popup 你是怎么写的。

我用的 bindSheet ，是不能上拉的，只能下拉关闭。

希望HarmonyOS能继续推出更多实用的功能，满足用户的不同需求。

在HarmonyOS Next中，bindSheet组件默认带有弹性拖拽效果，上拉时底部会出现空白区域。要关闭此效果，可在bindSheet的sheet属性中设置dragBar为false，并将heightMode设置为Fixed。同时，确保自定义背景样式时未引入额外边距。

在 bindSheet 中设置 backgroundColor: Color.Transparent 后，手势上拉时底部出现的空白区域是系统默认的弹性效果（overscroll effect）。要关闭这个效果，你需要设置 bindSheet 的 edgeEffect 属性为 EdgeEffect.None。

修改你的 bindSheet 调用如下：

.bindSheet(this.isShowPopup, this.Popup(), {
  height: '80%',
  effectEdge: 1,
  dragBar: false,
  showClose: false,
  radius: {topLeft: 16, topRight: 16},
  backgroundColor: Color.Transparent,
  edgeEffect: EdgeEffect.None, // 添加这行，禁用边缘弹性效果
  onDisappear: () => {},
  onWillDisappear: () => {
    
  }
})

EdgeEffect.None 会完全禁用上拉/下拉时的弹性滚动和空白区域显示。这样在透明背景下，上拉手势就不会再露出底部内容了。

关于 effectEdge: 1，这个参数控制的是拖拽关闭的灵敏度区域，与弹性效果无关。

回到顶部