一、ScrollView 功能

• ScrollView 是一種帶滾動功能的組件，它采用滑動的方式在有限的區(qū)域內(nèi)顯示更多的內(nèi)容。

二、支持的 XML 屬性

• ScrollView 的共有 XML 屬性繼承自 StackLayout，StackLayout 詳情請參考我的博客：HarmonyOS之常用布局StackLayout的使用。
• ScrollView 的自有 XML 屬性見下表：

屬性名稱中文描述取值取值說明使用案例

match_viewport	是否拉伸匹配	boolean類型	可以直接設(shè)置true/false，也可以引用boolean資源	ohos:match_viewport=“true" ohos:match_viewport=”$boolean:true"
rebound_effect	回彈效果	boolean類型	可以直接設(shè)置true/false，也可以引用boolean資源	ohos:rebound_effect=“true" ohos:rebound_effect=”$boolean:true"

三、創(chuàng)建 ScrollView

• 在 layout 目錄下的 xml 文件中創(chuàng)建 ScrollView，ScrollView 的展示需要布局支持，以 DirectionalLayout 為例，如下所示：

<ScrollViewohos:id="$+id:scrollview"ohos:height="300vp"ohos:width="300vp"ohos:background_element="#FFDEAD"ohos:top_margin="32vp"ohos:bottom_padding="16vp"ohos:layout_alignment="horizontal_center"><DirectionalLayoutohos:height="match_content"ohos:width="match_content"><Imageohos:width="300vp"ohos:height="match_content"ohos:top_margin="16vp"ohos:image_src="$media:plant"/><!-- 放置任意需要展示的組件 -->...</DirectionalLayout></ScrollView>

• ScrollView 效果如下：

三、設(shè)置 ScrollView

• ScrollView 的速度、滾動、回彈等常用接口如下：

方法作用

doFling(int velocityX, int velocityY) doFlingX(int velocityX) doFlingY(int velocityY)	設(shè)置X軸和Y軸滾動的初始速度，單位（px）
fluentScrollBy(int dx, int dy) fluentScrollByX(int dx) fluentScrollByY(int dy)	沿坐標軸將內(nèi)容平滑地移動指定數(shù)量的像素，單位（px）
fluentScrollTo(int x, int y) fluentScrollXTo(int x) fluentScrollYTo(int y)	根據(jù)指定坐標平滑滾動到指定位置，單位（px）
setReboundEffect(boolean enabled)	設(shè)置是否啟用回彈效果，默認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：應(yīng)保持可見內(nèi)容的最小百分比，默認值20

• 根據(jù)像素數(shù)平滑滾動：

btnScroll.setClickedListener(component -> {scrollView.fluentScrollByY(300);});

• 根據(jù)像素數(shù)平滑滾動效果如下：

• 平滑滾動到指定位置：

scrollView.fluentScrollYTo(500);

• 平滑滾動到指定位置效果如下：

• 設(shè)置布局方向：ScrollView 自身沒有設(shè)置布局方向的屬性，所以需要在其子布局中設(shè)置，以橫向布局 horizontal 為例：

<ScrollView...><DirectionalLayout...ohos:orientation="horizontal">...</DirectionalLayout></Scrollview>

• 設(shè)置布局方向為橫向布局效果如下：

• 設(shè)置回彈效果
• • 在 xml 中設(shè)置：

<ScrollView...ohos:rebound_effect="true">...</ScrollView>

• • 在 Java 代碼中設(shè)置：

scrollView.setReboundEffect(true);

• 開啟回彈效果如下：

• 設(shè)置縮放匹配效果
• • 在 xml 中設(shè)置：

<ScrollView...ohos:match_viewport="true">...</ScrollView>

• • 在 Java 代碼中設(shè)置：

scrollView.setMatchViewportEnabled(true);

• 設(shè)置縮放匹配效果如下：

總結(jié)

以上是生活随笔為你收集整理的HarmonyOS之常用组件ScrollView的功能和使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。