ScrollView组件

• ScrollView组件
  • 简述
    • 支持的XML属性
  • 示例说明
    • 示例一
    • 示例二
  • 相关资料

简述

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

支持的XML属性

ScrollView的共有XML属性继承自：[StackLayout](../[05]Java UI 布局/[06]StackLayout堆叠布局.md)

ScrollView的自有XML属性见下表：

示例说明

示例一

• 图片

  

• xml部分

  <?xml version="1.0" encoding="utf-8"?>
  <DirectionalLayout
      xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:height="match_parent"
      ohos:width="match_parent"
      ohos:alignment="center"
      ohos:orientation="vertical">
  
      <!--  文字示例  -->
      <ScrollView
          ohos:height="match_content"
          ohos:width="match_content"
          ohos:padding="20vp"
          ohos:rebound_effect="true"
          >
  
          <Text
              ohos:height="match_content"
              ohos:width="match_content"
              ohos:multiple_lines="true"
              ohos:text="$string:ren_ming_ru_cao_jian"
              ohos:text_size="20fp"
              />
      </ScrollView>
      
  </DirectionalLayout>

示例二

• 图片

  

• xml部分

  <?xml version="1.0" encoding="utf-8"?>
  <DirectionalLayout
      xmlns:ohos="http://schemas.huawei.com/res/ohos"
      ohos:height="match_parent"
      ohos:width="match_parent"
      ohos:alignment="center"
      ohos:orientation="vertical">
      
      <!--  图片示例  -->
      <ScrollView
          ohos:height="match_content"
          ohos:width="match_content"
          ohos:rebound_effect="true"
          >
          <!--        ohos:visibility="hide">-->
  
          <DirectionalLayout
              ohos:height="match_content"
              ohos:width="match_content"
              ohos:alignment="vertical_center"
              ohos:orientation="vertical">
  
              <Image
                  ohos:height="280vp"
                  ohos:width="280vp"
                  ohos:background_element="#f3d"
                  ohos:image_src="$media:1"
                  ohos:margin="10vp"
                  ohos:padding="5vp"/>
  
              <Image
                  ohos:height="280vp"
                  ohos:width="280vp"
                  ohos:background_element="#f3d"
                  ohos:image_src="$media:1"
                  ohos:margin="10vp"
                  ohos:padding="5vp"/>
  
              <Image
                  ohos:height="280vp"
                  ohos:width="280vp"
                  ohos:background_element="#f3d"
                  ohos:image_src="$media:1"
                  ohos:margin="10vp"
                  ohos:padding="5vp"/>
  
              <Image
                  ohos:height="280vp"
                  ohos:width="280vp"
                  ohos:background_element="#f3d"
                  ohos:image_src="$media:1"
                  ohos:margin="10vp"
                  ohos:padding="5vp"/>
  
          </DirectionalLayout>
      </ScrollView>
  
  </DirectionalLayout>

相关资料

• 官网

• demo代码