OpenHarmony之跟随弹窗CustomDialog（详细代码实现+运行实例，Let Go） 原创

@Entry
@Component
struct Page {

  @State X:number = 0
  @State Y:number = 0
  @State windowX:number =0
  @State windowY:number = 0
  @State timestamp:number = 0
  build () {
    Row () {
      Column(){
        Text('下面全是点击位置相对于...').fontColor(Color.White).margin({bottom:20})
        Text('相对于被点击元素原始区域左边缘的X坐标:' + this.X).fontColor(Color.White).margin({bottom:20})
        Text('相对于被点击元素原始区域左上角的Y坐标:' + this.Y).fontColor(Color.White).margin({bottom:20})
        Text('相对于应用窗口左上角的X坐标:' + this.windowX).fontColor(Color.White).margin({bottom:20})
        Text('相对于应用窗口左上角的Y坐标:' + this.windowY).fontColor(Color.White).margin({bottom:20})
        Button('Button1')
          .onClick((event)=>{
            //获取相对于元素的坐标
            this.X = event.x
            this.Y = event.y
            //获取相对于窗口的坐标
            this.windowX = event.windowX
            this.windowY = event.windowY

            console.log ( '点击事件')
          })
        Button('Button2')
          .onClick((event)=>{
            //获取相对于元素的坐标
            this.X = event.x
            this.Y = event.y
            //获取相对于窗口的坐标
            this.windowX = event.windowX
            this.windowY = event.windowY

            console.log ( '点击事件')
          })
          .margin({top:20})
        Button('Button3')
          .onClick((event: ClickEvent)=>{
            //获取相对于元素的坐标
            this.X = event.x
            this.Y = event.y
            //获取相对于窗口的坐标
            this.windowX = event.windowX
            this.windowY = event.windowY

            console.log ( '点击事件')
          })
          .margin({top:20})

      }

    }
    .justifyContent ( FlexAlign.Center )
    .width ( '100%' )
    .height ( '100%' )
    .backgroundColor ( Color.Orange )

  }
}
 
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.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.

// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State selectTime: Date = new Date('2020-12-25T08:30:00')
  @State isShow:boolean = false
  @State windowX:number = 0
  @State windowY:number = 0



  @Builder myBuilder() {
    Column() {
      Text("设置时间")
         .fontSize(20)
         .margin(10)
        .onClick((event: ClickEvent)=>{
          this.windowX = event.windowX
          this.windowY = event.windowY
          if(this.windowY>600)this.windowY-=370
          //时间选择器
          TimePickerDialog.show({
            selected: this.selectTime,
            useMilitaryTime: true,
            disappearTextStyle: { color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } },
            textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal } },
            selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } },
            onAccept: (value: TimePickerResult) => {
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute)
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
              }
            },
            onCancel: () => {
              console.info("TimePickerDialog:onCancel()")
            },
            onChange: (value: TimePickerResult) => {
              this.selectTime.setHours(value.hour, value.minute)
              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
            },
            onDidAppear: () => {
              console.info("TimePickerDialog:onDidAppear()")
            },
            onDidDisappear: () => {
              console.info("TimePickerDialog:onDidDisappear()")
            },
            onWillAppear: () => {
              console.info("TimePickerDialog:onWillAppear()")
            },
            onWillDisappear: () => {
              console.info("TimePickerDialog:onWillDisappear()")
            },
            offset: { dx: this.windowX-50, dy: this.windowY-200 }

          })

        })

    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(),{
          detents:[SheetSize.MEDIUM,SheetSize.LARGE,200],
          backgroundColor:Color.Gray,
          blurStyle:BlurStyle.Thick,
          title:{title:"点击位置的X,Y坐标为：", subtitle:`(${this.windowX},${this.windowY})`},
          preferType: SheetType.CENTER,
          shouldDismiss:((sheetDismiss: SheetDismiss)=> {
            console.log("bind sheet shouldDismiss")
            sheetDismiss.dismiss()
          })
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

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.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.