【每日学点鸿蒙知识】输入框光标显示问题、web组件回调async问题、图片加载流程监控、背景图片大小不生效问题、alert无效

1、HarmonyOS 给TextInput的padding设置成0，光标出现异常？

给TextInput的padding设置成0，光标出现异常

光标是因为有默认的圆角被截了，把圆角设置为0试下（.borderRadius(0)）

2、HarmonyOS web组件的回调中全部不支持async，导致无法在其中将异步接口同步化？

该回调中不支持await关键字，但可使用res.setResponseIsReady(true)来实现异步返回结果到web内核

3、HarmonyOS 图片加载流程监控实现？

系统的Image(’’) 组件有整个加载流程的监听api吗？比如：网络加载耗时、url转换（比如域名转换、裁切参数拼接等）、是否来源于磁盘、图片格式、解码耗时等等

网络图片看下ImageKnife这个三方库：https://gitee.com/openharmony-tpc/ImageKnife

专门为OpenHarmony打造的一款图像加载缓存库，致力于更高效、更轻便、更简单。参考开源库 Glide 进行OpenHarmony的自研版本：

支持自定义内存缓存策略，支持设置内存缓存的大小(默认LRU策略)。
支持磁盘二级缓存，对于下载图片会保存一份至磁盘当中。
支持自定义实现图片获取/网络下载
支持监听网络下载回调进度
继承Image的能力，支持option传入border，设置边框，圆角
继承Image的能力，支持option传入objectFit设置图片缩放，包括objectFit为auto时根据图片自适应高度
支持通过设置transform缩放图片
并发请求数量，支持请求排队队列的优先级
支持生命周期已销毁的图片，不再发起请求
自定义缓存key
自定义http网络请求头
支持writeCacheStrategy控制缓存的存入策略(只存入内存或文件缓存)
支持preLoadCache预加载图片
支持onlyRetrieveFromCache仅用缓存加载
支持使用一个或多个图片变换，如模糊，高亮等

4、HarmonyOS backgroundImageSize(ImageSize.Cover)属性设置不生效？

可以使用Stack组件进行实现，示例如下

@Entry
@Component
struct SafeAreaExample1 {build() {Stack() {Image($r('app.media.appbg')).height('100%').width('100%').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) // 图片组件的绘制区域扩展至状态栏和导航条。Column() {Button() {Text("登 陆").fontColor(Color.White)}.backgroundColor("#3866e9").type(ButtonType.Normal).width("100%").height("45").borderRadius(8).onClick(() => {})}.margin({ left: 30, right: 30, top: 20 })}.height('100%').width('100%')}
}

参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section162965215413
设置背景图、视频控件大小为安全区域大小并配置expandSafeArea属性。

// xxx.ets
@Entry
@Component
struct SafeAreaExample1 {build() {Stack() {Image($r('app.media.bg')).height('100%').width('100%').expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) // 图片组件的绘制区域扩展至状态栏和导航条。}.height('100%').width('100%')}
}

5、HarmonyOS Web组件无法弹出网页的alert弹框？

使用Web组件，网页中alert(“123”)弹框点击没反应，请问如何解决

alert在webview组件中被屏蔽了，可以使用弹窗实现，可参考以下代码实现：

// xxx.ets  应用侧代码
import web_webview from '@ohos.web.webview'@Entry
@Component
struct WebComponent {controller: web_webview.WebviewController = new web_webview.WebviewController()build() {Column() {Web({ src: $rawfile("index.html"), controller: this.controller }).onAlert((event) => {if (event) {console.log("event.url:" + event.url)console.log("event.message:" + event.message)AlertDialog.show({title: 'onAlert',message: 'text',primaryButton: {value: 'cancel',action: () => {event.result.handleCancel()}},secondaryButton: {value: 'ok',action: () => {event.result.handleConfirm()}},cancel: () => {event.result.handleCancel()}})}return true})}}
}
//html代码
<!--index.html-->
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
<h1>WebView onAlert Demo</h1>
<button onclick="myFunction()">Click here</button>
<script>function myFunction() {alert("Hello World");}
</script>
</body>
</html>