PopWindow的效果实现有哪些？

@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 }) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.

@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 } 
      }) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

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) 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.