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

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

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

https://harmonyos.51cto.com

ScrollView嵌套ListContainer

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

思路

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

调用方式

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

但是b2b信息网在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高度的方法。这里就粘一下图

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

根据参考

下面开始写代码

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

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

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:height="match_parent"     ohos:width="match_parent">     <ScrollView         ohos:id="$+id:view"         ohos:height="match_parent"         ohos:width="match_parent">         <!--设置DirectionalLayout的高度为match_parent-->         <DirectionalLayout             ohos:height="match_parent"             ohos:width="match_parent"             ohos:alignment="center"             ohos:orientation="vertical">             <Image                 ohos:id="$+id:img"                 ohos:height="100vp"                 ohos:width="100vp"                 ohos:image_src="$media:icon"></Image>             <ListContainer                 ohos:id="$+id:list"                 ohos:height="match_parent"                 ohos:width="match_parent"                 ></ListContainer>         </DirectionalLayout>     </ScrollView> </DirectionalLayout> 

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

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:height="match_content"     ohos:width="match_parent"     ohos:left_margin="16vp"     ohos:right_margin="16vp"     ohos:orientation="vertical">     <Text         ohos:id="$+id:item_index"         ohos:height="match_content"         ohos:width="match_content"         ohos:padding="4vp"         ohos:text="Item0"         ohos:text_size="20fp"         ohos:layout_alignment="center"/> </DirectionalLayout> 

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

public class SampleItem {      private String name;     public SampleItem(String name) {          this.name = name;     }     public String getName() {          return name;     }     public void setName(String name) {          this.name = name;     } } 

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

public class SampleItemProvider extends BaseItemProvider {       private List<SampleItem> list;     private AbilitySlice slice;      public SampleItemProvider(List<SampleItem> list, AbilitySlice slice) {          this.list = list;         this.slice = slice;     }      @Override     public int getCount() {          return list == null ? 0 : list.size();     }      @Override     public Object getItem(int position) {          if (list != null && position >= 0 && position < list.size()){              return list.get(position);         }         return null;     }      @Override     public long getItemId(int position) {          return position;     }      @Override     public Component getComponent(int position, Component component, ComponentContainer componentContainer) {          final Component cpt;         if (component == null) {              cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, null, false);         } else {              cpt = component;         }         SampleItem sampleItem = list.get(position);         Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);         text.setText(sampleItem.getName());         return cpt;     } } 

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

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

public class MainAbilitySlice extends AbilitySlice {       @Override     public void onStart(Intent intent) {          super.onStart(intent);         super.setUIContent(ResourceTable.Layout_ability_main);         initListContainer();     }      private void initListContainer() {          ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list);         List<SampleItem> list = getData();         listContainer.setBoundarySwitch(true);  //添加分界线         SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this);         listContainer.setItemProvider(sampleItemProvider);     }      private ArrayList<SampleItem> getData() {          ArrayList<SampleItem> list = new ArrayList<>();         for (int i = 0; i < 30; i++) {              list.add(new SampleItem("Item" + i));         }         return list;     } } 

查看效果

编写自定义高度方法:

private void setListContainerHeight(ListContainer listContainer) {          //获取当前listContainer的适配器         BaseItemProvider BaseItemProvider = listContainer.getItemProvider();        if (BaseItemProvider == null){             return;        }         int itemHeight = 0;         for (int i = 0; i < BaseItemProvider.getCount(); i++) {              //循环将listContainer适配器的Item数据进行累加             Component listItem = BaseItemProvider.getComponent(i, null, listContainer);             itemHeight += listItem.getHeight();         }         //对当前listContainer进行高度赋值         ComponentContainer.LayoutConfig config = listContainer.getLayoutConfig();         //这边加上(listContainer.getBoundaryThickness() * (BaseItemProvider.getCount()+1))         //listContainer.getBoundaryThickness() 就是分界线的高度         //(BaseItemProvider.getCount()+1) 是Item的数量  加1  是因为顶部还有一条分界线         config.height = itemHeight                 + (listContainer.getBoundaryThickness() * (BaseItemProvider.getCount()+1));         //赋值         listContainer.setLayoutConfig(config);     } 

调用方法:

实现效果:

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

找到了,问题在布局中。

重新运行,查看结果:

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

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

FirstDemo.zip

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

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

https://harmonyos.51cto.com

-->
滇ICP备2023000592号-31