微网站建设计划书,网站建设费用属于业务宣传费吗,wordpress音乐门户主题,dkp网站开发这一节了解一下Scroll控件,在鸿蒙#xff08;HarmonyOS#xff09;开发中#xff0c;Scroll控件是一个重要的可滚动容器组件#xff0c;它允许在子组件的布局尺寸超过父组件尺寸时提供滚动功能。
scrollable#xff1a; 含义#xff1a;控制Scroll组件的滚动方向。 可选… 这一节了解一下Scroll控件,在鸿蒙HarmonyOS开发中Scroll控件是一个重要的可滚动容器组件它允许在子组件的布局尺寸超过父组件尺寸时提供滚动功能。
scrollable 含义控制Scroll组件的滚动方向。 可选值 ScrollDirection.Vertical垂直滚动默认值。 ScrollDirection.Horizontal水平滚动。
scrollBar 含义设置滚动条的状态。 可选值 BarState.Auto自动显示滚动条默认值。 BarState.On始终显示滚动条。 BarState.Off始终不显示滚动条。
scrollBarColor 含义设置滚动条的颜色。 scrollBarWidth 含义设置滚动条的宽度。edgeEffect 含义设置滚动边缘的效果。 可选值 EdgeEffect.None无效果。 EdgeEffect.Spring弹簧效果。 EdgeEffect.Fade阴影效果。
enableScrollInteractionAPI 10 含义设置是否支持滚动手势。 可选值 true支持滚动手势默认值。 false不支持滚动手势但不影响通过控制器接口进行的滚动。 frictionAPI 10 含义设置滚动时的摩擦力影响滚动的速度和惯性。
栗子:
Entry Component struct ArkUITest {build() {Scroll() {Text(Text1).fontSize(26).size({width: 180, height: 40}) // 子组件的高度小于Scroll高度不会触发滚动.backgroundColor(#aabbcc)}.width(100%).height(100).backgroundColor(Color.Pink)}
}
Entry Component struct ArkUITest {build() {Scroll() {// Scroll没有设置滚动方向默认竖直方向滚动Column() {Text(Text1).fontSize(26).size({width: 180, height: 90}).backgroundColor(#aabbcc)Text(Text2).fontSize(26).size({width: 180, height: 90}).backgroundColor(#bbccaa)Text(Text3).fontSize(26).size({width: 180, height: 90}).backgroundColor(#ccaabb)Text(Text4).fontSize(26).size({width: 180, height: 90}).backgroundColor(#abcabc)}.width(100%)}.width(230).height(200).backgroundColor(Color.Pink)}
}
控制器 可以通过创建Scroller的实例并将其绑定给Scroll组件来控制滚动。 控制器提供了多种方法来控制滚动如scrollTo滚动到指定位置、scrollEdge滚动到容器边缘、scrollPage滚动到下一页或上一页等。 滚动事件 onScrollAPI小于12时使用滚动事件回调返回滚动时水平、竖直方向偏移量。 onWillScrollAPI 12及以上时使用滚动回调返回滚动后的偏移量。
栗子:
Entry
Component
struct ScrollWithController {scroller: Scroller new Scroller();State isActive: boolean false;build() {Column() {Scroll(this.scroller) {Column() {// 放置多个子组件Text(Text1).fontSize(26).size({width: 180, height: 120}).backgroundColor(#aabbcc)Text(Text2).fontSize(26).size({width: 180, height: 120}).backgroundColor(#bbccaa)Text(Text3).fontSize(26).size({width: 180, height: 120}).backgroundColor(#ccaabb)Text(Text4).fontSize(26).size({width: 180, height: 120}).backgroundColor(#abcabc)Text(Text5).fontSize(26).size({width: 180, height: 120}).backgroundColor(#abcabc)Text(Text6).fontSize(26).size({width: 180, height: 120}).backgroundColor(#abcabc)Text(Text7).fontSize(26).size({width: 180, height: 120}).backgroundColor(#abcabc)Text(Text8).fontSize(26).size({width: 180, height: 120}).backgroundColor(#aabbcc)Text(Text9).fontSize(26).size({width: 180, height: 120}).backgroundColor(#bbccaa)Text(Text10).fontSize(26).size({width: 180, height: 120}).backgroundColor(#ccaabb)}}.scrollBar(BarState.On).scrollBarWidth(5).scrollBarColor(Color.Black).edgeEffect(EdgeEffect.Fade).onWillScroll(() {const yOffset this.scroller.currentOffset().yOffset;if (yOffset 400) {this.isActive true;} else {this.isActive false;}}).width(100%).height(100%);if (this.isActive) {Row({ space: 10 }) {Image($r(app.media.ic_jd_rocket)).height(30).width(30).onClick(() {this.scroller.scrollEdge(Edge.Top);});}.padding(5).width(40).height(40).borderRadius(20).backgroundColor(Color.White).margin({ bottom: 90, right: 30 });}}}
}
分析:这个示例中我们创建了一个Scroll组件并通过控制器来控制滚动。同时我们还使用了onWillScroll事件来监听滚动偏移量并根据偏移量来显示或隐藏一个返回顶部的按钮。当用户点击返回顶部按钮时控制器会将Scroll组件滚动到顶部。
