HarmonyOS 鸿蒙Next Stage模型ArkTs语言 onAreaChange监听组件区域变化时页面闪烁 有解决办法吗

HarmonyOS 鸿蒙Next Stage模型ArkTs语言 onAreaChange监听组件区域变化时页面闪烁 有解决办法吗 问题: 点击下方的输入框时,弹出键盘,页面会闪烁一下,在关闭键盘的时候,也会闪烁一下(更严重)

发现问题是和onAreaChange这个方法有关,请各位看看这个有什么解决办法吗,代码如下:

import display from '@ohos.display';

@Entry
@Component
struct AppLic {
  @State topY: number = 0;
  private arrayFood: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'g', 'k', 'l', 'm']
  @State listHeight: number = 0
  @State screenHeight: number = 0 // 获取屏幕高度
  @State barHeight:number = 0 // 获取状态栏高度

  async aboutToAppear() {
    // 获取屏幕高度 + 动态计算列表高度
    this.screenHeight = px2vp(display.getDefaultDisplaySync().height) // px转vp 包括状态栏

    await display.getDefaultDisplaySync().getCutoutInfo().then((data) => {
      this.barHeight = px2vp(data.boundingRects[1].height)
    })

    this.listHeight = this.screenHeight - this.barHeight - 50 - 70 - this.topY // 屏幕高度 - 状态栏高度 - 标题栏高度 - 底部聊天框高度 - 屏幕变化的高度(这里是键盘的高度)
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        // 顶部标题
        Row() {
          Text("聊天机器人")
            .fontSize(18)
        }
        .width('100%')
        .height(50)
        .justifyContent(FlexAlign.Center)

        List() {
          ForEach(this.arrayFood, (item: string) => {
            ListItem() {
              Row() {
                Image($r('app.media.kefu')).width(40)
                Text(item).layoutWeight(1)
              }.height(80).backgroundColor('#b2d235')
            }
          }, item => item)
        }.edgeEffect(EdgeEffect.None).height(this.listHeight <= 0 ? '100%' : this.listHeight)

      }.width('100%').height('100%').backgroundColor('#faa755')
      .position({ y: this.topY })

      Row() {
        TextInput({ placeholder: '请输入', text: this.screenHeight.toString() })
      }.backgroundColor('#c0c0c0').width('100%').height(70)
    }
    .onAreaChange((oldArea: Area, newArea: Area) => {
      // 模拟器 or 真机 弹出键盘 内容上移
      this.topY = Math.abs(parseFloat(newArea.globalPosition.y.toString()))
      this.listHeight = this.screenHeight - this.barHeight - 70 - 50 - this.topY
    })
  }
}

更多关于HarmonyOS 鸿蒙Next Stage模型ArkTs语言 onAreaChange监听组件区域变化时页面闪烁 有解决办法吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

楼主您好，经测试，你如下代码是抖动的主要因素：

请注释之后再测试。

更多关于HarmonyOS 鸿蒙Next Stage模型ArkTs语言 onAreaChange监听组件区域变化时页面闪烁 有解决办法吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


确实如您说的,注掉就正常了,
但是这段代码有用呀,我需要在这个位置监听页面高度的变化,来重新绘制list的高度，

list组件可以使用layoutWeight(1)属性来沾满剩余空间，需要计算吗。

正常是这样的,有特殊情况呀,键盘弹出的时候,您再滑list,有的listItem被隐藏掉了，

.onAreaChange((oldArea: Area, newArea: Area) => {
  // 模拟器 or 真机 弹出键盘 内容上移
  this.topY = Math.abs(parseFloat((newArea.globalPosition.y as number).toString()))
  this.listHeight = this.screenHeight - this.barHeight - 70 - 50 - this.topY
})

请问这个问题解决了吗？是用的什么方法啊？我也出现了在onAreaChange中修改位置闪动的情况呢

这个官方应该修复了吧。这个代码我没改动，已经不会出现闪烁的情况了。

在HarmonyOS中，使用ArkTS语言的onAreaChange监听组件区域变化时，页面闪烁的问题可能与组件的布局计算或渲染机制有关。可以尝试以下方法：

  1. 优化布局：检查布局结构，避免嵌套过多组件，减少布局计算的复杂度。
  2. 减少重绘：确保组件区域变化时，只有必要的部分进行重绘，避免整个页面重新渲染。
  3. 使用LayoutConstraint：通过设置布局约束，减少组件区域变化时的频繁计算。
  4. 调整onAreaChange回调逻辑：避免在回调中执行耗时操作，减少页面渲染的延迟。
  5. 使用@State或@Link：通过状态管理，控制组件的更新频率，减少不必要的重绘。

如果问题依然存在，建议检查具体代码实现，确保组件区域变化的处理逻辑高效且合理。

回到顶部