鸿蒙实战开发-全局UI方法的功能

主要开发内容

时间调节

使用全局UI的方法定义日期滑动选择器弹窗并弹出。
操作说明：首先创建一个包含按钮的用户界面，当用户点击“时间设置”按钮时，会弹出调用TimePickerDialog组件的show方法，显示一个时间选择对话框，用户进行选择时间后，该选择会被传递给前一个界面进行处理。

Column({space:30}){Flex({direction: FlexDirection.Row, alignItems: ItemAlign.Center,justifyContent: FlexAlign.Center }) {Button("时间设置").fontColor(Color.Black).backgroundColor('#D5D8FF').onClick(() => {TimePickerDialog.show({useMilitaryTime: this.isUseMilitaryTime,onAccept: (value: TimePickerResult) => {console.info("时间设置:onAccept()" + JSON.stringify(value))},onCancel: () => {console.info("时间设置:onCancel()")},onChange: (value: TimePickerResult) => {console.info("时间设置:onChange()" + JSON.stringify(value))}})})}

实现效果如下：

时间设置功能

功能切换

使用UI组件和方法实现功能界面的切换。
操作说明：通过this.isComplete的布尔值进行条件渲染和改变界面。
首先：进行判断this.isComplete的值，若该条件为true，进行“制冷腔”文本标签的显示。

if (this.isComplete){Button("制冷腔").width(120).height(37).fontColor('#410980').backgroundColor('#D5D8FF').borderColor('#380980').borderStyle(BorderStyle.Solid).borderRadius(23).borderWidth(2).width(120).opacity(0.7)
}

若条件为false，进行显示另一个文本“蓄冷腔”，通过之后获取this.isComplete的值实现两个文本间的切换和显示，且两个文本渲染和位置相同。

else {Button("蓄冷腔").width(120).height(37).fontColor('#410980').backgroundColor('#D5D8FF').borderColor('#380980').borderStyle(BorderStyle.Solid).borderRadius(23).borderWidth(2).width(120).opacity(0.7)
}

接下来：通过Column和Row组件将“14摄氏度”和“16摄氏度”水平放置，这两个文本组件的颜色会根据this.isComplete的值改变，但改变的方式与下述按钮不同，实现两个文本的左右颜色的切换而不是在原位置实现的文本覆盖。

Column({space:15}){Row({space:50}){Text("14摄氏度").fontSize(20).fontColor(this.isComplete? '#ff2489ac' : Color.Black )Text("16摄氏度").fontSize(20).fontColor(this.isComplete? Color.Black : '#ff2489ac')}

最后，设置按钮，显示“腔室切换”，当点击时，会将this.isComplete的值取反（如果之前是true，则变为false，反之亦然），同时代码中的.onClick方法是一个事件监听器，它会在按钮被点击时执行给定的函数，这个函数将this.isComplete的值切换。

Button("切换腔室",{type:ButtonType.Normal}).borderRadius(60).borderRadius(8).fontColor('#064A62').backgroundColor('#ffd3bff3').onClick(() => {this.isComplete= !this.isComplete;})
}

实现效果如下：