HarmonyOS应用开发基础课件：开发设备控制页.pptxVIP

开发设备控制页

走进ArkTS声明式开发

开发设备控制页

本任务使用线性布局、文字显示组件和图片组件，并配合组件的属性和样式，完成物联网App常见的设备控制页面的开发。

任务描述

任务效果图预览

任务实施

01

02

03

05

04

整理工程资源

设备控制页的UI结构分析

最外层的Column布局设计

设备位置区的Row布局设计

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

06

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

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组件，让“客厅空调”的文字显示实现居左摆放，同时增加一个下划线，突出位置的显示。

开发设备控制页

本任务综合利用线性布局的不同属性进行设备控制页的布局设计，并使用Text组件和Image组件进行了信息的显示。在开发过程中，用到的组件的公共属性时，读者可自行查阅CommonMethod的源码，找到需要设置的样式参数，设计出符合用户需求的UI。

任务小结