关于Harmony OS中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

二、一些使用心得

虽然说，官方原本提供的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进行编写。