HarmonyOS APP - ScrollView体验与分享
ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。
这里我做了一个小案例，在ScrollView里面套ScrollView，当然我们也可以使用DirectionalLayout中的horizontal或者vertical属性控制图片滑动的方向这里使用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>
代码如下：
- <?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>
- rectionalLayout>
完整代码地址：
https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_ScrollView_component
HarmonyOS APP - Checkbox体验与分享
显示效果：
点击下面的选项
布局中的代码:
- <?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"
- ohos:left_padding="40px"
- ohos:top_padding="40vp">
- <DirectionalLayout
- ohos:height="match_content"
- ohos:width="match_parent"
- ohos:orientation="vertical">
- <Text
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text_size="18fp"
- ohos:text="下面哪个是水果?（多选）"/>
- <Text
- ohos:id="$+id:jltftext_answer"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:left_margin="20vp"
- ohos:text_size="20fp"
- ohos:text_color="#FF3333"
- ohos:text="[]" />
- </DirectionalLayout>
- <Checkbox
- ohos:id="$+id:jltfcheck_box_1"
- ohos:top_margin="40vp"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="A 苹果"
- ohos:text_size="20fp"
- ohos:text_color_on="#FF3333"
- ohos:text_color_off="#000000"/>
- <Checkbox
- ohos:id="$+id:jltfcheck_box_2"
- ohos:top_margin="40vp"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="B 香蕉"
- ohos:text_size="20fp"
- ohos:text_color_on="#FF3333"
- ohos:text_color_off="#000000"/>
- <Checkbox
- ohos:id="$+id:jltfcheck_box_3"
- ohos:top_margin="40vp"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="C 草莓"
- ohos:text_size="20fp"
- ohos:text_color_on="#FF3333"
- ohos:text_color_off="#000000" />
- <Checkbox
- ohos:id="$+id:jltfcheck_box_4"
- ohos:top_margin="40vp"
- ohos:height="match_content"
- ohos:width="match_content"
- ohos:text="D 土豆"
- ohos:text_size="20fp"
- ohos:text_color_on="#FF3333"
- ohos:text_color_off="black" />
- </DirectionalLayout>
完整代码地址：
https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_checkbox_component
