【每日学点HarmonyOS Next知识】渐变效果、Web组件注册对象报错、深拷贝list、loadContent数据共享、半屏弹窗

1、HarmonyOS 有没有类似于渐变效果？

实现渐变的方式请参考以下代码：

@Entry
@Component
struct Page240126155113078 {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Row() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        }.linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x000000, 0.0], [0xffffff, 1.0]]
        }).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
      }
      .width('100%')
    }
    .height('100%')
  }
}
 
经过测试以下代码与 提供的截图效果差别不大，那边显示的效果有差异，以下是示例代码:

@Entry
@Component
struct Page240126155113078 {
  @State message: string = '文化莞';

  build() {
    Row() {
      Column() {
        Row() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        }

        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0x000000, 0.0], [0xffffff, 0.8]]
        })
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

      }
      // .backgroundColor(Color.Blue)
      .width('100%')
    }
    .height('100%')
  }
}
按照 的描述，现提供以下参考代码：
@Entry
@Component
struct ListExample {
  @State arr: string[] = ['影视', '生活', '军事','历史', '小说', '电影', '揭秘', '明星', '社会', '大爆炸','好看','精选']
  private scroller: Scroller = new Scroller();

  build() {
    Stack() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text(item)
              .width(50)
              .height(64)
              .fontColor(Color.Black)
              .backgroundColor(Color.White)
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item);
      }
      .listDirection(Axis.Horizontal)
      .scrollBar(BarState.Off)
      .padding({ top: 20, bottom: 20 })
      .width("80%")
      .height("100%")

      Stack() {

      }
      .linearGradient({
        angle: 90,
        colors: [ ['rgba(255,255,255,0)', 0.9], [0xffffff, 1.0]]
      })
      .width("80%")
      .height("100%")
      .hitTestBehavior(HitTestMode.None)
    }.height(100).width('100%').backgroundColor(Color.White)
  }
}

2、HarmonyOS Web组件注册对象时,对象声明报ArkTS-no-untyped-obj-literals？

ArkTS-no-untyped-obj-literals的错误可以参考：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/arkts-more-cases.md#arkts-no-untyped-obj-literals

从SDK中导入类型，标注object literal类型

应用代码

const area = {
  pixels: new ArrayBuffer(8),
  offset: 0,
  stride: 8,
  region: { size: { height: 1,width:2 }, x: 0, y: 0 }
}

建议改法

import { image } from '@kit.ImageKit';

const area: image.PositionArea = {
  pixels: new ArrayBuffer(8),
  offset: 0,
  stride: 8,
  region: { size: { height: 1, width: 2 }, x: 0, y: 0 }
}

3、HarmonyOS 深拷贝关于list类型如何处理？

目前ArkTS不支持any类型，没办法在ets中写深拷贝逻辑，但是在ts文件中写深拷贝时，list数据类型又不支持，如何处理

参考：

function deepCopy(obj: ESObject): ESObject {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }

  let copy: ESObject;
  if (Array.isArray(obj)) {
    copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    copy = {};
    for (let i = 0; i < obj.length(); i++) {
      let key:ESObject=obj[i];
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }
  return copy;
}
let arr1:Array<number> = new Array<number>(1, 2, 3);
let arr2:Array<number> = deepCopy(arr1);
arr2[2] = 4;

console.log('arr1: '+String(arr1));
console.log('arr2: '+String(arr2));

4、HarmonyOS entryAbility如何和他的loadContent的Page进行数据的共享呢？

可以尝试使用LocalStorage来解决问题。LocalStorage loadcontent文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#loadcontent9

loadContent(path: string, storage: LocalStorage, callback: AsyncCallback<void>): void

根据当前工程中某个页面的路径为窗口加载具体页面内容，通过LocalStorage传递状态属性给加载的页面，使用callback异步回调。
参数：

5、HarmonyOS CustomDialogController如何弹出半屏弹窗？

CustomDialogController如何弹出半屏弹窗使得弹窗内容未覆盖的区域仍然可以响应用户操作。

1. 可以设置 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
2. 可以将弹窗组件的蒙层属性isModal设为false，自定义蒙层并通过Visibility控制显隐，使用hitTestBehavior(HitTestMode.None)可以实现自身不响应触摸测试。

样例demo

@CustomDialog
struct MyDialog {
  // 显隐控制设置为不占用
  @Link visible: Visibility
  controller1: CustomDialogController
  build() {
    Row() {
      Column({ space: 10 }) {
        Text('自定义弹窗').fontSize(25).fontColor(Color.Blue)
        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          Button('取消').onClick(() => {
            this.controller1.close()
            this.visible=Visibility.None
          }).backgroundColor(0xffffff).fontColor(Color.Black)
          Button('确认').onClick(() => {
            this.controller1.close()
            this.visible=Visibility.None
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        }.width("100%")
      }.width("100%")
    }.height(100)
  }
}
@Entry
@Component
struct Index {
  @State visible: Visibility = Visibility.None
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: MyDialog({
      visible: this.visible
    }), offset: {dx: 0, dy: 0},
    // 是否允许点击遮障层退出
    autoCancel: false,
    //设置窗口无蒙层
    isModal:false,
  })
  build() {
    Column({ space: 10 }) {
      Button('打开弹窗').onClick(() => {
        this.dialogController1.open()
        this.visible=Visibility.Visible
      })
      List(){
        ForEach(this.arr,(item:number)=>{
          ListItem(){Row(){Text('文本')}.justifyContent(FlexAlign.Center).width('100%').backgroundColor(0xFFFFFF).height(100)}
        })
      }.divider({strokeWidth:2,color:'#F1F3F5'}).height('90%')
      Column().width('100%').height('100%').position({x:0, y:0}).zIndex(10).backgroundColor(0x33000000).visibility(this.visible).hitTestBehavior(HitTestMode.None)
    }.width("100%")
  }
}