长按滑动显示不同的内容

当手指按下并滑动一段距离然后抬起,手指按下及滑动及抬起所经过的范围的text组件的字母。

HarmonyOS
2024-05-26 14:41:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
失望的满天星

核心代码解释

@Entry 
@Component 
struct Second { 
  @State displayMsg: string = 'Hello World' 
  private color_list1 = [Color.Red, Color.White, Color.Blue, Color.Gray, Color.Orange, Color.Pink, Color.Red, Color.Yellow] 
  private text_listArr: Array<Array<string>> = [ 
    ['A', 'B', 'C', 'D', 'E'], 
    ['F', 'G', 'H', 'J', 'K'], 
    ['L', 'M', 'N', 'O', 'P'], 
    ['Q', 'R', 'S', 'T', 'U'], 
    ['V', 'W', 'X', 'Y', 'Z'] 
  ] 
  private textTemp = '' 
  private childWidth: number = 60 
  private childHeight: number = 60 
  
  isOnTouchInParent(event: TouchEvent): boolean { 
    if (event.touches[0].x > 0 && event.touches[0].x <= this.childWidth * this.text_listArr[0].length && event.touches[0].y > 0 && event.touches[0].y < this.childWidth * this.text_listArr.length) { 
      return true; 
    } 
    return false 
  } 
  
  getChildText(event: TouchEvent): string { 
    return this.text_listArr[Math.floor(event.touches[0].y / this.childWidth)][Math.floor(event.touches[0].x / this.childWidth)] 
  } 
  
  build() { 
    Column() { 
      // 
      Column() { 
        Row() { 
        }.height('10%') 
  
        Column() { 
          //ABCDE Text组件行,采用gesture()事件方法 滑动 
          Row() { 
            ForEach(this.text_listArr[0], (value: string, idx: number) => { 
              Text(value) 
                .width(this.childWidth) 
                .height(this.childHeight) 
                .fontSize(20) 
                .backgroundColor(this.color_list1[Math.floor(8 * Math.random())]) 
                .textAlign(TextAlign.Center) 
            }) 
          } 
  
          Row() { 
            ForEach(this.text_listArr[1], (value: string, idx: number) => { 
              Text(value) 
                .width(this.childWidth) 
                .height(this.childHeight) 
                .fontSize(20) 
                .backgroundColor(this.color_list1[Math.floor(8 * Math.random())]) 
                .textAlign(TextAlign.Center) 
            }) 
          } 
  
          Row() { 
            ForEach(this.text_listArr[2], (value: string, idx: number) => { 
              Text(value) 
                .width(this.childWidth) 
                .height(this.childHeight) 
                .fontSize(20) 
                .backgroundColor(this.color_list1[Math.floor(8 * Math.random())]) 
                .textAlign(TextAlign.Center) 
            }) 
          } 
  
          Row() { 
            ForEach(this.text_listArr[3], (value: string, idx: number) => { 
              Text(value) 
                .width(this.childWidth) 
                .height(this.childHeight) 
                .fontSize(20) 
                .backgroundColor(this.color_list1[Math.floor(8 * Math.random())]) 
                .textAlign(TextAlign.Center) 
            }) 
          } 
  
          Row() { 
            ForEach(this.text_listArr[4], (value: string, idx: number) => { 
              Text(value) 
                .width(this.childWidth) 
                .height(this.childHeight) 
                .fontSize(20) 
                .backgroundColor(this.color_list1[Math.floor(8 * Math.random())]) 
                .textAlign(TextAlign.Center) 
            }) 
          } 
        } 
        .height(this.childHeight * this.text_listArr.length) 
        .width(this.childWidth * this.text_listArr[0].length) 
        .onTouch((event: TouchEvent) => { 
          if (event.type === TouchType.Down) { 
            if (this.isOnTouchInParent(event)) { 
              this.displayMsg = '#<' 
              this.textTemp = this.getChildText(event) 
              this.displayMsg = this.displayMsg + this.textTemp 
            } 
          } 
          if (event.type === TouchType.Up) { 
            if (this.isOnTouchInParent(event)) { 
              this.displayMsg = this.displayMsg + '>' 
              this.textTemp = '' 
            } 
  
          } 
          if (event.type === TouchType.Move) { 
            if (this.isOnTouchInParent(event)) { 
              if (this.textTemp === this.getChildText(event)) { 
  
              } else { 
                this.textTemp = this.getChildText(event) 
                this.displayMsg = this.displayMsg + this.textTemp 
              } 
  
            } 
          } 
        }) 
      }.height('70%') 
  
      // 
      Column() { 
        //输出显示区域 
        Row() { 
          Text(this.displayMsg).width('100%').height(200).backgroundColor(Color.Gray).fontSize(30) 
        }.align(Alignment.Start).height('20%') 
  
      }.height('30%') 
  
    } 
  } 
}

实现效果

适配的版本信息

  • IDE:DevEco Studio 4.0.3.600
  • SDK:HarmoneyOS 4.0.10.11
分享
微博
QQ
微信
回复
2024-05-27 19:54:33
相关问题
鸿蒙 | Text 内容显示问题
10127浏览 • 5回复 待解决
Image如何在多态下显示不同图片?
440浏览 • 1回复 待解决
webview 如何显示纯文本html内容
1893浏览 • 1回复 待解决
HarmonyOS 有无对应长按事件
310浏览 • 1回复 待解决
预览器上WEB组件无法显示HTML内容
2423浏览 • 1回复 待解决