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

简介

实现一个矩形块上下拖动，并且可以拖动边缘定位点改变矩形块高度。实现效果如下：
在这里插入图片描述

代码

@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.offsetYthis.rectHeight = this.originHeight - event.offsetY}}).onActionEnd((event: GestureEvent) => {this.positionX = this.offsetXthis.positionY = this.offsetYthis.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.offsetXthis.offsetY = this.positionY + event.offsetY}}).onActionEnd((event: GestureEvent) => {this.positionX = this.offsetXthis.positionY = this.offsetYconsole.info('Pan end')}))}.height('100%').width('100%')}
}