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

?官方參考地址

總結

以上是生活随笔為你收集整理的HarmonyOS ScrollView 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。