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

1.了解知识

（1）鸿蒙 HarmonyOS ArkTS 点击事件，获取被点击的位置

这个时候我们需要了解到ClickEvent属性

ClickEvent对象说明

从API version 9开始，该接口支持在ArkTS卡片中使用。

点击位置相对于应用窗口左上角的X,Y坐标,还有一个screenX,screenY.

由于从API verdion 10开始不再维护，建议使用windowX,WindowY代替。下面也给出screen介绍

下面给出成果展示和代码

@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 )

  }
}
 

（2）弹窗

这里我们选用官方文档中时间滑动选择器弹窗和模态弹窗来进行举例实现
这里选用模态弹窗的原因：1.方便进行拖动，获取实时位置 2.一个实用的应用案例

时间滑动选择器弹窗 (TimePickerDialog)

以24小时的时间区间创建时间滑动选择器，展示在弹窗上。

==说明：==

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。
从API version 10开始，可以通过使用UIContext中的showTimePickerDialog来明确UI的执行上下文。

TimePickerDialogOptions对象说明

更多详参数请参阅官方文档

（3）半模态弹窗

bindSheet--------bindSheet(isShow: boolean, builder: CustomBuilder, options?: SheetOptions)

给组件绑定半模态页面，点击后显示模态页面。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
isShow boolean 是 是否显示半模态页面。
从API version 10开始，该参数支持$$双向绑定变量。
builder CustomBuilder 是 配置半模态页面内容。
options SheetOptions 否 配置半模态页面的可选属性。

说明：

在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。

为了使isShow参数值与半模态界面的状态同步，建议使用$$双向绑定isShow参数。

更多详细信息请参阅官方文档

2.最后，铺垫了这么多，想必大家已经看出来如何把跟随弹窗进行实现了吧

下面我们来看成果展示和详细代码

成果展示

详细代码

// 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%')
  }
}