本文将深入探讨鸿蒙应用开发中的滚动容器组件,并展示如何通过
Scroller
控制器与ScrollBar
组件实现自定义滚动条的效果。
1. 滚动容器组件概览
在鸿蒙应用开发中滚动容器组件主要包括:
Scroll
:基础滚动容器,支持单个子组件的滚动List
:用于展示垂直或水平排列的列表项Grid
:提供网格形式的布局,允许内容通过滚动来显示WaterFlow
:类似于Grid组件,但是提供了瀑布流式的布局
这些组件支持滚动的基本属性和事件,如滚动方向、滚动条状态、滚动监听等。
2. 滚动的通用属性和通用事件
2.1. 滚动容器组件通常支持以下通用属性:
属性 | 描述 |
---|---|
scrollBar | 设置滚动条的状态,参数类型:BarState,【默认值:BarState.Auto】枚举值可选自动(Auto )、始终显示(On )或隐藏(Off ) |
scrollBarColor | 设置滚动条的颜色 |
scrollBarWidth | 设置滚动条的宽度,不支持百分比设置 |
edgeEffect | 设置边缘滑动效果,参数类型:EdgeEffect ,【 默认值:EdgeEffect.None **】**支持弹簧效果(Spring )和阴影效果(Fade ),默认无效果(None ) |
2.2. 滚动容器组件的通用事件包括:
事件回调 | 描述 |
---|---|
onScroll | 滚动事件回调,返回滚动时的水平和竖直方向偏移量 ,建议使用onDidScroll替代 |
onDidScroll | 滚动组件滑动时触发,返回当前帧滑动的偏移量和当前滑动状态 |
onWillScroll | 滚动事件回调,滚动组件滚动前触发 |
onScrollEdge | 滚动到边缘时触发的事件回调 |
滚动组件的其他通用属性和事件详见鸿蒙开发文档:滚动组件通用属性和通用事件
2.3. 不同滚动组件设置滚动方向方法
3. Scroller 控制器
Scroller
可滚动容器组件的控制器,可以将此组件绑定至容器组件,然后通过它控制容器组件的滚动,同一个控制器不可以控制多个容器组件。
@Entry
@Component
struct Index {
/* 实例化一个Scroller控制器对象 */
scroller: Scroller = new Scroller()
build() {
Column(){
/* 将Scroller控制器绑定不同的组件 */
List({ scroller: this.scroller }){}
Grid(this.scroller){}
Scroll(this.scroller){}
WaterFlow({ scroller: this.scroller }){}
}
.width('100%')
.height('100%')
}
}
Scroller控制器常用的事件如下:
/* scrollTo: 滑动到指定位置,支持设置动画效果 */
this.scroller.scrollTo(value: {xOffset:number,yOffset:number}): void
/* scrollEdge:滚动到容器边缘 Edge.Top和Start 表现相同滚动到顶部|左端 */
this.scroller.scrollEdge(value: Edge, options?: ScrollEdgeOptions): void
/* scrollPage:滚动到下一页或者上一页,next:true -> 上一页 false -> 下一页 */
this.scroller.scrollPage(value: { next: boolean }): void
/* scrollToIndex: 滑动到指定索引位置,并可选动画效果,适用于Grid、List、WaterFlow等组件 */
this.scroller.scrollToIndex(value: number, smooth?: boolean): void
/* currentOffset: 返回当前滚动偏移量(包括xOffset水平位移量和yOffset垂直位移量) */
this.scroller.currentOffset(): OffsetResult
// xOffset水平位移量: this.scroller.currentOffset().xOffset
// yOffset垂直位移量: this.scroller.currentOffset().yOffset
4. 自定义滚动条实现
ScrollBar
组件用于定义滚动条的行为和样式。使用Scroller
配合Scroll、List等滚动容器组件使用,可以实现自定义的滚动条。
4.1. 基本使用
ScrollBar(value: ScrollBarOptions)
ScrollBarOptions参数说明:
参数 | 描述 |
---|---|
scroller | Scroller控制器,可用于与可滚动组件进行绑定。(必填参数) |
state? | 设置滚动条的状态,参数类型:BarState,【默认值:BarState.Auto】枚举值可选自动(Auto )、始终显示(On )或隐藏(Off ) |
direction? | 设置滚动条方向,类型:ScrollBarDirection【默认:ScrollBarDirection.Vertical】枚举值可选:纵向滚动(Vertical )、横向滚动(Horizontal ) |
4.2. 配合滚动容器组件使用
- 首先实例化一个Scroller控制器对象
- 将Scroller控制器分别绑定到滚动容器和ScrollBar组件
- 将滚动容器的滚动条隐藏,始终显示ScrollBar的滚动条
- 自定义滚动条(
ScrollBar的子节点
)和可滚动区域(ScrollBar
)的样式
@Entry
@Component
struct Index {
/* 首先,实例化一个Scroller控制器对象 */
scroller: Scroller = new Scroller()
build() {
Column() {
/* 将Scroller控制器绑定到滚动容器组件 */
Scroll(this.scroller) {}
.scrollable(ScrollDirection.Horizontal) // 设置横向滚动
.scrollBar(BarState.Off) // 关闭容器组件的滚动条
ScrollBar({
scroller: this.scroller, // 绑定Scroller控制器
state: BarState.On, // 设置ScrollBar滚动条始终显示
direction: ScrollBarDirection.Horizontal // 设置相同滚动方式
}) {
// 自定义滚动条样式...
}
// 可滚动区域的行为样式...
}
.width('100%')
.height('100%')
}
}
5. 扩展:交互效果(待学习)
利用Scroller
的事件监听,如onScroll
、onScrollEdge
和onScrollEnd
,可以添加滚动条的交互效果,比如滚动到边缘时的回弹效果,或者滚动过程中的动态反馈,后面还可实现的列表的上拉刷新以及下拉加载。
写在最后
有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)文档用来跟着学习是非常有必要的。
希望这一份鸿蒙学习文档能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!
如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员,可以直接领取这份资料
鸿蒙(HarmonyOS NEXT)5.0最新学习路线
路线图适合人群:
IT开发人员:想要拓展职业边界
零基础小白:鸿蒙爱好者,希望从0到1学习,增加一项技能。
技术提升/进阶跳槽:发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术
获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习文档
《鸿蒙 (HarmonyOS)开发入门教学视频》
《鸿蒙生态应用开发V3.0白皮书》
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
《鸿蒙开发进阶》
●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
《鸿蒙进阶实战》
●ArkTS实践
●UIAbility应用
●网络案例
……