【每日学点鸿蒙知识】Hap 安装失败、ArkTS 与C++ 数组转换、渐变遮罩效果等
1、在启动调试或运行应用/服务时，安装HAP出现错误，提示“error: install failed due to older sdk version in the device”错误信息。
这是由于编译打包所使用的SDK版本与设备镜像版本不匹配。不匹配的场景包括：
场景一：设备上的镜像版本低于编译打包的SDK版本，请更新设备镜像版本。查询设备镜像版本命令：
hdc shell param get const.ohos.apiversion
如果镜像提供的api版本为10，且应用编译所使用的SDK版本也为10，仍出现该报错，可能是由于镜像版本较低，未兼容新版本SDK校验规则，请将镜像版本更新为最新版本。
场景二：对于需要运行在OpenHarmony设备上的应用，请确认runtimeOS已改为OpenHarmony。
2、在启动调试或运行应用/服务时，安装HAP出现错误，提示“error: install sign info inconsistent”错误信息。
这由于设备上已安装的应用与新安装的应用中签名不一致。如果在Edit Configurations中勾选了“Keep Application Data”（不卸载应用，覆盖安装），并且重新进行了签名，将导致该报错。
卸载设备上已安装的应用，或取消勾选“Keep Application Data”后，重新安装新的应用。
3、如何实现RichEditor和Component成为一个整体？
RichEditor上面有个Component，现在希望RichEditor和Component成为一个整体，能够自适应光标位置进行滚动，应该如何实现，目前用Scroller无法获取RichEditor中光标的具体坐标（光标基于RichEditor的x和y位置），无法实现滚动。
可以用Scroll将RichEditor和Component包裹，通过onAreaChange的回调，调用scroller.scrollBy的能力，以此来改变滚动组件的高度。
可以参考代码：
@Entry
@Component
struct Index {
editorController = new RichEditorController()
scroller: Scroller = new Scroller()
build() {
Column() {
Scroll(this.scroller) {
Column() {
Image($r('app.media.startIcon'))
.width('100%')
.height(200)
.margin({ bottom: 20 })
RichEditor({ controller: this.editorController })
.id('RichEditor')
.width('100%')
.backgroundColor(Color.Yellow)
.onReady(() => {
this.editorController.addImageSpan($r("app.media.startIcon"),
{
imageStyle:
{
size: ["100px", "100px"]
}
})
this.editorController.addTextSpan('男生女生向前冲',
{
style:
{
fontColor: Color.Blue,
fontSize: 30
}
})
})
.onAreaChange((_, value) => {
if (_.height !== value.height) {
this.scroller.scrollBy(0, Number(value.height) - 200)
}
})
Button('getSpans-文字').onClick((event: ClickEvent) => {
let getSpans = this.editorController.getSpans({ start: 0 })
// 必须进行强转才能获取文字信息或者图片信息
let span0 = getSpans[0] as RichEditorTextSpanResult
})
Button('getSpans-图片').onClick((event: ClickEvent) => {
let getSpans = this.editorController.getSpans({ start: 0 })
let span1 = getSpans[1] as RichEditorImageSpanResult
})
Button('RichEditor获焦').onClick(() => {
focusControl.requestFocus('RichEditor')
})
}
}
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
}
}
}
4、如何实现ArkTS与C/C++的数组转换？
TS2NAPI
TS侧代码：
Button("TS2NAPI")
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
let napiArray: Int32Array = new Int32Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
console.info("TS2NAPI: JS " + napiArray)
testNapi.TS2NAPI(napiArray)
})
NAPI侧代码：
// TS array 传到NAPI层
static napi_value TS2NAPI(napi_env env, napi_callback_info info) {
// 获取TS层传来的参数
size_t argc = 1;
napi_value args;
napi_get_cb_info(env, info, &argc, &args, NULL, NULL);
napi_value input_array = args;
// 获取传入数组typedarray生成input_buffer
napi_typedarray_type type; // 数据类型
napi_value input_buffer;
size_t byte_offset; // 数据偏移
size_t i, length; // 数据字节大小
napi_get_typedarray_info(env, input_array, &type, &length, NULL, &input_buffer, &byte_offset);
// 获取数组数据
void *data;
size_t byte_length;
napi_get_arraybuffer_info(env, input_buffer, &data, &byte_length);
if (type == napi_int32_array) {
int32_t *data_bytes = (int32_t *)(data);
int32_t num = length / sizeof(int32_t);
string str = "";
for (int32_t i = 0; i < num; i++) {
int32_t tmp = *((int32_t *)(data_bytes) + i);
str += (to_string(tmp) + ' ');
}
OH_LOG_INFO(LOG_APP, "TS2NAPI: C++ %{public}s", str.c_str());
}
return NULL;
}
NAPI2TS
TS侧代码：
Button("NAPI2TS")
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
let napiArray: Int32Array = testNapi.NAPI2TS()
console.info("NAPI2TS: JS " + napiArray)
})
NAPI侧代码：
// NAPI层 array 传到TS层
static napi_value NAPI2TS(napi_env env, napi_callback_info info) {
// 数据个数
int num = 10;
// 创建output_buffer
napi_value output_buffer;
void *output_ptr = NULL;
napi_create_arraybuffer(env, num * sizeof(int32_t), &output_ptr, &output_buffer);
// output_array
napi_value output_array;
napi_create_typedarray(env, napi_int32_array, num, output_buffer, 0, &output_array);
// 给output_ptr、output_buffer赋值
int32_t *output_bytes = (int32_t *)output_ptr;
for (int32_t i = 0; i < num; i++) {
output_bytes[i] = i;
}
string str = "";
for (int32_t i = 0; i < num; i++) {
int32_t tmp = *((int32_t *)(output_ptr) + i);
str += (to_string(tmp) + ' ');
}
OH_LOG_INFO(LOG_APP, "NAPI2TS: C++ %{public}s", str.c_str());
return output_array;
}
实用场景：
ArkTS侧读取rawfile的图片，传递到NAPI侧进行处理，然后传回ArkTS进行展示：
Button("Test")
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
getContext().resourceManager.getRawFileContent('test.png').then(value => {
hilog.info(0x0000, 'getRawFileContent', '%{public}s', 'OK');
const fileData: Uint8Array = value;
// 获取图片的ArrayBuffer
let buffer = fileData.buffer;
let input = new Uint8Array(buffer)
let output = testNapi.TEST(input);
let decodingOptions: image.DecodingOptions = {
editable: true,
desiredPixelFormat: 3,
}
let imageSource = image.createImageSource(output.buffer);
imageSource.createPixelMap(decodingOptions).then(map => {
this.imageSrc = map;
})
}).catch((err: BusinessError) => {
hilog.error(0x0000, 'getRawFileContent', '%{public}s', err.message);
})
})
Image(this.imageSrc)
.height(100)
.width(100)
5、如何实现顶部渐变遮罩效果？
直播间的弹幕列表顶部需要渐变遮罩效果，如何实现呢？
使用overlay通过属性linearGradient同时使用blendMode让当前浮层与下方list混合实现渐变遮罩效果。
效果图如下：
参考代码：
@Entry
@Component
struct Index {
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 })
}
}