HarmonyOS鸿蒙Next中弹出框（.bindSheet）一样点击就是onClick的时候底部网上显示的效果

HarmonyOS鸿蒙Next中弹出框（.bindSheet）一样点击就是onClick的时候底部网上显示的效果 向自定义设计一个这样弹出的一个弹出框，但系统提供的满足不了需求，自己想做出一个，使用那个组件写出来啊，这个写出还使用animation吗？


更多关于HarmonyOS鸿蒙Next中弹出框（.bindSheet）一样点击就是onClick的时候底部网上显示的效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

开发者您好，为了更快解决您的问题，尽量补全以下信息：

请问是想用什么组件实现底部往上显示的效果？bindSheet半模态转场默认就是从下往上弹出显示的效果。

如果是想使用自定义弹窗 (CustomDialog)可以参考如下demo设置transition属性实现：

@Entry
@Component
struct CustomDialogUser {
  @State isAutoCancel: boolean = true;
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }),
    autoCancel: this.isAutoCancel,
    customStyle: true
  })

  build() {
    Column() {
      Button('click me')
        .onClick(() => {
          this.dialogController.open()
        })
    }.width('100%')
    .height('100%')
  }
}
let anmDuration: number = 1000;

// 弹窗交互
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
    autoCancel: false
  })
  @State showFlag: Visibility = Visibility.Visible;
  @State isAutoCancel: boolean = false;

  build() {
    Column() {
      Row() {
        Text("自定义动画的弹窗")
      }
      .padding(8)
      .backgroundColor('#FFFFFF')
      .height(200)
      .width('100%')
      .borderRadius(10)
    }
    .justifyContent(FlexAlign.End)
    .width('100%')
    .height("100%")
    .onClick(() => {
      console.log("dialogClick")
      if (this.isAutoCancel) {
        console.log("dialogClick2")
        this.cancel();
      }
    })
    .visibility(this.showFlag)
    // 定义进场出场转场动画效果
    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })
      .combine(TransitionEffect.translate({ y: 1000 })))
  }

  cancel() {
    this.showFlag = Visibility.Hidden
    console.log("closeDialog")
    setTimeout(() => {
      this.controller.close()
    }, anmDuration)
  }
}

更多关于HarmonyOS鸿蒙Next中弹出框（.bindSheet）一样点击就是onClick的时候底部网上显示的效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，但出场的时候还是往下移除的效果，这个咋实现呢，

可以参考使用TransitionEffect的asymmetric接口给弹窗设置非对称的转场效果满不满足需求：https://developer.huawei.com/consumer/cn/doc/architecture-guides/common-v1_26-ts_130-0000002406925329#section4637121214257

在HarmonyOS Next中，使用.bindSheet可创建底部弹出框。通过onClick事件触发，该组件从屏幕底部向上滑出，显示预设内容或操作选项。实现时需在ArkTS中定义状态变量控制显示隐藏，结合Sheet组件的属性和布局进行内容定制。动画效果由系统默认提供，无需额外配置。

在HarmonyOS Next中，要实现自定义的底部弹出动画效果，推荐使用@CustomDialog自定义弹窗组件结合animateTo动画API实现。系统自带的.bindSheet组件扩展性有限，无法满足高度定制化需求。

具体实现步骤：

  1. 使用@CustomDialog定义弹窗内容
  2. 通过animateTo控制弹窗的位移动画
  3. 设置transition属性实现平滑的进出场效果

关键代码示例：

@CustomDialog
struct CustomBottomSheet {
  private offsetY: number = 1000 // 初始位置在屏幕下方
  
  build() {
    Column() {
      // 自定义弹窗内容
      Text('自定义底部弹窗')
        .fontSize(20)
        .margin(20)
    }
    .width('100%')
    .height(400)
    .backgroundColor(Color.White)
    .borderRadius(20)
    .translate({ y: this.offsetY })
    .onClick(() => {
      // 点击关闭时的动画
      animateTo({
        duration: 300,
        curve: Curve.EaseOut
      }, () => {
        this.offsetY = 1000
      })
    })
  }
  
  aboutToAppear() {
    // 出场动画
    animateTo({
      duration: 300,
      curve: Curve.EaseOut
    }, () => {
      this.offsetY = 0
    })
  }
}

这种方法比使用系统组件更灵活，可以完全控制弹窗的样式、动画曲线和交互行为。

回到顶部