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

@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%')  
    }  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.