鸿蒙harmony两个按钮切换效果

import prompt from '@ohos.prompt';
@Entry
@Component
struct SplitButton {
  @State leftClicked: boolean = false;
  @State rightClicked: boolean = false;

  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Button('Left',{ type: ButtonType.Normal, stateEffect: false })
        .width(100)
        .height(50)
        .backgroundColor(this.leftClicked? '#ffe9bcab' : '#ffc0cc')
        .borderRadius({ topLeft: 25, bottomLeft: 25 })
        .onClick(() => {
          this.leftClicked = true;
          this.rightClicked = false;
          prompt.showToast({ message: 'Left button clicked!' });
        })
        .fontSize(16)
        .fontColor('#FFFFFF')

      Button('Right',{ type: ButtonType.Normal, stateEffect: false })
        .width(100)
        .height(50)
        .backgroundColor(this.rightClicked? '#ffeac1b1' : '#ffc0cc')
        .borderRadius({ topRight: 25, bottomRight: 25 })
        .onClick(() => {
          this.rightClicked = true;
          this.leftClicked = false;
          prompt.showToast({ message: 'Right button clicked!' });
        })
        .fontSize(16)
        .fontColor('#FFFFFF')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F0F0F0')
  }
}

效果图