【HarmonyOSNext】实现矩形上下拖动、动态拖拽修改高度

简介

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

代码

登录后复制

@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%')
  }
}
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.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.

解析

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