【问题描述】

• 实现二个直角梯形按钮
• 两梯形的斜边，对接再一起，组成一个矩形
• 斜边附近的区域能点击

【原型图】

【方案】

• canvas——斜边附近的区域无法点击
• Shape——斜边附近的区域无法点击
• clipShape——完美解决

【代码】

@Entry
@Component
struct ClipShape {
  @State btnIndex: number = 0

  aboutToAppear(): void {
    W = (display.getDefaultDisplaySync().width + X) / 2
    cmdLeft = `M0 0 L${W} 0 L${W - X} ${H} L0 ${H} Z`
    cmdRight = `M${X} 0 L${W} 0 L${W} ${H} L0 ${H} Z`
  }

  @Styles
  columStyles() {
    .width(`${W}px`)
    .height(`${H}px`)
  }

  build() {
    Column({ space: 15 }) {
      Row() {
        ForEach(btnList, (item: IBtnItem, index: number) => {
          Column() {
            Text(item.title)
            Text(item.subtitle)
          }
          .columStyles()
          .columnExtend(index == 0 ? cmdLeft : cmdRight, this.btnIndex === index ? 'red' : 'gray', `-${index * X}px`)
          .onClick(() => {
            this.btnIndex = index
          })
        })
      }
    }
    .width('100%')
    .margin({ top: 50 })
  }
}

@Extend(Column)
function columnExtend(commands: string, bg: string, x: string) {
  .clipShape(new PathShape().commands(commands))
  .backgroundColor(bg)
  .translate({ x })
  .justifyContent(FlexAlign.Center)
}

【效果图】