HarmonyOS鸿蒙Next中嵌套滚动示例代码

HarmonyOS鸿蒙Next中嵌套滚动示例代码

介绍

模拟商品展示、筛选页面，页面的嵌套滚动层级较深，由于有回滑效果，所以不能使用nestedScroll嵌套滚动选项。使用OS能力相关的核心API：Scroll、List。

demo详情链接

https://gitee.com/scenario-samples/scroll-layer

2 回复

在HarmonyOS鸿蒙Next中实现嵌套滚动，可以使用ScrollView和ListContainer等组件。以下是一个简单的示例代码，展示了如何在ScrollView中嵌套ListContainer实现嵌套滚动效果。

import { ScrollView, ListContainer, ListItem, Text } from '@ohos/hap';

@Entry
@Component
struct NestedScrollExample {
  @State private data: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  build() {
    ScrollView() {
      Column() {
        Text('Header Content')
          .fontSize(20)
          .margin({ bottom: 10 });

        ListContainer() {
          ForEach(this.data, (item: string) => {
            ListItem() {
              Text(item)
                .fontSize(16)
                .margin({ left: 10 });
            }
          });
        }
        .height('100%')
        .width('100%');

        Text('Footer Content')
          .fontSize(20)
          .margin({ top: 10 });
      }
    }
    .height('100%')
    .width('100%);
  }
}

在这个示例中，ScrollView作为外层容器，Column用于垂直排列内容。ListContainer用于展示列表项，ForEach循环渲染每个列表项。通过这种方式，可以实现ScrollView和ListContainer的嵌套滚动。

更多关于HarmonyOS鸿蒙Next中嵌套滚动示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现嵌套滚动，可以使用ScrollView和ListContainer组件。以下是一个简单的示例代码：

import ohos.agp.components.ListContainer;
import ohos.agp.components.ScrollView;
import ohos.agp.components.Text;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.LayoutScatter;
import ohos.app.Context;

public class NestedScrollExample extends ComponentContainer {
    public NestedScrollExample(Context context) {
        super(context);
        // 创建外层的ScrollView
        ScrollView scrollView = new ScrollView(context);
        scrollView.setLayoutConfig(new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT));

        // 创建内层的ListContainer
        ListContainer listContainer = new ListContainer(context);
        listContainer.setLayoutConfig(new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT));

        // 添加一些示例数据到ListContainer
        String[] items = {"Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};
        for (String item : items) {
            Text text = new Text(context);
            text.setText(item);
            listContainer.addComponent(text);
        }

        // 将ListContainer添加到ScrollView中
        scrollView.addComponent(listContainer);

        // 将ScrollView添加到当前布局中
        addComponent(scrollView);
    }
}

这个示例展示了如何在ScrollView中嵌套一个ListContainer，并添加一些简单的文本项。ScrollView允许用户在内容超出屏幕时进行滚动，而ListContainer则用于展示列表项。

回到顶部