【每日学点鸿蒙知识】输入框光标显示问题、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>