> 技术文档 > 【每日学点HarmonyOS Next知识】控件边缘模糊渐隐、对话框被键盘挤压、图片组件属性问题、像素转缓存、操作子组件_harmonyos scroll底部边缘渐隐

【每日学点HarmonyOS Next知识】控件边缘模糊渐隐、对话框被键盘挤压、图片组件属性问题、像素转缓存、操作子组件_harmonyos scroll底部边缘渐隐


1、HarmonyOS 如何实现控件边缘模糊渐隐效果

目前List、Scroll等列表没有边缘渐隐效果。而类似porterduff算法的图层叠加,利用canvas画两个图层,利用destination-in加第二层渐变,可以让第一层达到渐隐效果,但好像canvas只能自己另外画内容,而不能把控件显示的内容作为画布的一层,再叠加第二层?

参考代码:

@Entry@Componentstruct page240527110725022 { private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] @Builder overlayBuilder() { Stack() .height(\"100%\") .width(\"100%\") .linearGradient({ direction: GradientDirection.Bottom, // 渐变方向 colors: [[\"#00FFFFFF\", 0.0], [\"#FFFFFFFF\", 0.3]] // 数组末尾元素占比小于1时满足重复着色效果 }) .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) .hitTestBehavior(HitTestMode.None) } build() { Column() { List({ space: 20, initialIndex: 0 }) { ForEach(this.arr, (item: number) => { ListItem() { Text(\'\' + item)  .width(\'100%\')  .height(100)  .fontSize(16)  .textAlign(TextAlign.Center)  .borderRadius(10)  .backgroundColor(0xFFFFFF) } .onClick(() => { console.log(\'is click\') }) }, (item: string) => item) }.width(\'90%\') .scrollBar(BarState.Off) .overlay(this.overlayBuilder()) .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) }.width(\'100%\').height(\'100%\').backgroundColor(0xDCDCDC).padding({ top: 5 }) }}
2、HarmonyOS 在自定义dialog中输入框被键盘顶上去?

在自定义dialog中输入框被键盘顶上去,如何让组件不被键盘顶上去

自定义弹窗仅适用于简单提示场景,不能替代页面使用。由于弹窗存在完全避让输入法行为,即在软键盘弹出时,会自动向上抬起软键盘高度,因此如果弹窗高度过大时,可能会导致部分区域不可见。这是当前的规格 建议使用模态框实现。参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5

这个问题属于一个规格问题,弹窗存在完全避让输入法行为 建议这种场景不使用弹窗或者使用规避方案:应用监听输入法弹出事件,判断显示不下时,添加Scroll滚动。

3、HarmonyOS Image组件 - src 为AnimatedDrawableDescriptor时mode 不能生效?

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-image-V5#rendermode

renderMode(value: ImageRenderMode)

设置图片的渲染模式。svg类型图源不支持该属性
设置 ColorFilter 时,该属性设置不生效。
当组件的参数类型为AnimatedDrawableDescriptor时设置该属性不生效。

4、HarmonyOS pixelMap转成ArrayBuffer?

下面2个方法的输入都是pixelMap,最后都输出ArrayBuffer,但是输出的arraybuffer好像不一样。想问一下这两个有什么不同?使用场景分别是什么?

const readBuffer = new ArrayBuffer(pixelBytesNumber);pixelMap.readPixelsToBuffer(readBuffer).then(() => { console.info(\'Succeeded in reading image pixel data.\');}).catch((error : BusinessError) => { console.error(\'Failed to read image pixel data. And the error is: \' + error);})import {BusinessError} from \'@ohos.base\'imagePackerApi.packing(imageSource, packOpts).then( (data : ArrayBuffer) => {}).catch((error : BusinessError) => { console.error(\'Failed to pack the image. And the error is: \' + error);})

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5
@ohos.multimedia.image (图片处理)提供图片处理效果,包括通过属性创建PixelMap、读取图像像素数据、读取区域内的图片数据等。

1、在HarmonyOS上图片的数据是用PixelMap类存储,可以把ArrayBuffer转换为PixelMap,设置到image
2、提供图片处理效果,包括通过属性创建PixelMap、读取图像像素数据、读取区域内的图片数据等。ImagePacker图片打包器类,用于图片压缩和打包。在调用ImagePacker的方法前,需要先通过createImagePacker构建一个ImagePacker实例调用socket.sppWrite 给蓝牙打印机发送需要打印的图片数据可以使用readPixelsToBuffer

5、HarmonyOS 如何操作子组件?

如何通过代码得到某个组件的子组件实例数组

父组件可以通过@Prop装饰器或者@Link装饰器实现父子组件中变量的同步关系

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-management-V5
getInspectorByKey方法可以获得获取指定id的组件的所有属性,不包括子组件信息。参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-component-id-V5#getinspectorbykey9

getInspectorByKey(id: string): string
获取指定id的组件的所有属性,不包括子组件信息。
此接口仅用于对应用的测试。由于耗时长,不建议使用。