ScrollView里面套着ListContainer

在ScrollView里面套着ListContainer展示数据，但是在ScrollView里面ListContainer自己的数据展示有自己滑动，想叫ScrollView整体滑动和ListContainer充满数据展示列表不要滑动，怎么在ListContainer操作？

ScrollView

ListContainer

wx60a75810c508a

2021-07-06 09:54:06

浏览

回答 9

按赞同

按时间

爱吃土豆丝的打工人

自定义ScrollView，做拦截操作。

2021-07-06 16:27:45

wx60a75810c508a

中间还有其他数据

</ScrollView>

这个是java里面的list循环

List<SchBean> listsch = getscheduleData();
SchAdapter scheAdapter = new SchAdapter(listsch, this);
dirlist.setItemProvider(schAdapter);

private List<SchBean> getscheduleData() {
List<SchBean> listsch = new ArrayList<>();

for (int i = 1; i <= 5; i++) {

listsch.add(new SchBean());
}
return listsch;
}

2021-07-06 09:58:40

爱吃土豆丝的打工人

public class MyScrollView extends ScrollView {
    private boolean isIntercept = true;
    public MyScrollView(Context context) {
        super(context);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        // 不要拦截  true为不要拦截   false为拦截
        requestDisallowInterceptTouchEvent(isIntercept);
        return super.dispatchTouchEvent(ev);
    }

    public void getMyScrollViewTouchEvent(boolean Interceptor){
        isIntercept = Interceptor;
    }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

2021-07-06 16:28:35

wx60a75810c508a

鸿蒙ListContainer动态高度解决方法

private void intData() {
List<ScheduleBean> listschedule = getscheduleData();
ScheduleAdapter scheduleAdapter = new ScheduleAdapter(listschedule, this);
mDirlist.setItemProvider(scheduleAdapter);
ListContainer listContainer = mDirlist;
int itemHeight = 0;
for (int i = 0; i < scheduleAdapter.getCount(); i++) {
Component child = scheduleAdapter.getComponent(i, null, listContainer);
itemHeight += child.getHeight();
}
ComponentContainer.LayoutConfig config = listContainer.getLayoutConfig();
config.height = itemHeight;
listContainer.setLayoutConfig(config);
scheduleAdapter.notifyDataChanged();
}

2021-07-07 18:03:59

wx60a75810c508a

这是滑动事件冲突了，怎么解决？？？

2021-07-06 10:23:36

mb5e33f4fedceec

楼主解决了吗咋解决的？

2021-08-11 11:20:25

金大人的梦

child.getHeight();高度为0，不知为何？

2021-08-16 17:46:04

鱼弦CTO

HarmonyOS 的 ArkTS 中，结合 ScrollView 和 ListContainer 实现整体的滑动效果，并且 ListContainer 不单独滑动是一个常见需求。可以通过一些技巧来实现这一点。具体来说，可以通过设置 ListContainer 的高度，使其占满 ScrollView 的高度，从而避免单独滑动。

示例代码

以下是一个关于如何在 ScrollView 中嵌套 ListContainer 并使其充满父容器的示例：

import { Observed, State } from 'ohos-typecobindings-reactive'

@Component
export default class ScrollViewListContainerExample extends ViewComponent {
  @State listData: Array<string> = []
  
  onInit() {
    // 初始化数据
    for (let i = 0; i < 50; i++) {
      this.listData.push(`Item ${i + 1}`)
    }
  }

  build() {
    Column() {
      // ScrollView 容器
      ScrollView({ scrollable: true }) {
        Column() {
          // ListContainer 容器
          ListContainer({ items: this.listData }) {
            (item) => {
              Text(item)
                .width('100%')
                .height(40) // 每个 item 的高度
                .margin(8) // 每个 item 的间距
            }
          }.width('100%')
           .height(this.listData.length * 48 /* 每个 item 的高度加上间距 */)
        }.width('100%')
         .padding(16)
      }.width('100%')
       .height('100%')
    }.width('100%')
     .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

关键点解释

ScrollView：

ScrollView 组件用于包裹整个内容，并提供滚动能力。

通过设置 scrollable: true 启用滚动功能。

ListContainer：

ListContainer 用于显示垂直方向的数据列表。

设置 width: '100%' 确保它占满宽度。

设置 height 为列表项总高度，确保 ListContainer 显示所有项目并占满父容器高度，从而禁用自身的滚动。

动态计算高度：

ListContainer 的高度设置为 this.listData.length * 48，其中 48 是每个列表项的高度加上间距。这确保了 ListContainer 的高度能展示所有数据项，而无需滚动。

这种方法通过动态计算 ListContainer 的高度，确保所有列表项都展示在 ScrollView 中，避免了 ListContainer 自身滚动的问题。

2024-07-11 10:00:30

鱼弦CTO

在鸿蒙系统（HarmonyOS）中，如果希望 ScrollView 包裹的 ListContainer 不单独滑动，而是整体由 ScrollView 控制滑动，可以通过设置 ListContainer 的高度来达到这个目的。

以下是一个实现方案：

实现方案

要实现 ScrollView 整体滑动而不是 ListContainer 单独滑动，可以通过如下步骤：

将 ListContainer 的高度设置为其所有子项总和，确保它不出现滚动条。

使用 ScrollView 包裹 ListContainer，使得整个内容在 ScrollView 中滚动。

示例代码

以下是一个示例代码，演示如何实现这一需求：

import { Observed, State } from 'ohos-typecobindings-reactive'

@Component
export default class ScrollViewListContainerExample extends ViewComponent {
  @State listData: Array<string> = []

  onInit() {
    // 初始化数据
    for (let i = 0; i < 50; i++) {
      this.listData.push(`Item ${i + 1}`)
    }
  }

  build() {
    Column() {
      // ScrollView 容器
      ScrollView({ scrollable: true }) {
        Column() {
          // ListContainer 容器
          ListContainer({ items: this.listData }) {
            (item) => {
              Text(item)
                .width('100%')
                .height(40) // 每个 item 的高度
                .margin(8) // 每个 item 的间距
            }
          }.width('100%')
           .height(this.listData.length * 48 /* 每个 item 的高度加上间距 */)
        }.width('100%')
         .padding(16)
      }.width('100%')
       .height('100%')
    }.width('100%')
     .height('100%')
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

关键点解释

ScrollView：

ScrollView 组件用于包裹整个内容，并提供滚动功能。

设置 scrollable: true 启用滚动。

ListContainer：

ListContainer 用于显示垂直方向的数据列表。

设置 width: '100%' 确保它占满宽度。

动态计算 height 为列表项总高度，确保 ListContainer 显示所有项目并占满父容器高度，从而禁用自身的滚动。

动态计算高度：

ListContainer 的高度设置为 this.listData.length * 48，其中每个列表项的高度加上间距为 48。这确保了 ListContainer 的高度能展示所有数据项，而无需滚动。

通过这种方法，你可以确保 ScrollView 内的 ListContainer 不会单独产生滚动条，而是由 ScrollView 控制整体滑动。这种处理方式适用于需要将大量内容放在一个可滚动视图中的场景。

2024-07-11 10:16:43

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

ScrollView里面套着ListContainer

订阅鸿蒙技术特刊，精选内容抢先看