HarmonyOS 鸿蒙Next 如何实现类似android的PopupWindow效果

HarmonyOS 鸿蒙Next 如何实现类似android的PopupWindow效果

1、用什么组件实现一个可以记录上次操作UI状态的弹窗

比如：

第一次打开编辑的UI状态,后续关闭再次打开,依旧是那个UI状态，弹窗里是一个列表，滑动到一半，下次打开依旧是滑动到那个位置

2、怎么在指定组件下方显示，且弹窗下方区域可以有蒙版，

目前使用气泡可以实现指定组件位置，但是每次show都是新的UI状态，蒙版也是气泡以外的区域都是蒙版

例如jd的筛选面板，要求每次打开都是上次的UI位置（即使滑动也是上一次的滑动位置），且弹窗下方才有蒙版（弹窗上方的标题区域就没有蒙版）

WechatIMG522.jpg


更多关于HarmonyOS 鸿蒙Next 如何实现类似android的PopupWindow效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

使用stack可以实现假的dialog覆盖原页面上面，用visible控制显隐可保持上次操作UI状态。蒙版加一个Column区域即可，设置背景色透明度。下面demo可供参考：

@Entry
@Component
struct a {
  // 显隐控制设置为不占用
  @State visible: Visibility = Visibility.None
  @State list: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

  build() {
    // 使用stack可以实现假的dialog覆盖原页面上面
    Stack() {
      Column() {
        Row() {
          Text('标题')
          Button('click')
            .onClick(() => {
              if (this.visible == Visibility.Visible) {
                this.visible = Visibility.None
              } else {
                this.visible = Visibility.Visible
              }
            })
        }.width('100%').border({ width: 2, color: Color.Black }).justifyContent(FlexAlign.Center)

        Text('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA')
          .fontSize(30)
          .height(600)
      }.height('100%').backgroundColor('#eeeeee')


      Stack() {
        Column()
          .height('100%')
          .width('100%')
          .backgroundColor(Color.Black)
          .opacity(0.5)
          .onClick(() => {
            this.visible = Visibility.None
          })
        Scroll() {
          Column() {
            ForEach(this.list, (item: number) => {
              Row() {
                Text(String(item))
              }.height(40)

              Divider()
            })
            Button('cancel')
              .onClick(() => {
                this.visible = Visibility.None
              }).backgroundColor(0xffffff).fontColor(Color.Black).margin(10)
          }
          .width('100%')
          .backgroundColor(Color.White)
        }.height(200).width('100%').scrollBar(BarState.Off).borderRadius(20)
      }
      .alignContent(Alignment.Top)
      .height('100%')
      .margin({ top: 90 })
      .visibility(this.visible)
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 如何实现类似android的PopupWindow效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


布局用Stack然后上面盖一层半透明。动画什么的都按进入动画就行。点击获得数据，然后渲染就行了

在HarmonyOS 鸿蒙Next中，实现类似Android的PopupWindow效果，可以通过使用Ability和Dialog组件来完成。以下是具体实现方法：

  1. 创建Dialog布局：首先，定义一个XML布局文件，用于Dialog的UI展示。这个文件可以包含你需要的各种视图元素。

  2. 创建Dialog类：接着，创建一个自定义的Dialog类，继承自系统的Dialog类。在这个类中，你可以加载之前定义的布局文件，并设置Dialog的显示参数，如位置、大小等。

  3. 在Ability中显示Dialog：在需要显示PopupWindow的地方，实例化你的自定义Dialog类，并通过调用show方法将其显示出来。你可以通过传递参数给Dialog的构造函数，来动态地改变Dialog的内容。

  4. 处理用户交互：在Dialog类中，你可以设置各种视图的事件监听器，来处理用户的交互行为，如点击按钮、选择选项等。

  5. 关闭Dialog：当用户完成交互或满足某些条件时，你可以调用Dialog的dismiss方法来关闭它。

通过上述步骤，你就可以在HarmonyOS 鸿蒙Next中实现类似Android的PopupWindow效果。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部