HarmonyOS 鸿蒙Next Scroll组件子组件内容发生改变时如何不影响当前滚动的位置

HarmonyOS 鸿蒙Next Scroll组件子组件内容发生改变时如何不影响当前滚动的位置

[设备信息/系统版本]
HarmonyOS NEXT 5.0.0.123

[API版本]
5.0

[DevEco Studio版本]
5.0.5.310

[问题描述]
当scroll组件滚动到中间位置，上方的子组件的高度添加，scroll组件当前显示的内容会往下拉，如何避免这种情况

[问题相关代码]
无

[尝试过的方法和结果]
无

[最终目标]
scroll组件滚动的位置不随着内容的改变而改变
3 回复
  1. 变化前获取 Scroll的currentOffset值，记录下来offset
  2. 变化后使用控制器scrollTo记录的offset值

参考API：

更多关于HarmonyOS 鸿蒙Next Scroll组件子组件内容发生改变时如何不影响当前滚动的位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


scroll组件的显示内容本身就是会根据嵌套子组件内容而变化的呀，有具体的示例代码或者场景现象提供下吗

在HarmonyOS鸿蒙Next中，当Scroll组件的子组件内容发生改变时，可以通过使用ScrollController来控制滚动位置。具体步骤如下：

  1. 在Scroll组件中设置controller属性，并创建一个ScrollController实例。
  2. 在子组件内容发生改变之前，使用ScrollController的offset属性获取当前的滚动位置。
  3. 在子组件内容发生改变之后，使用ScrollController的jumpTo或animateTo方法将滚动位置恢复到之前的位置。

代码示例：

import { ScrollController } from '@ohos.agp.components';

class MyComponent {
  private scrollController: ScrollController = new ScrollController();
  private currentScrollOffset: number = 0;

  onContentChange() {
    // 获取当前滚动位置
    this.currentScrollOffset = this.scrollController.offset;

    // 更新子组件内容
    // ...

    // 恢复到之前的滚动位置
    this.scrollController.jumpTo(this.currentScrollOffset);
  }

  build() {
    return (
      <Scroll controller={this.scrollController}>
        {/* 子组件内容 */}
      </Scroll>
    );
  }
}

通过这种方式，可以在子组件内容发生改变时，保持当前的滚动位置不变。

回到顶部