ArkUI类微信语音消息

前言

UI：整体是Column布局，然后用Blank()组件将操作栏置底，图标设置了手势组（长按以及滑动，并将两个手势设置为parallel，表示可以并发执行），此外UI有些冗余
TS：用一个isShow表示是否需要弹出操作栏，用bottomHeight和bottomWidth存储底部操作栏的高度和宽度，定义一个枚举类，里面的枚举值用来表示不同的状态，当长按和滑动的时候，使用gesture的属性方法注册事件

效果

长按语音代码后图片更换，然后弹出取消和转文字按钮，同时移动鼠标，靠近哪个操作区，哪个操作区就会变大
UI很丑，纯学习

代码

// 添加 枚举类型，用于识别 当前手势位置
enum SelectedType{
  DELETE, // 取消时
  TEXT,// 转文本
  VOICE // 语音发送
}
@Entry
@Component
struct GestureDemoPage {
  @State message: string = 'Hello World';
  @State statue:SelectedType = SelectedType.VOICE
  @State isShow:boolean = false
  bottomWidth:number = 0
  bottomHeight:number = 0

  build() {
    Column(){
      Column(){}
        .layoutWeight(1)
      if (this.isShow){
         Column(){
            Row(){
              Text('X')
                .fontSize(40)
                .backgroundColor(Color.Orange)
                .width(60)
                .height(60)
                .textAlign(TextAlign.Center)
                .borderRadius('50%')
                .rotate({angle:-45})
                .scale({
                  x:this.statue === SelectedType.DELETE?1.2:1,
                  y:this.statue === SelectedType.DELETE?1.2:1
                })
              Text('文')
                .fontSize(40)
                .backgroundColor(Color.Orange)
                .width(60)
                .height(60)
                .textAlign(TextAlign.Center)
                .borderRadius('50%')
                .rotate({angle:45})
                .scale({
                  x:this.statue === SelectedType.TEXT?1.2:1,
                  y:this.statue === SelectedType.TEXT?1.2:1
                })
            }
            .width('70%')
            .height(100)
            .justifyContent(FlexAlign.SpaceAround)
            .animation({
              duration:1000,
              curve:Curve.Linear
            })
            Row(){
              Image(this.isShow?$r("app.media.microphone_on"):$r('app.media.microphone'))
                .width(50)
            }
            .backgroundColor('#ff484646')
            .width('100%')
            .justifyContent(FlexAlign.Center)
            .height(100)
           .onAreaChange((oldValue,newValue)=>{
             // console.log(JSON.stringify(newValue))
             //获取底部组件的高度和宽度并且赋给全局的变量
             this.bottomHeight = newValue.height as number
             this.bottomWidth = newValue.width as number
           })
          }
          .width('100%')
          .height(200)
        .backgroundColor('#ccc')
      }else {
        Row(){
          Image(this.isShow?$r("app.media.microphone_on"):$r('app.media.microphone'))
            .width(50)
            .gesture(
              GestureGroup(
                GestureMode.Parallel,//同时识别
                //longPress
                LongPressGesture().onAction(()=>{
                  this.isShow = true
                }).onActionEnd(()=>{
                  this.isShow = false
                }),
                PanGesture().onActionUpdate((event)=>{
                  let x = event.fingerList[0].globalX
                  let y = event.fingerList[0].globalY
                  // console.log(`x:${x},y:${y}`)
                  if (y>780-this.bottomHeight) {
                    this.statue = SelectedType.VOICE
                  }else if(x<this.bottomWidth/2){
                    this.statue = SelectedType.DELETE
                  }else {
                    this.statue = SelectedType.TEXT
                  }
                })
              )
            )
        }
        .width('100%')
        .height(100)
        .justifyContent(FlexAlign.Center)
      }
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#fff')
    .justifyContent(FlexAlign.End)
    .onAreaChange((oldValue,newValue)=>{
      //测试整个预览器的height和width
      // console.log('line110',JSON.stringify(oldValue))
      // console.log('line111',JSON.stringify(newValue))
    })
  }
}