HarmonyOS 鸿蒙Next 如何将 tab 工具条遮罩住？

蒙层显示时改变tab栏的背景以及透明度

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
  [@State](/user/State) visible: boolean = false
  [@Builder](/user/Builder) tabBuilder() {
    Column(){
      Text("首页")
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Tabs({barPosition: BarPosition.End}) {
          TabContent() {
            Row() {
              Column() {
                Button("选择组织").onClick(() => {
                  this.visible = !this.visible;
                })
              }
              .height('100%')
              .width('100%')
              .justifyContent(FlexAlign.Start)
            }.height('100%')
          }.tabBar(this.tabBuilder())
        }
        CXWDropdownListView({visible: this.visible}).visibility(this.visible ? Visibility.Visible : Visibility.Hidden)
      }
    }
  }
}
export class CXWEnterpriseInfo {
  identifier: string;
  name: string;
  constructor(identifier: string, name: string) {
    this.identifier = identifier;
    this.name = name;
  }
}
[@Component](/user/Component)
struct CXWDropdownListView {
  [@Link](/user/Link) visible: boolean;
  private showMaxCount = 6;
  private itemHeight = 60;
  private dataSource = [new CXWEnterpriseInfo("1", "组织1"), new CXWEnterpriseInfo("2", "组织2"),
    new CXWEnterpriseInfo("3", "组织3"), new CXWEnterpriseInfo("4", "组织4"),]
  build() {
    Column() {
      List() {
        ForEach(this.dataSource, (info: CXWEnterpriseInfo, index: number) => {
          ListItem() {
            CXWDropdownEnterpriseItem({name: info.name, selected: index == 1})
              .onClick(() => {
                this.hiddenDropdownListView();
              })
          }
        })
      }
      .height(this.dataSource.length > this.showMaxCount ? this.showMaxCount * this.itemHeight : this.dataSource.length * this.itemHeight)
      .backgroundColor(Color.White)
      Blank()
        .width('100%')
        .flexGrow(1)
        .backgroundColor(Color.Black)
        .opacity(0.4)
        .onClick(() => {
          this.hiddenDropdownListView();
        })
    }
    .width('100%')
    .height('100%')
  }
  hiddenDropdownListView() {
    this.visible = !this.visible;
  }
}
[@Component](/user/Component)
struct CXWDropdownEnterpriseItem {
  [@State](/user/State) selected: boolean = false;
  name: string = "";
  build() {
    Row() {
      Image('')
        .size({width: 16, height: 16})
        .margin({left: 16})
        .backgroundColor(Color.Black)
      Text(this.name)
        .fontSize(16)
        .backgroundColor(Color.Gray)
        .padding({left: 8})
        .flexGrow(1)
      Image('')
        .size({width: 16, height: 16})
        .margin({right: 16})
        .backgroundColor(Color.Orange)
        .visibility(this.selected ? Visibility.Visible : Visibility.Hidden)
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
    .height('60')
  }
}