简介

实现一个矩形块上下拖动，并且可以拖动边缘定位点改变矩形块高度。实现效果如下：

代码

@Entry
@Component
struct Rec_Page {
  @State penOffsetY: number = 0;
  @State offsetX: number = 0
  @State offsetY: number = 0
  @State positionX: number = 0
  @State positionY: number = 0
  @State rectHeight: number = 50;
  @State originHeight: number = 50;

  build() {
    Column() {
      Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
        .margin({ bottom: 20 })
      Text('penOffsetY:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.penOffsetY)
        .margin({ bottom: 20 })
      Text(`rectHeight:${this.rectHeight}`)
        .margin({ bottom: 20 })
      RelativeContainer() {
        Shape() {
          Rect()
            .width("100%")
            .height("100%")
            .fill("#dbe6fc")
            .radius(5)
        }
        .borderColor("#3152ab")
        .borderWidth(1)
        .borderRadius(5)
        .width("100%")
        .height("100%")

        Text("添加日程")
          .fontColor("#375bc1")
          .id("AddText")
          .alignRules({
            "center": { "anchor": "__container__", "align": VerticalAlign.Center },
            "middle": { "anchor": "__container__", "align": HorizontalAlign.Center }
          })
        Circle({ height: 10, width: 10 })
          .fill(Color.White)
          .id("TopCircle")
          .stroke("#1a52e3")
          .strokeWidth(2)
          .margin({ right: 150 })
          .alignRules({
            "center": { "anchor": "__container__", "align": VerticalAlign.Top },
            "middle": { "anchor": "__container__", "align": HorizontalAlign.End }
          })
          .gesture(
            PanGesture({
              fingers: 1,
              direction: PanDirection.Vertical,
              distance: 1
            }).onActionUpdate((event: GestureEvent) => {
              if (event) {
                this.offsetY = this.positionY + event.offsetY
                this.rectHeight = this.originHeight - event.offsetY
              }
            })
              .onActionEnd((event: GestureEvent) => {
                this.positionX = this.offsetX
                this.positionY = this.offsetY
                this.originHeight = this.rectHeight;
                console.info('Pan end')
              })
          )
        Circle({ height: 10, width: 10 })
          .fill(Color.White)
          .id("BottomCircle")
          .stroke("#1a52e3")
          .strokeWidth(2)
          .margin({ left: 150 })
          .alignRules({
            "center": { "anchor": "__container__", "align": VerticalAlign.Bottom },
            "middle": { "anchor": "__container__", "align": HorizontalAlign.Start }
          })
          .gesture(
            PanGesture({
              fingers: 1,
              direction: PanDirection.Vertical,
              distance: 2
            }).onActionUpdate((event: GestureEvent) => {
              if (event && this.rectHeight > 15) {
                this.rectHeight = this.originHeight + event.offsetY
              }
            })
              .onActionEnd((event: GestureEvent) => {
                this.originHeight = this.rectHeight;
                console.info('Pan end')
              })

          )

      }
      .margin({ top: 20 })
      .height(this.rectHeight)
      .width("80%")
      .translate({ x: this.offsetX, y: this.offsetY, z: 0 })
      .gesture(
        PanGesture({
          fingers: 1,
          direction: PanDirection.Vertical,
          distance: 1
        })
          .onActionStart((event: GestureEvent) => {
            console.info('Pan start')
          })
          .onActionUpdate((event: GestureEvent) => {
            if (event) {
              this.offsetX = this.positionX + event.offsetX
              this.offsetY = this.positionY + event.offsetY
            }
          })
          .onActionEnd((event: GestureEvent) => {
            this.positionX = this.offsetX
            this.positionY = this.offsetY
            console.info('Pan end')
          })
      )
    }
    .height('100%')
    .width('100%')
  }
}

解析

• 通过PanGesture手势类和translate来实现组件的实时偏移。
• 通过RelativeContainer来实现边缘的圆圈定位。
• 实现矩形高度向上的方式是，增加高度的同时，往上偏移相同的距离