HarmonyOS ScrollView 使用

ScrollView 介绍

ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。

本来很简单的不打算记录,但是各种坑啊,哎.现在学习大致了解就行,

ScrollView的自有XML属性

1 match_viewport 是否拉伸匹配默认为false

2 rebound_effect 回弹效果默认为false

下面吐槽下这2个属性

match_viewport 这个属性感觉有bug ,说下感受呢,当ScrollView 不设置属性时候,无论是文字还是图片当宽度大于屏幕的宽度的时候,设置ScrollView为水平滚动的方向,但是这个时候左右也是可以滑动的如果不理解看下面的效果图

这个时候设置match_viewport 为true 就不存这个问题,设置之后图片子组件填充满ScrollView

但是却怎么也不滑动了,希望后面能修复吧,或者就是自己其他的地方没有设置

2 rebound_effect 这个属性设置回弹,设置之后有回弹但是不能滚动了,这里就上传gif图片了

录制了2个现在csdn有限制大小总是上传不了.

ScrollView 使用注意

ScrollView 属性里面字内容不能有多个否则也滑动不了,所以可以在字内容外写一个布局包含

要滑动的内容一般都是使用DirectionalLayout 相当于线性布局,通过设置orientation来控制是

垂直滑动还是水平滑动

垂直滑动

<?xml version="1.0" encoding="utf-8"?>
<ScrollViewxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:id="$+id:scroll"><DirectionalLayoutohos:height="match_content"ohos:width="match_content"ohos:orientation="vertical"><Imageohos:width="match_parent"ohos:height="200vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/></DirectionalLayout>
</ScrollView>

水平滑动

<?xml version="1.0" encoding="utf-8"?>
<ScrollViewxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:id="$+id:scroll"><DirectionalLayoutohos:height="match_content"ohos:width="match_content"ohos:orientation="horizontal"><Imageohos:width="match_parent"ohos:height="200vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/><Imageohos:width="match_parent"ohos:height="200vp"ohos:top_margin="16vp"ohos:scale_mode="clip_center"ohos:image_src="$media:three"/></DirectionalLayout>
</ScrollView>

ScrollView的速度、滚动、回弹等常用接口

方法	作用
doFling(int velocityX, int velocityY) doFlingX(int velocityX) doFlingY(int velocityY)	设置X轴和Y轴滚动的初始速度，单位（px）
fluentScrollBy(int dx, int dy) fluentScrollByX(int dx) fluentScrollByY(int dy)	沿坐标轴将内容平滑地移动指定数量的像素，单位（px）
fluentScrollTo(int x, int y) fluentScrollXTo(int x) fluentScrollYTo(int y)	根据指定坐标平滑滚动到指定位置，单位（px）
setReboundEffect(boolean enabled)	设置是否启用回弹效果，默认false
setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent) setReboundEffectParams(ReboundEffectParams reboundEffectParams) setOverscrollPercent(int overscrollPercent) setOverscrollRate(float overscrollRate) setRemainVisiblePercent(int remainVisiblePercent)	配置回弹效果 overscrollPercent：过度滚动百分比，默认值40 overscrollRate：过度滚动率，默认值0.6 remainVisiblePercent：应保持可见内容的最小百分比，默认值20

官方参考地址