ArkUI类微信语音消息

最新推荐文章于 2025-05-26 15:18:12 发布

清一照

最新推荐文章于 2025-05-26 15:18:12 发布

阅读量179

点赞数 8

文章标签：微信

本文链接：https://blog.youkuaiyun.com/m0_52466163/article/details/141434170

版权

前言

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