HarmonyOS ScrollView 使用

我不是女神ヾ 2022-09-05 12:39 298阅读 0赞

### ScrollView 介绍 ###

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

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

### ScrollView的自有XML属性 ###

1 match\_viewport 是否拉伸匹配 默认为false

2 rebound\_effect 回弹效果 默认为false

下面吐槽下这2个属性

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

![20210817225235488.gif][]

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

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

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

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

### ScrollView 使用注意 ###

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

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

垂直滑动还是水平滑动

垂直滑动

<?xml version="1.0" encoding="utf-8"?>
 <ScrollView
 xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:height="match_parent"
 ohos:width="match_parent"
 ohos:id="$+id:scroll">
 <DirectionalLayout
 ohos:height="match_content"
 ohos:width="match_content"
 ohos:orientation="vertical">
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos: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"?>
 <ScrollView
 xmlns:ohos="http://schemas.huawei.com/res/ohos"
 ohos:height="match_parent"
 ohos:width="match_parent"
 ohos:id="$+id:scroll">
 <DirectionalLayout
 ohos:height="match_content"
 ohos:width="match_content"
 ohos:orientation="horizontal">
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 
 <Image
 ohos:width="match_parent"
 ohos:height="200vp"
 ohos:top_margin="16vp"
 ohos:scale_mode="clip_center"
 ohos:image_src="$media:three"/>
 </DirectionalLayout>
 </ScrollView>

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

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

[官方参考地址][Link 1]

[20210817225235488.gif]: /images/20220829/f861480ebd4e46dc80dd3387c2d9666c.png
[Link 1]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-scrollview-0000001060965602