《HarmonyOS应用开发基础》 课件 实操 项目2-任务3 开发设备控制页.pptx

任务3开发设备控制页

项目2走进ArkTS声明式开发

任务3开发设备控制页

任

务本任务使用线性布局、文字显示组件和图片组件，

描

并配合组件的属性和样式，完成物联网App常见的设

述

备控制页面的开发。

任务效果图预览

任务实施

01整理工程资源

02设备控制页的UI结构分析

03最外层的Column布局设计

04设备控制区外框的Column布局设计

实施步骤

05设备位置区的Row布局设计

目录06设备状态信息区的设计与开发

contents

07设备控制区的设计与开发

08使用Blank和Divider组件

01整理工程资源

02设备控制页的UI结构分析

03最外层的Column布局设计

最外层用Column，宽高占满屏幕，

设置背景为灰色。

04设备控制区外框的Column布局设计

内层用于显示设备相关信息的区域，是一

个Column，限定了宽高和边框。边框使

用.border设置样式，支持设置边框颜色、

边框粗细、边框圆角以及边框的展示样式。

05设备位置区的Row布局设计

设备位置用Row布局，内嵌一

个Text组件，在主轴方向上靠

起始端对齐，设置内边距为10。

06设备状态信息区的设计与开发

设备状态信息用Text组件显示

文字，对齐方式为左对齐，最

多显示一行，当超出一行时进

行截断。

07设备控制区的设计与开发

设备控制区用Row布局，内嵌两个Image

图片组件，图片组件的权重点比为2:1；

给设备控制的图片组件添加事件处理，

当被点击时，反转标志位openFlag；两个

图片组件显示的图片根据标志位openFlag

进行图片切换。

08使用Blank和Divider组件

将设备位置区的Row布局设计，

由使用Row的对齐方式修改为使

用Blank组件，让“客厅空调”的

文字显示实现居左摆放，同时增

加一个下划线，突出位置的显示。

任务3开发设备控制页

任

务本任务综合利用线性布局的不同属性进行设备控制页的布局设

小计，并使用Text组件和Image组件进行了信息的显示。在开发过程

结中，用到的组件的公共属性时，读者可自行查阅CommonMethod

的源码，找到需要设置的样式参数，设计出符合用户需求的UI。

公司网址

公司地址1

北京市海淀区首体南路22号国兴大厦17层

公司地址2

福建省福州市马尾区儒江西路1号新大陆科技园

北京新大陆时代教育科技有限公司