HarmonyOS之常用组件ScrollView的功能和使用

一、ScrollView 功能

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

二、支持的 XML 属性

• ScrollView 的共有 XML 属性继承自 StackLayout，StackLayout 详情请参考我的博客：HarmonyOS之常用布局StackLayout的使用。
• ScrollView 的自有 XML 属性见下表：

三、创建 ScrollView

• 在 layout 目录下的 xml 文件中创建 ScrollView，ScrollView 的展示需要布局支持，以 DirectionalLayout 为例，如下所示：

	<ScrollView
	    ohos: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">
	    <DirectionalLayout
	        ohos:height="match_content"
	        ohos:width="match_content">
	        <Image
	            ohos:width="300vp"
	            ohos:height="match_content"
	            ohos:top_margin="16vp"
	            ohos:image_src="$media:plant"/>
	        <!-- 放置任意需要展示的组件 -->
	        ...
	    </DirectionalLayout>
	</ScrollView>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

• ScrollView 效果如下：

三、设置 ScrollView

• ScrollView 的速度、滚动、回弹等常用接口如下：

• 根据像素数平滑滚动：

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

  

 

  
1
  
2
  
3
 

• 根据像素数平滑滚动效果如下：

• 平滑滚动到指定位置：

	scrollView.fluentScrollYTo(500);

  

 

  
1
 

• 平滑滚动到指定位置效果如下：

• 设置布局方向：ScrollView 自身没有设置布局方向的属性，所以需要在其子布局中设置，以横向布局 horizontal 为例：

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

• 设置布局方向为横向布局效果如下：

• 设置回弹效果
• • 在 xml 中设置：

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

  

 

  
1
  
2
  
3
  
4
  
5
 

• • 在 Java 代码中设置：

	scrollView.setReboundEffect(true);

  

 

  
1
 

• 开启回弹效果如下：

• 设置缩放匹配效果
• • 在 xml 中设置：

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

  

 

  
1
  
2
  
3
  
4
  
5
 

• • 在 Java 代码中设置：

	scrollView.setMatchViewportEnabled(true);

  

 

  
1
 

• 设置缩放匹配效果如下：

文章来源: blog.csdn.net，作者：Serendipity·y，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/Forever_wj/article/details/118306380