HarmonyOS如何实现一个多时间段的自定义控件界面?

有这样的一个自定义界面需求:现需要实现一个选中时间段和反选中时间段的一个操作,手指拖动的地方被反选中,如果某个时间段被选中了,那么下次手指拖拽到这个地方或者手指点击这个时间段对应区域,界面需展示反选中。反之亦然。

HarmonyOS
2024-10-12 09:51:08
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

希望在时间段滑动的时候需要保存选中项,并修改状态,下面提供一个滑动选中demo:

@Entry  
@Component  
struct Second {  
  @State displayMsg: string = ''  
  private color_list1 = [Color.Red, Color.White, Color.Blue, Color.Gray, Color.Orange, Color.Pink, Color.Red, Color.Yellow]  
  private text_list1 = ['A', 'B', 'C', 'D', 'E']  
  private textTemp = ''  
  private childWidth: number = 60  
  private childHeight: number = 60  
  private resultList: Array<string> = []  
  isOnTouchInParent(event: TouchEvent): boolean {  
    if (event.touches[0].x > 0 && event.touches[0].x <= this.childHeight * this.text_list1.length && event.touches[0].y > 0 && event.touches[0].y < this.childWidth) {  
      return true;  
    }  
    return false  
  }  
  getChildText(event: TouchEvent): string {  
    return this.text_list1[Math.floor(event.touches[0].x / this.childWidth)]  
  }  
  build() {  
    Column() {  
      Column() {  
        Row() {  
        }.height('10%')  
  
        Row() {  
          ForEach(this.text_list1, (value: string, idx: number) => {  
            Text(value)  
              .width(this.childWidth)  
              .height(this.childHeight)  
              .fontSize(20)  
              .backgroundColor(this.displayMsg.indexOf(value) !== -1 ? Color.Red : Color.Green)  
              .textAlign(TextAlign.Center)  
          })  
        }.height(this.childHeight).width(this.childWidth * this.text_list1.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(800).height(200).backgroundColor(Color.Gray).fontSize(30)  
        }.align(Alignment.Start).height('20%')  
      }.height('30%')  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-12 17:14:09
相关问题
如何实现一个自定义询问框
431浏览 • 1回复 待解决
HarmonyOS 自定义时间控件和日期控件
336浏览 • 1回复 待解决
HarmonyOS 实现一个自定义分类列表
295浏览 • 1回复 待解决
如何实现一个自定义样式toast提示
1957浏览 • 1回复 待解决
如何在全局实现一个自定义dialog弹窗
2835浏览 • 1回复 待解决
怎样实现一个自定义播放器?
368浏览 • 1回复 待解决
实现一个自定义动画,出现丢帧问题
403浏览 • 1回复 待解决
如何快速开发出一个自定义弹窗?
383浏览 • 1回复 待解决
如何添加一个自定义代码文件夹
443浏览 • 1回复 待解决
如何封装一个自定义Dialog对话框
2234浏览 • 1回复 待解决
使用自定义函数创建一个UI组
369浏览 • 1回复 待解决