HarmonyOS鸿蒙Next中@ComponentV2下如何实现一个底部弹窗？

HarmonyOS鸿蒙Next中@ComponentV2下如何实现一个底部弹窗？

@ComponentV2 下如何实现一个底部弹窗？

@ComponentV2 下customDialog 用不了，要是有个可以参考的demo就最好了；

7 回复

使用@CustomDialog装饰器定义弹窗组件，并通过alignment: DialogAlignment.Bottom设置底部对齐

[@CustomDialog](/user/CustomDialog)
struct BottomDialog {
  controller: CustomDialogController
  build() {
    Column() {
      Text('底部弹窗内容')
        .width('100%') 
        .height(200)
        .backgroundColor(Color.White)
    }
    .width('100%')
    .margin({ bottom: 0 })
  }
}

建议使用半模态弹窗，半模态方案支持拖拽交互和动态高度调整，推荐复杂场景使用

更多关于HarmonyOS鸿蒙Next中@ComponentV2下如何实现一个底部弹窗？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主可通过 @CustomDialog 结合 CustomDialogController 实现，记得配置 alignment 和 offset 实现底部定位：

struct BottomDialog {

  controller: CustomDialogController

  build() {

    Column() {

      Text('底部弹窗内容')
        .fontSize(20)

      Button('关闭').onClick(() => this.controller.close())

    }
    .width('100%')
    .height(200)
    .backgroundColor(Color.White)
  }
}

// 在父组件中使用
@Entry
@ComponentV2
struct ParentPage {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: BottomDialog(),
    alignment: DialogAlignment.Bottom, // 底部对齐
    offset: { dy: 0 }, // 垂直偏移量为0
    customStyle: true // 允许自定义样式
  })
  build() {
    Column() {
      Button('打开底部弹窗')
        .onClick(() => this.dialogController.open())
    }
  }
}

最终还是选择了 半模态页面

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

可以使用HMRouter,HMRouter的页面注解里配置dialog: true，就可以使得组件成为弹窗

@HMRouter({
  pageUrl: 'PayDialogContent',
  dialog: true,  //这样这个组件，就相当于是一个弹窗了
  lifecycle: 'ExitPayLifecycle',
  interceptors: ['LoginCheckInterceptor']
})
@ComponentV2
export struct PayDialogContent {
  // ...
}

在HarmonyOS Next中，使用@ComponentV2实现底部弹窗步骤如下：

  1. 创建自定义弹窗组件，继承CommonDialog类
  2. 在onInit()中设置弹窗样式：
dialogStyle: CommonDialogStyle = {
  height: '50%',
  alignment: DialogAlignment.Bottom
}
  1. 使用@CustomDialog装饰器声明组件：
@CustomDialog
export struct BottomDialog {
  build() {
    // 弹窗内容
  }
}
  1. 调用时使用showDialog()方法显示弹窗。

注意设置alignment为Bottom即可实现底部弹窗效果。

在HarmonyOS Next的@ComponentV2中实现底部弹窗，可以使用@CustomDialog装饰器结合自定义布局实现。以下是核心实现步骤：

  1. 创建自定义弹窗组件：
@CustomDialog
struct BottomDialog {
  controller: CustomDialogController

  build() {
    Column() {
      // 弹窗内容
      Text('底部弹窗内容')
        .fontSize(16)
        .margin(10)
      
      Button('关闭')
        .onClick(() => {
          this.controller.close()
        })
    }
    .width('100%')
    .padding(20)
    .backgroundColor(Color.White)
    .borderRadius(16, {top: true}) // 仅顶部圆角
  }
}
  1. 在父组件中调用：
[@ComponentV2](/user/ComponentV2)
struct ParentComponent {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: BottomDialog(),
    alignment: DialogAlignment.Bottom, // 关键：设置为底部对齐
    customStyle: true // 启用自定义样式
  })

  build() {
    Button('打开底部弹窗')
      .onClick(() => {
        this.dialogController.open()
      })
  }
}

关键点说明：

  1. 必须设置alignment: DialogAlignment.Bottom实现底部定位
  2. customStyle: true允许自定义弹窗样式
  3. 通过borderRadius设置顶部圆角实现更美观的视觉效果

注意：确保在弹窗组件中正确处理controller的关闭操作，避免内存泄漏。

回到顶部