#创作灵感#

在使用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进行编写。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐