前言

人，不但要有科学技术，而且还要，文化，艺术，跟音乐。 ————钱学森

绘制键盘

根据之前设计的布局思路，根布局为stack，白键的row布局在下，黑键的row布局在上。两个row布局里面各有一个循环，把subKeys遍历一遍。之后解释subKeys的实现，现在可以简单的理解为每个按键的遍历。更多的细节请看代码中的注释。

build() {
  Stack() {
    Row() {
      ForEach(this.subKeys(true), (item: Key, i) => { // 白键的遍历
        Button()
          .width(this.WHITE_KEY_WIDTH + "%") // 设置按键的宽
          .height(this.WHITE_KEY_HEIGHT + "%") // 设置按键的高
          .backgroundColor( // 设置按键颜色
            item.isSelected ? this.SELECTED_KEY_COLOR : // 如果是选中的按键，用SELECTED_KEY_COLOR
            (item.isChord ? this.CHORD_KEY_COLOR : "white") // 其他的按键不是选中的按键，会有两种情况。如果是和弦中的键，用CHORD_KEY_COLOR，如果不是，那就是普通的白色按键，用白色填充。
          )
          .borderWidth(1)
          .borderColor("black")
          .type(ButtonType.Normal)
          .stateEffect(false)
          .onClick(() => {
            this.currentKey = item.id // 点击之后，把currentKey成员赋值为当前按键的id
            console.log("click white")
          })
      })
    }
    .width("100%")
    .justifyContent(FlexAlign.Center)

    Row() {
      ForEach(this.subKeys(false), (item: Key, i) => { // 黑键的遍历
        Button()
          .width(this.BLACK_KEY_WIDTH + "%")
          .height(this.BLACK_KEY_HEIGHT + "%")
          .backgroundColor( // 这里设置背景颜色比较复杂，因为涉及倒fake black的判断
            item.keyType === KeyType.fakeBlack ? Color.Transparent : // 首先判断是否为fake black，如果是，就显示透明色。
            (item.isSelected ? this.SELECTED_KEY_COLOR : // 如果不是，就类似白键的判断。
              (item.isChord ? this.CHORD_KEY_COLOR : "black")) // 非选中或者和弦按键就填充为黑色。
          )
          .type(ButtonType.Normal)
          .stateEffect(false)
          .onClick(() => {
            this.currentKey = item.id
            console.log("click black")

          })
          .hitTestBehavior(item.keyType === KeyType.black ? HitTestMode.Default : HitTestMode.None) // 见下文解释
      })
    }
    .width("94.5%")
    .justifyContent(FlexAlign.SpaceEvenly)
    .hitTestBehavior(HitTestMode.None) // 见下文解释
  }
  .alignContent(Alignment.Top)
}

export enum KeyType {
  white,
  black,
  fakeBlack
}