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"?>
<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的速度、滚动、回弹等常用接口
方法 | 作用 |
---|---|
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 |