PopWindow的效果实现有哪些?

PopWindow的效果实现

HarmonyOS
2024-05-26 11:29:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
morning_dxm

PopUpMenu组件能做到下图左部分,但是开发中期望效果是右部分。此时就无法完全依赖官网的PopUp组件的能力了,需要进行特殊处理。

1) 需要自定义PopUp的弹窗

@CustomDialog 
struct CustomDialogExample { 
  controller: CustomDialogController 
  cancel: () => void 
  confirm: () => void 
 
  build() { 
    Column() { 
      Column() { 
        RelativeContainer() { 
          Menu() { 
            MenuItem({ startIcon: $r("app.media.scanning"), content: "扫一扫" }) 
              .margin({ 
                top: 40, 
                bottom: 0 
              }) 
 
            MenuItem({ startIcon: $r("app.media.versions"), content: "版本切换" }) 
            MenuItem({ startIcon: $r("app.media.code"), content: "收付款" }) 
            MenuItem({ startIcon: $r("app.media.online_service"), content: "在线客服" }) 
            MenuItem({ startIcon: $r("app.media.net_service"), content: "网络客服" }) 
            MenuItem({ startIcon: $r("app.media.elimination"), content: "消保专区" }) 
          } 
          .id("row1") 
          .alignRules({ 
            top: { anchor: 'row2', align: VerticalAlign.Bottom }, 
            left: { anchor: '__container__', align: HorizontalAlign.Start } 
          }) 
 
          Column() { 
            Image($r('app.media.plus')) 
              .width(30) 
              .height(30) 
              .rotate({ angle: 45 }) // .bindMenu(this.MyMenu) 
          } 
          .height(0) 
          .id('row2') 
          .alignRules({ 
            top: { anchor: '__container__', align: VerticalAlign.Top }, 
            right: { anchor: '__container__', align: HorizontalAlign.End } 
          }) 
          .backgroundColor(Color.Black) 
        } 
      } 
      .size({ width: 150, height: 350 }) 
    }.width(150) 
    .animation({ duration: 2000, delay: 0, curve: Curve.Ease }) 
  } 
}

2) 定义右上角的Circle-Plus符号,并绑定1) 中的自定义弹窗

@Builder 
roatedCircle() { 
  RelativeContainer() { 
    Image($r('app.media.plus')) 
      .width(30) 
      .height(30) 
      .objectFit(ImageFit.Fill) 
      .rotate({ angle: this.rotateValue })// .bindMenu(this.MyMenu) 
      .onClick(() => { 
        this.animate = !this.animate; 
 
        animateTo({ curve: curves.springMotion() }, () => { 
          // this.rotateValue = this.animate ? 45 : 0; 
          this.rotateValue = 0; 
        }); 
 
        this.dialogController = new CustomDialogController({ 
          builder: CustomDialogExample({ 
            cancel: this.onCancel, 
            confirm: this.onAccept, 
          }), 
          alignment: DialogAlignment.TopStart, 
          // offset: { dx: 235, dy: 40 }, // 真机位置 
          offset: { dx: 210, dy: 0 }, // 预览器位置 
          customStyle: true 
        }) 
 
        if (this.dialogController != undefined) { 
          this.dialogController.open() 
          this.dialogController 
          this.flag = true 
        } 
      }) 
      .onBlur(() => { 
      }) 
      .id('row1') 
      .visibility(this.flag ? Visibility.Visible : Visibility.Hidden) 
      .alignRules({ 
        top: { anchor: '__container__', align: VerticalAlign.Top }, 
        right: { anchor: '__container__', align: HorizontalAlign.End } 
      }) 
  } 
}

3) 构造build函数,完成demo

import curves from '@ohos.curves'; 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  @State select: boolean = true 
  @State rotateValue: number = 0 
  @State animate: boolean = false 
  @State flag: boolean = true 
  dialogController: CustomDialogController = new CustomDialogController({ 
    builder: CustomDialogExample({ 
      cancel: this.onCancel, 
      confirm: this.onAccept, 
    }), 
    alignment: DialogAlignment.TopStart, 
    offset: { dx: 0, dy: 0 } 
  }) 
 
  onCancel() { 
    this.flag = false 
    console.info('Callback when the first button is clicked') 
  } 
 
  onAccept() { 
    console.info('Callback when the second button is clicked') 
  } 
 
  existApp() { 
    console.info('Click the callback in the blank area') 
  } 
 
  build() { 
    // Button('click for Menu') 
    Row() { 
      this.roatedCircle() 
    } 
    .justifyContent(FlexAlign.Center) 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 11:40:39
相关问题
引导遮罩效果实现最佳方案
340浏览 • 1回复 待解决
动态布局下加载loading效果实现
280浏览 • 1回复 待解决
Binder链接池实现有哪些方法?
392浏览 • 1回复 待解决
Scrollerfling实现有什么好方案
410浏览 • 1回复 待解决
如何实现列表页单选效果
1040浏览 • 0回复 待解决
如何实现组件阴影效果
377浏览 • 1回复 待解决
如何实现类似keyframes效果
794浏览 • 1回复 待解决
如何实现按钮点击效果
25浏览 • 2回复 待解决
canvas如何实现水印效果
402浏览 • 1回复 待解决
如何实现星级评分效果
59浏览 • 1回复 待解决
如何实现图片大图预览效果
530浏览 • 1回复 待解决
滑动组件如何实现单边spring效果
534浏览 • 1回复 待解决
是否可以实现滚动锚定效果
419浏览 • 1回复 待解决
如何实现通用吸顶效果
200浏览 • 1回复 待解决
如何等效实现JSONObejct效果
262浏览 • 1回复 待解决
如何通过Progress实现loading效果
43浏览 • 1回复 待解决