前言

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

布局思路

我们选择用两个循环，分别布局白键的row和黑键的row

键盘组件类

我把键盘布局作为一个component，声明了这些成员。

@Prop currentChord: number[] // 当前的和弦类型
@State private currentKey: number = -1 // 当前的按键（根音）

// 白键黑键的尺寸
private WHITE_KEY_WIDTH = 7
private WHITE_KEY_HEIGHT = 100;
private BLACK_KEY_WIDTH = 3.5;
private BLACK_KEY_HEIGHT = 63;

private SELECTED_KEY_COLOR = "#FFC0CB" // 已选择的按键颜色
private CHORD_KEY_COLOR = "#FFFF00" // 和弦中其他按键的颜色

这里是一些用于判断的方法

private isSelected(index: number): boolean { // 判断当前按键是否被选中（是否为根音）
  return this.currentKey === index
}

private isChord(index: number): boolean { // 当前是否为和弦中的按键
  if (this.currentKey === -1) {
    return false
  }
  const currentKey_ = this.currentKey % 12
  return this.currentChord.includes(index - currentKey_)
}

private isFakeBlack(index: number): boolean { // 是否为透明的黑键
  return (index + 1) % 14 === 6 || (index + 1) % 14 === 0
}

这里的isFakeBlack()方法需要特别说明一下。因为黑键的循环布局比较特殊。如果mi fa和si do之间也有黑键，那布局起来就非常有规律了。白键用一个循环，黑键用一个循环，每个按键之间间隔相同的距离。但事实却是，mi fa和si do之间没有黑键。所以，这里在布局的时候实际上还是按照有黑键的情形来布局的，再把mi fa和si do之间的黑键做成透明的。所以这两个透明的按键我称为fake black。

但这会带来一个问题，就是如果我点击的范围，正好落在fake black布局中，就会响应到一个透明按钮上。但实际上我想要的是下方的白色按键触发响应。这种情况需要设置控件的hitTestBehavior属性。

如果是正常显示的黑键，设置为HitTestMode.Default。

如果是fake black，需要响应下方的白键的正常触摸，所以要把这个fake black按键的触摸做穿透。参考官方文档，HitTestMode.None行为是：自身不响应触摸测试，不会阻塞子节点和兄弟节点的触摸测试。

所以fake black布局范围内不响应触摸了，当点击fake black范围内时，他的父布局row会响应触摸。但这样还是没法让布局下方的白色按键响应到。所以对他的父布局row也要设置hitTestBehavior为HitTestMode.None。

这样就能在点击fake black布局范围内时，让下方的白色按键响应到触摸事件。

下集预告

下一篇我们将开始绘制键盘，敬请期待。