HarmonyOS overlay是控制图片的填充方式，如何设置颜色遮罩？

Question

如题：HarmonyOS overlay是控制图片的填充方式，如何设置颜色遮罩？

Answer 1

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-overlay-V5\#overlay

CustomBuilder遮罩文本内容或自定义组件构造函数。自定义组件作为浮层时，不支持键盘走焦到自定义组件中。

参考demo：

@Entry 
@Component 
struct List_Mask { 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
        ForEach(this.arr, (item: number) => { 
          ListItem() { 
            MyListItem_Mask({ item }) 
          } 
        }, (item: string) => item) 
      } 
      .listDirection(Axis.Vertical) // 排列方向 
      .scrollBar(BarState.Off) 
      .friction(0.6) 
      .divider({ 
        strokeWidth: 2, 
        color: 0xFFFFFF, 
        startMargin: 20, 
        endMargin: 20 
      }) // 每行之间的分界线 
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring 
      .width('90%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 5 }) 
  } 
} 
@Component 
struct MyListItem_Mask { 
  @State isMask: boolean = false 
  @Prop item: number 
  @Builder  overBuilder() { 
    Row() { 
    } 
    .backgroundColor("#50000000") 
  } 
  build() { 
    Stack() { 
      Image($r('app.media.mid')) 
        .draggable(false) 
        .overlay(this.overBuilder())  
        .objectFit(ImageFit.Contain) 
    } 
    .height(100) 
    .width('100%') 
    .borderRadius(10) 
    .backgroundColor(0xFFFFFF) 
  } 
}

overlay里面可以放一个builder修饰的自定义构建函数来实现颜色遮罩。