当前位置：首页 > article >正文

【每日学点鸿蒙知识】Column包含list、缩放动画后实际大小、touchstart事件、Web reload、Json报错

article 2025/3/1 3:30:05

1、HarmonyOS Column布局包含list？

column布局中有普通布局，同时包含list时，最后一个list的最后元素无法完全显示，如何解决

最有可能的原因是非flex的线性布局容器给子组件布局时，子组件获得的布局约束会受如layoutWeight或flexShrink、flexGrow的影响。其他组件和list组件的布局约束相同，list使用maxHeight获得真实高度（等于column的高度），再加上其他组件的高度占位，使list中的最后一部分item无法完整显示在屏幕内，list上设置layoutWeight后，column会为list指定大小为剩余空间大小，所以list就能完整显示，

示例代码如下：如若list不设置 .layoutWeight(100),则list的最后一个item就不能完整显示

@Entry
@Component
struct Index {
  @State strList : Array<String> = ['Hello World','init','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17']
  build() {
    Column() {
      Text("111111")
        .fontSize(100)
      List() {
        ForEach(this.strList, (item: string,index: number) => {
          ListItem(){
            Text(item)
              .fontSize(100)
          }
        })
      }
      .layoutWeight(300)
    }
    .width('100%')
    .height('100%')
  }
}

2、HarmonyOS 对组件进行scale和translate之后，ComponentInfo返回的值跟inspector对不上，请问有办法获取组件缩放后的实际大小的接口吗？

组件调用区域变化回调onAreaChange函数然后读取Area类型数据即可，示例如下：(先定义组件宽高变量cw,ch)

.onAreaChange((oldValue: Area, newValue: Area) => {
  this.cw = new Number(newValue.width).valueOf()
  this.ch = new Number(newValue.height).valueOf()
})

3、HarmonyOS 页面在webview打开之后，touchstart事件没反应？

touchstart事件与click事件冲突，在对已完成的PC站点进行移动端适配时，我们想要站点在移动设备上有更快的响应速度，以带给用户更好的体验，此时，我们应该使用移动设备专用的事件系统，例如，使用 touchstart 事件代替 click 事件。

移动设备上的浏览器将会在 click 事件触发时延迟 300ms ，以确保这是一个“单击”事件而非“双击”事件。

而对于 touchstart 事件而言，则会在用户手指触碰屏幕的一瞬间触发所绑定的事件。所以，使用 touchstart 替换 click 事件的意义在于，帮助用户在每次点击时节省 300ms 的时间。在页面频繁需要点击，或者点击发生在动画中，对动画流畅度有较高要求的情境下，使用这种技术是非常必要的。

但是，让我们回到我们的初始场景，在 PC端站点适配移动端时我们不能简单的进行 touchstart 和 click 事件的替换，因为PC并不能识别 touchstart 事件。

我们可以给某个元素同时绑定 touchstart 和 click 事件，但这将会导致本篇文章解决的问题 – 这两个事件在移动设备上会发生冲突。

由于移动设备能够同时识别 touchstart 和 click 事件，因此当用户点击目标元素时，绑定在目标元素上的 touchstart 事件与 click 事件（约300ms后）会依次被触发，也就是说，我们所绑定的回调函数会被执行两次！。这显然不是我们想要的结果。

针对这样的情境，有以下两种解决方案：

使用 preventDefault
第一种解决方案是使用事件对象中的 preventDefault 方法，可见， preventDefault 方法的作用在于：阻止元素默认事件行为的发生，但有意思的是，当我们在目标元素同时绑定 touchstart 和 click 事件时，在 touchstart 事件回调函数中使用该方法，可以阻止后续 click 事件的发生。

这从道理上是讲不通的，毕竟，我们添加的 click 事件并不是元素的“默认事件”，但它确实奏效了，或者说，被浏览器实现了，因此我们可以使用该方法解决移动设备上 touchstart 事件与 click 事件的冲突问题，具体代码如下：

const Button = document.getElementById("targetButton")

Button.addEventListener("touchstart", e => {
    e.preventDefault()
    console.log("touchstart event!")
})

Button.addEventListener("click", e => {
    e.preventDefault()
    console.log("click event!")
})

当你在浏览器上模拟移动设备后点击目标元素，只会在控制台看到 touchstart event! 字段，很显然，click 事件被成功阻止了。

基于功能检测绑定事件
我们可以通过判断浏览器是否支持 touchstart 事件来封装元素的点击事件，这样客户端会根据当前环境判定元素应该绑定的事件类型，代码如下：

const Button = document.getElementById("targetButton")

const clickEvent = (function() {
  if ('ontouchstart' in document.documentElement === true)
    return 'touchstart';
  else
    return 'click';
})();

Button.addEventListener(clickEvent, e => {
  console.log("things happened!")
})

4、HarmonyOS 如果页面栈有webview页面，想针对栈内某个webview执行reload操作，怎么获取到这个webview实例执行reload操作呢？

请参考【动态创建Web组件】：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-page-loading-with-web-components-V5

5、JSON数组转成字符串后保存到preferences一直报错：Parameter error. The type of ‘value’ must be ValueType。

上述问题可能是字符串长度过长导致的，Value的最大长度限制为8192个字节。一般preferences这种持久化数据保存建议保存少量数据；可以尝试使用关系型数据库存储大量数据：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-data-preferences-V5

查看全文

http://www.kler.cn/a/457974.html