组件开发ScrollView嵌套ListContainer滑动问题详解

开发 前端
就ScrollView嵌套ListContainer的滑动问题,社区问答中也是遇见了两次提问的小伙伴。准备把这个小问题写成一篇帖子,希望后面再遇到“ScrollView嵌套ListContainer 滑动问题”的同学可以帮助到你们。

[[419191]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

ScrollView嵌套ListContainer

就ScrollView嵌套ListContainer的滑动问题,社区问答中也是遇见了两次提问的小伙伴。在帮助第一个小伙解决这个问题的时候,我提供了一个思路和以前在写Android ScrollView嵌套ListView滑动问题的解决方法。经过方法的修改也是解决了他的问题,后续没有再把这个问题解决的全过程记录下来,直到发现有第二个小伙伴也遇到了同样的问题,准备把这个小问题写成一篇帖子,希望后面再遇到“ScrollView嵌套ListContainer 滑动问题”的同学可以帮助到你们。

思路

一、ScrollView嵌套ListContainer 想让ListContainer不滑动,只滑动ScrollView。在Android中有个东西叫做拦截器,ScrollView的拦截器,通过对拦截器的赋值达到只滑动ScrollView,不滑动ListView。

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

调用方式

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

因为ScrollView继承自ViewGroup,在ViewGroup中有有dispatchTouchEvent()这个方法,

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

但是在HarmonyOS中,ScrollView继承自ComponentContainer,而且在ComponentContainer中没有类似于dispatchTouchEvent的拦截器方法,那么拦截器不能搞就得换方法。

二、这时第二个思路也成型了,因为ScrollView的高度是根据它内部的组件的高度变化的,当内部的组件高度大于手机屏幕的高度时会出现ScrollView的滚动,反之不会出现。

那么就只能从ScrollView的高度入手了,要改变ScrollView的高度就必须去改变它内部组件的高度,那么问题来了ScrollView嵌套ListContainer,ListContainer的高度最大只能到屏幕大小或者是固定于屏幕内部,一旦高度达到所设置的高度,ListContainer就会出现自动滚动此时ScrollView的滚动也会失效,这里是焦点的关系滑动动作取到的焦点会在它当前组件上。

思路到这里也就清晰了,ListContainer的高度大于原始设置的高度时会发生滑动,ScrollView在内部组件高度大于手机屏幕时才会滑动。那么如果把ListContainer的高度设置成一个动态的固定值,ListContainer的数据永远不会被填充满,ListContainer就不会出现滑动。随即ListContainer的高度如果大于了屏幕的高度ScrollView就会滑动。

OK,问题找到了,解决ListContainer的动态高度就解决的滑动冲突。

解决问题

首先我找到了当初写Android时动态Listview高度的方法。这里就粘一下图

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

思路没有变,将每次listview的Item高度相加作为listview的整体高度,listview的高度就是动态的变化,listview的高度会根据数据的增加而变化。

根据参考

下面开始写代码

首先整体布局文件,很简单ScrollView嵌套ListContainer

为了效果明显加入了一个图片

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent"
  6.     <ScrollView 
  7.         ohos:id="$+id:view" 
  8.         ohos:height="match_parent" 
  9.         ohos:width="match_parent"
  10.         <!--设置DirectionalLayout的高度为match_parent--> 
  11.         <DirectionalLayout 
  12.             ohos:height="match_parent" 
  13.             ohos:width="match_parent" 
  14.             ohos:alignment="center" 
  15.             ohos:orientation="vertical"
  16.             <Image 
  17.                 ohos:id="$+id:img" 
  18.                 ohos:height="100vp" 
  19.                 ohos:width="100vp" 
  20.                 ohos:image_src="$media:icon"></Image> 
  21.             <ListContainer 
  22.                 ohos:id="$+id:list" 
  23.                 ohos:height="match_parent" 
  24.                 ohos:width="match_parent" 
  25.                 ></ListContainer> 
  26.         </DirectionalLayout> 
  27.     </ScrollView> 
  28. </DirectionalLayout> 

ListContainer的Item 布局,这里很简单就放一个文本

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_content" 
  5.     ohos:width="match_parent" 
  6.     ohos:left_margin="16vp" 
  7.     ohos:right_margin="16vp" 
  8.     ohos:orientation="vertical"
  9.     <Text 
  10.         ohos:id="$+id:item_index" 
  11.         ohos:height="match_content" 
  12.         ohos:width="match_content" 
  13.         ohos:padding="4vp" 
  14.         ohos:text="Item0" 
  15.         ohos:text_size="20fp" 
  16.         ohos:layout_alignment="center"/> 
  17. </DirectionalLayout> 

 创建SampleItem.java,作为ListContainer的数据包装类。

  1. public class SampleItem { 
  2.     private String name
  3.     public SampleItem(String name) { 
  4.         this.name = name
  5.     } 
  6.     public String getName() { 
  7.         return name
  8.     } 
  9.     public void setName(String name) { 
  10.         this.name = name
  11.     } 

 写一个ListContainer的适配器用于放数据

  1. public class SampleItemProvider extends BaseItemProvider { 
  2.  
  3.     private List<SampleItem> list; 
  4.     private AbilitySlice slice; 
  5.  
  6.     public SampleItemProvider(List<SampleItem> list, AbilitySlice slice) { 
  7.         this.list = list; 
  8.         this.slice = slice; 
  9.     } 
  10.  
  11.     @Override 
  12.     public int getCount() { 
  13.         return list == null ? 0 : list.size(); 
  14.     } 
  15.  
  16.     @Override 
  17.     public Object getItem(int position) { 
  18.         if (list != null && position >= 0 && position < list.size()){ 
  19.             return list.get(position); 
  20.         } 
  21.         return null
  22.     } 
  23.  
  24.     @Override 
  25.     public long getItemId(int position) { 
  26.         return position; 
  27.     } 
  28.  
  29.     @Override 
  30.     public Component getComponent(int position, Component component, ComponentContainer componentContainer) { 
  31.         final Component cpt; 
  32.         if (component == null) { 
  33.             cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, nullfalse); 
  34.         } else { 
  35.             cpt = component; 
  36.         } 
  37.         SampleItem sampleItem = list.get(position); 
  38.         Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index); 
  39.         text.setText(sampleItem.getName()); 
  40.         return cpt; 
  41.     } 

在Java代码中添加ListContainer的数据,并适配其数据结构。

还没有加动态高度的方法。

  1. public class MainAbilitySlice extends AbilitySlice { 
  2.  
  3.     @Override 
  4.     public void onStart(Intent intent) { 
  5.         super.onStart(intent); 
  6.         super.setUIContent(ResourceTable.Layout_ability_main); 
  7.         initListContainer(); 
  8.     } 
  9.  
  10.     private void initListContainer() { 
  11.         ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list); 
  12.         List<SampleItem> list = getData(); 
  13.         listContainer.setBoundarySwitch(true);  //添加分界线 
  14.         SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this); 
  15.         listContainer.setItemProvider(sampleItemProvider); 
  16.     } 
  17.  
  18.     private ArrayList<SampleItem> getData() { 
  19.         ArrayList<SampleItem> list = new ArrayList<>(); 
  20.         for (int i = 0; i < 30; i++) { 
  21.             list.add(new SampleItem("Item" + i)); 
  22.         } 
  23.         return list; 
  24.     } 

查看效果

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

编写自定义高度方法:

  1. private void setListContainerHeight(ListContainer listContainer) { 
  2.         //获取当前listContainer的适配器 
  3.         BaseItemProvider BaseItemProvider = listContainer.getItemProvider(); 
  4.        if (BaseItemProvider == null){ 
  5.            return
  6.        } 
  7.         int itemHeight = 0; 
  8.         for (int i = 0; i < BaseItemProvider.getCount(); i++) { 
  9.             //循环将listContainer适配器的Item数据进行累加 
  10.             Component listItem = BaseItemProvider.getComponent(i, null, listContainer); 
  11.             itemHeight += listItem.getHeight(); 
  12.         } 
  13.         //对当前listContainer进行高度赋值 
  14.         ComponentContainer.LayoutConfig config = listContainer.getLayoutConfig(); 
  15.         //这边加上(listContainer.getBoundaryThickness() * (BaseItemProvider.getCount()+1)) 
  16.         //listContainer.getBoundaryThickness() 就是分界线的高度 
  17.         //(BaseItemProvider.getCount()+1) 是Item的数量  加1  是因为顶部还有一条分界线 
  18.         config.height = itemHeight 
  19.                 + (listContainer.getBoundaryThickness() * (BaseItemProvider.getCount()+1)); 
  20.         //赋值 
  21.         listContainer.setLayoutConfig(config); 
  22.     } 

调用方法:

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

实现效果:

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

出问题了,不能滑动!!!!!!!

找到了,问题在布局中。

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

重新运行,查看结果:

跳更一篇  组件开发 ScrollView嵌套ListContainer 滑动问题-鸿蒙HarmonyOS技术社区

OK了,以达到了最终的效果。

代码放在了下面的资源链接里,大家可以进行参考。

FirstDemo.zip

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-08-12 14:59:15

鸿蒙HarmonyOS应用

2013-05-17 13:47:25

Android开发ScrollViewGridView

2011-09-08 15:51:33

Android Wid组件

2021-01-04 10:39:27

滑动问题滑动窗口Python

2017-01-04 18:29:20

AndroidNestedScrol嵌套滑动机制

2020-12-28 10:15:18

鸿蒙HarmonyOSListContain

2017-07-20 16:55:56

Android事件响应View源码分析

2013-04-25 14:26:54

GridView

2023-07-07 08:36:45

配置注解jar

2021-03-26 08:20:51

SpringBoot读写分离开发

2009-04-10 09:06:16

Windows Emb

2011-08-08 15:40:47

Cocos2d

2009-09-16 13:05:32

C#组件开发

2021-10-18 10:14:26

鸿蒙HarmonyOS应用

2010-08-04 10:17:17

Android开发WebView组件

2022-08-09 11:46:58

Vue递归组件

2009-02-17 15:41:53

Ubuntu打印问题Virtualbox

2011-07-20 13:41:38

组策略

2010-12-31 10:37:09

2021-03-12 16:35:33

鸿蒙HarmonyOS应用
点赞
收藏

51CTO技术栈公众号