HarmonyOS 鸿蒙Next中Scroll组件的使用方法

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next中Scroll组件的使用方法

#创作灵感#

在使用HarmonyOS进行开发时,常常会用到Scroll组件,这里对之前自己开发时使用Scroll组件的一些心得和建议进行一些汇总

一、基础使用方法

首先,对Scroll的一些基础使用进行举出

Scroll

可滚动的容器组件,当子组件的布局尺寸超过父组件的尺寸时,内容可以滚动。

说明:

该组件从API version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

该组件嵌套List子组件滚动时,若List不设置宽高,则默认全部加载,在对性能有要求的场景下建议指定List的宽高。

该组件滚动的前提是主轴方向大小小于内容大小。

该组件回弹的前提是要有滚动。内容小于一屏时,没有回弹效果。

 对于Scroll组件,只支持单个子组件,因此基本的形式就是这样:

Scroll(){
    Column(){
        // 内容
    }
}

接下来对一些常用的方法进行列举:

Scroll(){
    // 只支持一个子组件
    Column(){
        // 内容放在内部
        // 尺寸超过Scroll即可滚动    
    }
}
    .scrollable(ScrollDirection.Horizontal | Vertical(横向 | 纵向))
    .scrollBar(BarState.On | off | auto (始终显示 | 始终隐藏 | 滑动显示))
    .scrollBarColor(滚动条颜色)
    .scrollBarWidth(滚动条颜色)
    .edgeEffect(EdgeEffect.None | Spring | Fade (无 | 弹簧 | 阴影))
    .onScroll((x,y) => {
        // 滚动时持续触发,可以结合currentOffset方法获取滚动距离 
    })

Scroller

此外,Scroll组件提供了一个控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动

使用方式:

// 导入对象
scroller: Scroller = new Scroller()

它也提供了一些方法,可以在openHarmony官网查看

二、一些使用心得

虽然说,官方原本提供的Scroll组件已经很方便了,但是可能因为我自己也是新手比较菜,使用的时候常常遇见一些问题,这里将这段时间的使用心得进行列举

1、Scroll容器中的高度问题

        对于Scroll容器而言,我们经常遇见需要指定滚动容器高度的情况,这种情况下,我们可以直接给Scroll容器指定height属性

Scroll(){
    column(){
        // 内容
    }
}.height(‘100%’)

        这里需要注意的是,不推荐给内部子组件指定高度,可能会发生难以预料的问题

Scroll(){
    column(){
        // 内容
    }.height(‘100%’)
}
// 不要这样做

2、Scroll容器中的对齐问题

        对于Scroll容器而言,如果指定了容器高度,则会将内部内容默认上下居中对齐,如果我们需要调整它的对齐方式,可以对Scroll容器指定align()属性

Scroll(){
    column(){
        // 内容
    }
}.height(‘100%’)
.align(Alignment.Top)

以上,便是对Scroll容器的介绍了,本文基于Harmony OS NEXT进行编写。


更多关于HarmonyOS 鸿蒙Next中Scroll组件的使用方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中Scroll组件的使用方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS 鸿蒙Next中,Scroll组件用于实现可滚动的视图区域。其使用方法主要包括以下几个步骤:

  1. 定义Scroll组件: 在XML布局文件中,使用<scroll>标签定义Scroll组件。可以指定其方向属性(如vertical表示垂直滚动,horizontal表示水平滚动)。

  2. 嵌套子组件: 在<scroll>标签内部嵌套需要滚动的子组件,这些子组件将随着Scroll组件的滚动而移动。

  3. 设置滚动属性: 可以通过设置属性来控制滚动的行为,如是否启用弹性滚动、滚动条样式等。

  4. 在代码中操作: 在JavaScript或TypeScript代码中,可以通过获取Scroll组件的实例来动态控制其滚动位置,例如滚动到顶部或底部。

  5. 事件处理: 可以监听Scroll组件的滚动事件,如滚动开始、滚动中、滚动结束等,以执行相应的逻辑。

示例代码片段(XML布局):

<scroll direction="vertical">
    <div>
        <!-- 滚动内容 -->
        <text>Item 1</text>
        <text>Item 2</text>
        <!-- 更多内容 -->
    </div>
</scroll>

注意,实际开发中需根据具体需求调整属性和事件处理逻辑。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部