HarmonyOS APP - ScrollView体验与分享原创

鸿蒙时代

发布于 2021-3-27 10:39

浏览

1收藏

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

这里我做了一个小案例，在ScrollView里面套ScrollView，当然我们也可以使用DirectionalLayout中的horizontal或者vertical属性控制图片滑动的方向这里使用ScrollView可以很方便的展示跟多的内容。

HarmonyOS APP - ScrollView体验与分享-鸿蒙开发者社区

<?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:orientation="vertical">
<DirectionalLayout
ohos:height="1800px"
ohos:width="match_parent"
ohos:orientation="vertical">
<ScrollView
ohos:height="match_parent"
ohos:width="match_parent">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent">
<Image
ohos:height="600px"
ohos:width="match_parent"
ohos:image_src="$media:tupian1"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="80px"
ohos:width="match_parent">
<Text
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text="颜色展示"
ohos:text_size="18fp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="700px"
ohos:width="match_parent"
ohos:orientation="vertical">
<ScrollView
ohos:height="match_parent"
ohos:width="match_parent">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:height="80px"
ohos:width="match_parent"
ohos:text="红色"
ohos:text_size="18fp"/>
<Image
ohos:height="match_content"
ohos:width="match_parent"
ohos:image_src="$media:red"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:height="80px"
ohos:width="match_parent"
ohos:text="蓝色"
ohos:text_size="18fp"/>
<Image
ohos:height="match_content"
ohos:width="match_parent"
ohos:image_src="$media:blue"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:height="80px"
ohos:width="match_parent"
ohos:text="黄色"
ohos:text_size="18fp"/>
<Image
ohos:height="match_content"
ohos:width="match_parent"
ohos:image_src="$media:yellow"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:height="80px"
ohos:width="match_parent"
ohos:text="粉色"
ohos:text_size="18fp"/>
<Image
ohos:height="match_content"
ohos:width="match_parent"
ohos:image_src="$media:pink"
/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<Text
ohos:height="80px"
ohos:width="match_parent"
ohos:text="绿色"
ohos:text_size="18fp"/>
<Image
ohos:height="match_content"
ohos:width="match_parent"
ohos:image_src="$media:grenn"
/>
</DirectionalLayout>

</DirectionalLayout>
</ScrollView>
</DirectionalLayout>
<DirectionalLayout
ohos:height="80px"
ohos:width="match_parent">
<Text
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text="图片展示"
ohos:text_size="18fp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="500px"
ohos:width="match_parent"
ohos:orientation="vertical">
<ScrollView
ohos:height="match_parent"
ohos:width="match_parent">
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="vertical">
<Image
ohos:height="match_parent"
ohos:width="match_parent"
ohos:image_src="$media:fengjing"/>
<Image
ohos:height="match_parent"
ohos:width="match_parent"
ohos:image_src="$media:mao"/>
<Image
ohos:height="match_parent"
ohos:width="match_parent"
ohos:image_src="$media:gou"/>
</DirectionalLayout>
</ScrollView>
</DirectionalLayout>
</DirectionalLayout>
</ScrollView>
</DirectionalLayout>
</DirectionalLayout>