HarmonyOS组件开发 ScrollView嵌套ListContainer 滑动冲突问题

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

ScrollView嵌套ListContainer

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


思路

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


3544968975a50d0eec0e3b5449b594d2.png

调用方式

b80468d82275f123afc159a2a0eaf3b2.png


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

6127638f88503d7e4b9fdd7565da75bc.png


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

52ba715f4be4b634af7b4252947e2cb4.png


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

根据参考

下面开始写代码

首先整体布局文件,很简单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;
    }
}

查看效果


编写自定8a1857b900bbe85be8703b7e87248f8e.gif义高度方法:


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

调用方法:

f2cdd740e11a2a9eb8e3880abc9c772e.png

实现效果:


3a8aa5877b2d69bce6175197cb93d679.gif

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


找到了,问题在布局中

f4f1aae3db7d15b7e892597704632982.png


重新运行,查看结果:


7d5844f6f42b4c31a5d6a6c8884c3ad2.gif

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

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

源代码


相关文章
|
API 索引 数据处理
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
3298 0
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
|
8月前
|
Android开发 容器
鸿蒙开发:使用nestedScroll解决滑动冲突
nestedScroll属性的作用,主要是,用于设置嵌套滚动选项,设置前后两个方向的嵌套滚动模式,实现与父组件的滚动联动。
268 19
鸿蒙开发:使用nestedScroll解决滑动冲突
|
8月前
HarmonyOS实战:Tab顶部滑动悬停功能实现
在鸿蒙开发中,实现Scroll嵌套List列表滑动时顶部悬停的效果是一个常见需求。本文详细介绍了如何通过布局和事件处理来实现这一功能。首先,使用Scroll嵌套List和Tab布局来构建基础页面。然后,通过设置nestedScroll属性为NestedScrollMode.PARENT_FIRST,确保外层Scroll优先滑动。接着,通过监听List和Scroll的滑动事件,处理滑动冲突,确保在特定条件下Scroll停止滑动,将滑动事件交给List处理。最终,实现了在上下滑动时优先让Scroll滑动的效果,并提供了扩展思路,如优先让List滑动等。
408 10
HarmonyOS实战:Tab顶部滑动悬停功能实现
|
7月前
|
人机交互 UED 索引
41.[HarmonyOS NEXT Row案例九] 打造流畅可滑动列表项:滑动操作按钮的高级实现
在现代移动应用中,可滑动列表项是一种常见且高效的交互方式,它允许用户通过水平滑动列表项来显示隐藏的操作按钮,如删除、置顶、归档等。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件结合手势和动画创建一个流畅的可滑动列表项,实现滑动操作按钮的高级交互效果。
215 8
|
7月前
|
存储 UED 开发者
28.[HarmonyOS NEXT Column案例七(上)] 多层嵌套布局:打造结构清晰的详情页面
在HarmonyOS NEXT应用开发中,详情页是一种常见且重要的界面类型,它需要展示丰富的内容并提供良好的用户体验。本教程将详细讲解如何使用Column组件作为主容器,结合Row、Flex等组件的嵌套使用,创建一个结构清晰、层次分明的详情页面。通过DetailPage组件的实际案例,我们将展示如何构建包含固定区域和弹性区域的复合布局,帮助开发者掌握复杂布局的实现技巧。
169 4
|
7月前
|
索引
鸿蒙开发:自定义切换动画实现Swiper层叠滑动效果
customContentTransition不仅仅可以实现平移上的改变,很多的效果,我们都可以实现,比如放大缩小,旋转等等。
398 2
鸿蒙开发:自定义切换动画实现Swiper层叠滑动效果
|
7月前
|
开发者 容器
25.[HarmonyOS NEXT Column案例五(下)] 精细化列表项设计:多层嵌套布局与视觉层次构建
在上一部分中,我们介绍了垂直列表的基础结构、数据模型设计以及外层Column的实现。本教程将继续深入探讨列表项的内部结构,包括Row布局的实现、图片与文本的样式设置以及嵌套标签的实现方法,帮助开发者掌握更复杂的布局技巧,创建视觉层次分明、信息丰富的产品列表界面。
107 1
|
7月前
|
UED 容器
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
202 0
|
UED
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
本篇将带你实现一个滑动选择器应用,用户可以通过滑动条选择不同的数值,并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。
220 1
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
|
索引 API Unix
【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)
【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)
1026 0
【鸿蒙软件开发】ArkTS基础组件之TextClock(时间显示文本)、TextPicker(滑动选择文本)

热门文章

最新文章