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

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

HarmonyOS
2024-05-26 14:17:53
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
rhyine

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

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

在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 
  } 
})

在自定义拖动手势拖动时改变组件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) 
    } 
  } 
})

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

鼠标进出组件:

.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) { 
    } 
  })         
})

拖动事件结束状态重置。

.onActionEnd(() => { 
  // 拖动结束 
  this.initWidth = this.currentWidth 
  this.initHeight = this.currentHeight 
  this.initPositionX = this.currentPositionX 
  this.initPositionY = this.currentPositionY 
  // 更新拖动状态标记 
  this.isDragging = false 
})

核心代码:

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

实现效果

注明适配的版本信息

IDE版本:4.1.3.500

SDK版本:OpenHarmony 4.1.0(11)

分享
微博
QQ
微信
回复
2024-05-27 18:09:30
相关问题
自定义组件嵌套子组件
8057浏览 • 3回复 待解决
如何自定义模拟Tabs组件
429浏览 • 1回复 待解决
如何自定义组件原型菜单
468浏览 • 1回复 待解决
ArkTs如何自定义容器组件
1784浏览 • 1回复 待解决
自定义弹窗自定义转场动画
446浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
7345浏览 • 1回复 待解决
自定义组件如何导出、引入?
1056浏览 • 1回复 待解决
自定义子 window 大小限制
652浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4697浏览 • 2回复 待解决
自定义组件中如何添加图片?
1273浏览 • 1回复 待解决
如何设置自定义组件height缺省
671浏览 • 1回复 待解决
ArkUI(ets)怎么实现右边框
2338浏览 • 1回复 待解决
自定义组件是否支持renderFit属性
687浏览 • 1回复 待解决
JAVA卡片怎么用自定义组件
4971浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
987浏览 • 1回复 待解决
Grid组件的scrollBar是否支持自定义
1020浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人