《HarmonyOS应用开发基础》 课件 实操 项目2-任务4 开发数据展示页_第1页
《HarmonyOS应用开发基础》 课件 实操 项目2-任务4 开发数据展示页_第2页
《HarmonyOS应用开发基础》 课件 实操 项目2-任务4 开发数据展示页_第3页
《HarmonyOS应用开发基础》 课件 实操 项目2-任务4 开发数据展示页_第4页
《HarmonyOS应用开发基础》 课件 实操 项目2-任务4 开发数据展示页_第5页
已阅读5页，还剩7页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务4开发数据展示页项目2走进ArkTS声明式开发任务4

开发数据展示页本任务使用Flex弹性布局、Stack层叠布局、进度条组件和滑动条组件，实现物联网App中常见的数据展示页的开发。任务描述任务效果图预览任务实施0102030504整理工程资源数据展示区的Flex布局设计调光灯带区设计用滑动条调节灯光亮度用Stack布局和进度条显示数据01整理工程资源

02数据展示区的Flex布局设计

页面最外层和数据展示区域都是用垂直方向的Flex布局，对齐方式有所不同，一个是在主轴上居中对齐，另一个是在交叉轴上起始端对齐。03调光灯带区设计

调光灯带的文字和分割线，直接放在数据显示区域的Flex布局下。因为Flex布局已设置好起始端对齐，因此可以实现靠左放置。04用Stack布局和进度条显示数据

数据的显示在Stack层叠布局中进行，使用Progress组件和显示数据的Text组件，Text叠放在Progress上面，对齐方式为居中，数据值使用滑动条的状态变量数据。05用滑动条调节灯光亮度

滑动条区域用Flex布局，不设置参数时默认为Row水平方向，从左到右排列亮度小图标->滑动条->亮度大图标，并在滑动条的事件处理中获取滑动值，记录到状态变量sliderVal中，从而实现滑动时，进度条的进度和显示的数据跟着改变。任务4开发数据展示页本任务使用Flex弹性布局、进度条和滑动条，实现了物联网App中常见的数据展示页面的开发。Flex可以弹性设置成Row与Column方向，与Row与Column在属性

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论