ScrollView里面套着ListContainer

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

ScrollView
ListContainer
2021-07-06 09:54:06
浏览
1
收藏 1
回答 9
待解决
回答 9
按赞同
/
按时间
爱吃土豆丝的打工人
4

自定义ScrollView,做拦截操作。

分享
微博
QQ
微信
回复
2021-07-06 16:27:45
wx60a75810c508a
3

<ScrollView
    ohos:id="$+id:home_scroll"
    ohos:height="400vp"
    ohos:width="700vp"
    ohos:background_element="#FFDEAD">

中间还有其他数据

<ListContainer
    ohos:id="$+id:dir_list"
    ohos:height="match_content"
    ohos:width="700vp"
    ></ListContainer>

</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;
}

分享
微博
QQ
微信
回复
2021-07-06 09:58:40
爱吃土豆丝的打工人
3
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;
    }
}
分享
微博
QQ
微信
回复4
2021-07-06 16:28:35
wx60a75810c508a
3

 

鸿蒙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();
}

 

 

 

分享
微博
QQ
微信
回复
2021-07-07 18:03:59
wx60a75810c508a
2

这是滑动事件冲突了,怎么解决???

分享
微博
QQ
微信
回复
2021-07-06 10:23:36
mb5e33f4fedceec
2

楼主解决了吗 咋解决的?

分享
微博
QQ
微信
回复
2021-08-11 11:20:25
金大人的梦
2

child.getHeight();高度为0,不知为何?

分享
微博
QQ
微信
回复
2021-08-16 17:46:04
鱼弦CTO
1

 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%')
  }
}

关键点解释


ScrollView:


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

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


ListContainer:


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

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

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


动态计算高度:


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


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

分享
微博
QQ
微信
回复
2024-07-11 10:00:30
鱼弦CTO
1

在鸿蒙系统(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%')
  }
}


关键点解释


ScrollView:


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

设置 scrollable: true 启用滚动。


ListContainer:


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

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

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


动态计算高度:


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


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

分享
微博
QQ
微信
回复
2024-07-11 10:16:43
相关问题
ScrollView嵌套ListContainer
6811浏览 • 5回复 待解决
listContainer怎么通过addComponent添加布局
8150浏览 • 1回复 待解决
请问ScrollView怎么显示滚动条?
5521浏览 • 1回复 待解决
HarmonyOS 有没有类似scrollview的组件
296浏览 • 1回复 待解决
ScrollView默认从底端开始,怎么破?
5011浏览 • 1回复 待解决
鸿蒙中ScrollView如何禁掉滚动事件
7243浏览 • 2回复 待解决
ListContainer 有滚动条 显示吗?
5655浏览 • 1回复 待解决
ListContainer中的Item能取消拖拽吗
5048浏览 • 1回复 待解决
ListContainer加载大量数据白屏并且卡UI
5495浏览 • 1回复 待解决