自定义组件拖动边框：实现自定义组件通过拖动上下左右边框改变其大小

自定义侧边栏，弹出框，其他可变组件场景。

HarmonyOS

e_leaner

2024-05-26 14:17:53

浏览

回答 1

按赞同

按时间

电子土豆片

定义组件上下左右四边缘可拖动标记，检测是否触发边缘。

canLeft: boolean = false // 组件-左边缘可拖动 
canRight: boolean = false // 组件-右边缘可拖动 
canTop: boolean = false // 组件-上边缘可拖动 
canBottom: boolean = false // 组件-下边缘可拖动1.
2.
3.
4.

在onTouch事件中检测是否触发边缘。

.onTouch((event: TouchEvent) => { 
  // 手势按下/鼠标按下 
  if (event.type == TouchType.Down) { 
    let finger = event.touches[0] 
    // 手势/鼠标点击位置x，y，在边缘0-30内判定为边缘可拖动，否则不可拖动 
    let px = finger.x 
    let py = finger.y 
    this.canLeft = (px >= 0 && px <= 30) ? true : false 
    this.canRight = (px >= this.currentWidth - 30 && px <= this.currentWidth) ? true : false 
    this.canTop = (py >= 0 && py <= 30) ? true : false 
    this.canBottom = (py >= this.currentHeight - 30 && py <= this.currentHeight) ? true : false 
  } 
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

在自定义拖动手势拖动时改变组件x，y，width，height信息。

.onActionUpdate((event: GestureEvent) => { 
  // 拖动事件更新 
  // 左边缘拖动 
  if (this.canLeft) { 
    // 更新宽度 
    this.currentWidth = this.initWidth - event.offsetX 
    // 左边缘拖动需要更新组件x坐标 
    this.currentPositionX = this.initPositionX + event.offsetX 
    // 限制最小宽度 
    if (this.initWidth - event.offsetX < this.minWidth) { 
      this.currentWidth = Math.max(this.minWidth, this.initWidth - event.offsetX) 
      this.currentPositionX = this.initPositionX + this.initWidth - this.minWidth 
    } 
    // 限制最大宽度 
    if (this.initWidth - event.offsetX > this.maxWidth) { 
      this.currentWidth = Math.min(this.maxWidth, this.initWidth - event.offsetX) 
      this.currentPositionX = this.initPositionX + this.initWidth - this.maxWidth 
    } 
  } 
  // 右边缘拖动 
  if (this.canRight) { 
    // 更新宽度 
    this.currentWidth = this.initWidth + event.offsetX 
    // 限制最小宽度 
    if (this.initWidth + event.offsetX < this.minWidth) { 
      this.currentWidth = Math.max(this.minWidth, this.initWidth + event.offsetX) 
    } 
    // 限制最小宽度 
    if (this.initWidth + event.offsetX > this.maxWidth) { 
      this.currentWidth = Math.min(this.maxWidth, this.initWidth + event.offsetX) 
    } 
  } 
 
  // 上边缘拖动 
  if (this.canTop) { 
    // 更新高度 
    this.currentHeight = this.initHeight - event.offsetY 
    // 上边缘拖动需要更新组件y坐标 
    this.currentPositionY = this.initPositionY + event.offsetY 
    // 限制最小高度 
    if (this.initHeight - event.offsetY < this.minHeight) { 
      this.currentHeight = Math.max(this.minHeight, this.initHeight - event.offsetY) 
      this.currentPositionY = this.initPositionY + this.initHeight - this.minHeight 
 
    } 
    // 限制最大高度 
    if (this.initHeight - event.offsetY > this.maxHeight) { 
      this.currentHeight = Math.min(this.maxHeight, this.initHeight - event.offsetY) 
      this.currentPositionY = this.initPositionY + this.initHeight - this.maxHeight 
    } 
  } 
  // 下边缘拖动 
  if (this.canBottom) { 
    // 更新高度 
    this.currentHeight = this.initHeight + event.offsetY 
    // 限制最小高度 
    if (this.initHeight + event.offsetY < this.minHeight) { 
      this.currentHeight = Math.max(this.minHeight, this.initHeight + event.offsetY) 
    } 
    // 限制最大高度 
    if (this.initHeight + event.offsetY > this.maxHeight) { 
      this.currentHeight = Math.min(this.maxHeight, this.initHeight + event.offsetY) 
    } 
  } 
})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.

电脑端鼠标拖动则需要添加鼠标事件更新鼠标指针。

鼠标进出组件：

.onHover((isHover: boolean) => { 
  // 鼠标进入或退出组件时触发修改鼠标指针，主要是边界位置触发鼠标南北向和东西向指针 
  window.getLastWindow(getContext(), (error: BusinessError, win: window.Window) => { 
    let windowId = win.getWindowProperties().id; 
    // 鼠标指针初始默认形态 
    let style = pointer.PointerStyle.DEFAULT 
    // 拖拽状态下说明在改变组件边框，保持东西向和南北向鼠标状态 
    if (this.isDragging) { 
      if (this.canLeft || this.canRight) 
        style = pointer.PointerStyle.WEST_EAST 
      if (this.canTop || this.canBottom) { 
        style = pointer.PointerStyle.NORTH_SOUTH 
      } 
    } 
 
    // 设置鼠标指针 
    try { 
      pointer.setPointerStyle( 
        windowId, 
        isHover ? pointer.PointerStyle.NORTH_SOUTH : style); 
    } catch (error) { 
    } 
  }) 
})1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

鼠标在组件内：

.onMouse((event: MouseEvent) => { 
  // 根据鼠标在组件内位置和状态修改鼠标指针，主要是边界位置触发鼠标南北向和东西向指针 
  let px = event.x // 鼠标相对于组件x 
  let py = event.y // 鼠标相对于组件y 
 
  window.getLastWindow(getContext(), (error: BusinessError, win: window.Window) => { 
    let windowId = win.getWindowProperties().id; 
    // 鼠标指针初始默认形态 
    let style = pointer.PointerStyle.DEFAULT 
    /* 
     * 鼠标指针为PointerStyle.WEST_EAST 东西向 
     * 1,当鼠标悬浮在组件左边界0-10区域 
     * 2,当canLeft为true且在拖动状态 
     * 
     * 3,当鼠标悬浮在组件右边界0-10区域 
     * 4,当canRight为true且在拖动状态 
     * */ 
    if (px >= 0 && px <= 10) { 
      style = pointer.PointerStyle.WEST_EAST 
    } else { 
      if (this.canLeft) { 
        if (this.isDragging) style = pointer.PointerStyle.WEST_EAST 
      } 
    } 
 
    if (px >= this.currentWidth - 10 && px <= this.currentWidth) { 
      style = pointer.PointerStyle.WEST_EAST 
    } else { 
      if (this.canRight) { 
        if (this.isDragging) style = pointer.PointerStyle.WEST_EAST 
      } 
    } 
    /* 
     * 鼠标指针为PointerStyle.NORTH_SOUTH 南北向 
     * 1,当鼠标悬浮在组件上边界0-10区域 
     * 2,当canTop为true且在拖动状态 
     * 
     * 3,当鼠标悬浮在组件下边界0-10区域 
     * 4,当canBottom为true且在拖动状态 
     * */ 
    if (py >= 0 && py <= 10) { 
      style = pointer.PointerStyle.NORTH_SOUTH 
    } else { 
      if (this.canTop) { 
        if (this.isDragging) style = pointer.PointerStyle.NORTH_SOUTH 
      } 
    } 
 
    if (py >= this.currentHeight - 10 && py <= this.currentHeight) { 
      style = pointer.PointerStyle.NORTH_SOUTH 
    } else { 
      if (this.canBottom) { 
        if (this.isDragging) style = pointer.PointerStyle.NORTH_SOUTH 
      } 
    } 
 
    // 设置鼠标指针 
    try { 
      pointer.setPointerStyle(windowId, style); 
    } catch (error) { 
    } 
  })         
})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.

拖动事件结束状态重置。

.onActionEnd(() => { 
  // 拖动结束 
  this.initWidth = this.currentWidth 
  this.initHeight = this.currentHeight 
  this.initPositionX = this.currentPositionX 
  this.initPositionY = this.currentPositionY 
  // 更新拖动状态标记 
  this.isDragging = false 
})1.
2.
3.
4.
5.
6.
7.
8.
9.

核心代码：

import pointer from '@ohos.multimodalInput.pointer'; 
import window from '@ohos.window'; 
import { BusinessError } from '@ohos.base'; 
  
@Entry 
@Component 
struct Index { 
  canLeft: boolean = false // 组件-左边缘可拖动 
  canRight: boolean = false // 组件-右边缘可拖动 
  canTop: boolean = false // 组件-上边缘可拖动 
  canBottom: boolean = false // 组件-下边缘可拖动 
  initWidth: number = 150 // 初始宽 
  initHeight: number = 300 // 初始高 
  initPositionX: number = 50 // 初始坐标x（相对于父组件） 
  initPositionY: number = 50 // 初始坐标y（相对于父组件） 
  minWidth: number = 100 // 组件最小宽度 
  maxWidth: number = 200 // 组件最大宽度 
  minHeight: number = 200 // 组件最小高度 
  maxHeight: number = 600 // 组件最大高度 
  @State currentWidth: number = this.initWidth // 组件当前宽度，拖动过程中会改变，初始为initWidth 
  @State currentHeight: number = this.initHeight // 组件当前高度，拖动过程中会改变，初始为initWidth 
  @State currentPositionX: number = this.initPositionX // // 组件当前x，拖动过程中会改变，初始为initPositionX 
  @State currentPositionY: number = this.initPositionY // // 组件当前y，拖动过程中会改变，初始为initPositionY 
  @State isDragging: boolean = false; // 是否在拖动中 
  
  build() { 
    Column() { 
      Stack({ alignContent: Alignment.Center }) { 
        // 可拖动改变大小组件Column 
        Column({ space: 10 }) { 
          Text('change frame gogogo').textAlign(TextAlign.Start).width('100%') 
          Text('change bounds gogogo').textAlign(TextAlign.Start).width('100%') 
        } 
        // 设置位置属性 
        .position({ x: this.currentPositionX, y: this.currentPositionY }) 
        // 设置宽度属性 
        .width(this.currentWidth) 
        // 设置高度属性 
        .height(this.currentHeight) 
        .borderWidth(2) 
        .onHover((isHover: boolean) => { 
          // 鼠标进入或退出组件时触发修改鼠标指针，主要是边界位置触发鼠标南北向和东西向指针 
          window.getLastWindow(getContext(), (error: BusinessError, win: window.Window) => { 
            let windowId = win.getWindowProperties().id; 
            // 鼠标指针初始默认形态 
            let style = pointer.PointerStyle.DEFAULT 
            // 拖拽状态下说明在改变组件边框，保持东西向和南北向鼠标状态 
            if (this.isDragging) { 
              if (this.canLeft || this.canRight) 
                style = pointer.PointerStyle.WEST_EAST 
              if (this.canTop || this.canBottom) { 
                style = pointer.PointerStyle.NORTH_SOUTH 
              } 
            } 
  
            // 设置鼠标指针 
            try { 
              pointer.setPointerStyle( 
                windowId, 
                isHover ? pointer.PointerStyle.NORTH_SOUTH : style); 
            } catch (error) { 
            } 
          }) 
        }) 
        .onMouse((event: MouseEvent) => { 
          // 根据鼠标在组件内位置和状态修改鼠标指针，主要是边界位置触发鼠标南北向和东西向指针 
          let px = event.x // 鼠标相对于组件x 
          let py = event.y // 鼠标相对于组件y 
  
          window.getLastWindow(getContext(), (error: BusinessError, win: window.Window) => { 
            let windowId = win.getWindowProperties().id; 
            // 鼠标指针初始默认形态 
            let style = pointer.PointerStyle.DEFAULT 
            /* 
             * 鼠标指针为PointerStyle.WEST_EAST 东西向 
             * 1,当鼠标悬浮在组件左边界0-10区域 
             * 2,当canLeft为true且在拖动状态 
             * 
             * 3,当鼠标悬浮在组件右边界0-10区域 
             * 4,当canRight为true且在拖动状态 
             * */ 
            if (px >= 0 && px <= 10) { 
              style = pointer.PointerStyle.WEST_EAST 
            } else { 
              if (this.canLeft) { 
                if (this.isDragging) style = pointer.PointerStyle.WEST_EAST 
              } 
            } 
  
            if (px >= this.currentWidth - 10 && px <= this.currentWidth) { 
              style = pointer.PointerStyle.WEST_EAST 
            } else { 
              if (this.canRight) { 
                if (this.isDragging) style = pointer.PointerStyle.WEST_EAST 
              } 
            } 
            /* 
             * 鼠标指针为PointerStyle.NORTH_SOUTH 南北向 
             * 1,当鼠标悬浮在组件上边界0-10区域 
             * 2,当canTop为true且在拖动状态 
             * 
             * 3,当鼠标悬浮在组件下边界0-10区域 
             * 4,当canBottom为true且在拖动状态 
             * */ 
            if (py >= 0 && py <= 10) { 
              style = pointer.PointerStyle.NORTH_SOUTH 
            } else { 
              if (this.canTop) { 
                if (this.isDragging) style = pointer.PointerStyle.NORTH_SOUTH 
              } 
            } 
  
            if (py >= this.currentHeight - 10 && py <= this.currentHeight) { 
              style = pointer.PointerStyle.NORTH_SOUTH 
            } else { 
              if (this.canBottom) { 
                if (this.isDragging) style = pointer.PointerStyle.NORTH_SOUTH 
              } 
            } 
  
            // 设置鼠标指针 
            try { 
              pointer.setPointerStyle(windowId, style); 
            } catch (error) { 
            } 
          }) 
        }) 
        .onTouch((event: TouchEvent) => { 
          // 手势按下/鼠标按下 
          if (event.type == TouchType.Down) { 
            let finger = event.touches[0] 
            // 手势/鼠标点击位置x，y，在边缘0-30内判定为边缘可拖动，否则不可拖动 
            let px = finger.x 
            let py = finger.y 
            this.canLeft = (px >= 0 && px <= 30) ? true : false 
            this.canRight = (px >= this.currentWidth - 30 && px <= this.currentWidth) ? true : false 
            this.canTop = (py >= 0 && py <= 30) ? true : false 
            this.canBottom = (py >= this.currentHeight - 30 && py <= this.currentHeight) ? true : false 
          } 
        }) 
        .priorityGesture( 
          // 定义拖动手势/鼠标拖动事件 
          PanGesture({ distance: 1 }) 
            .onActionStart((event: GestureEvent) => { 
              // 拖动开始 
              // 更新拖动状态标记 
              this.isDragging = true 
            }) 
            .onActionUpdate((event: GestureEvent) => { 
              // 拖动事件更新 
              // 左边缘拖动 
              if (this.canLeft) { 
                // 更新宽度 
                this.currentWidth = this.initWidth - event.offsetX 
                // 左边缘拖动需要更新组件x坐标 
                this.currentPositionX = this.initPositionX + event.offsetX 
                // 限制最小宽度 
                if (this.initWidth - event.offsetX < this.minWidth) { 
                  this.currentWidth = Math.max(this.minWidth, this.initWidth - event.offsetX) 
                  this.currentPositionX = this.initPositionX + this.initWidth - this.minWidth 
                } 
                // 限制最大宽度 
                if (this.initWidth - event.offsetX > this.maxWidth) { 
                  this.currentWidth = Math.min(this.maxWidth, this.initWidth - event.offsetX) 
                  this.currentPositionX = this.initPositionX + this.initWidth - this.maxWidth 
  
                } 
              } 
              // 右边缘拖动 
              if (this.canRight) { 
                // 更新宽度 
                this.currentWidth = this.initWidth + event.offsetX 
                // 限制最小宽度 
                if (this.initWidth + event.offsetX < this.minWidth) { 
                  this.currentWidth = Math.max(this.minWidth, this.initWidth + event.offsetX) 
                } 
                // 限制最小宽度 
                if (this.initWidth + event.offsetX > this.maxWidth) { 
                  this.currentWidth = Math.min(this.maxWidth, this.initWidth + event.offsetX) 
                } 
              } 
  
              // 上边缘拖动 
              if (this.canTop) { 
                // 更新高度 
                this.currentHeight = this.initHeight - event.offsetY 
                // 上边缘拖动需要更新组件y坐标 
                this.currentPositionY = this.initPositionY + event.offsetY 
                // 限制最小高度 
                if (this.initHeight - event.offsetY < this.minHeight) { 
                  this.currentHeight = Math.max(this.minHeight, this.initHeight - event.offsetY) 
                  this.currentPositionY = this.initPositionY + this.initHeight - this.minHeight 
  
                } 
                // 限制最大高度 
                if (this.initHeight - event.offsetY > this.maxHeight) { 
                  this.currentHeight = Math.min(this.maxHeight, this.initHeight - event.offsetY) 
                  this.currentPositionY = this.initPositionY + this.initHeight - this.maxHeight 
                } 
              } 
              // 下边缘拖动 
              if (this.canBottom) { 
                // 更新高度 
                this.currentHeight = this.initHeight + event.offsetY 
                // 限制最小高度 
                if (this.initHeight + event.offsetY < this.minHeight) { 
                  this.currentHeight = Math.max(this.minHeight, this.initHeight + event.offsetY) 
                } 
                // 限制最大高度 
                if (this.initHeight + event.offsetY > this.maxHeight) { 
                  this.currentHeight = Math.min(this.maxHeight, this.initHeight + event.offsetY) 
                } 
              } 
            }) 
            .onActionEnd(() => { 
              // 拖动结束 
              this.initWidth = this.currentWidth 
              this.initHeight = this.currentHeight 
              this.initPositionX = this.currentPositionX 
              this.initPositionY = this.currentPositionY 
              // 更新拖动状态标记 
              this.isDragging = false 
            }) 
        ) 
      } 
      .backgroundColor(0xdddddd) 
      .width('80%') 
      .height('80%') 
    }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.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.
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.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.