0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-02-02 17:13 次阅读

主要开发内容

时间调节

使用全局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; }) }

实现效果如下:

制冷腔功能

点击按钮:制冷腔→蓄冷腔,14摄氏度→16摄氏度:

蓄冷腔功能

总结

该功能是基于手机、平板、智慧屏或智能穿戴的模板进行的开发,HarmonyOS提供了丰富的组件,通过全面系统的了解学习ArkTS API的调用,使用全局UI的方法定义日期滑动选择器弹窗并弹出和功能界面的切换。

本项目的目标是开发一个易于使用且功能强大的系统,用于时间管理和腔室温度转换。最主要的两个功能是利用鸿蒙具备分布架构、天生流畅、内核安全及生态互享等优势来完成该系统功能,通过鸿蒙框架使用全局UI方法实现时间的调节,利用组件实现功能切换。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • ui
    ui
    +关注

    关注

    0

    文章

    204

    浏览量

    21339
  • 鸿蒙
    +关注

    关注

    57

    文章

    2306

    浏览量

    42728
  • OpenHarmony
    +关注

    关注

    25

    文章

    3657

    浏览量

    16128
收藏 人收藏

    评论

    相关推荐

    鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0

    # 使用 Flutter SDK 3.22.0 ## SDK 安装 参考[鸿蒙Flutter实战:01-搭建开发环境]文章的说明,首先安装 Flutter SDK 3.22.0。 目前鸿
    发表于 11-01 15:03

    鸿蒙Flutter实战:08-如何调试代码

    # 鸿蒙Flutter实战:如何调试代码 ## 1.环境搭建 参考文章[鸿蒙Flutter实战:01-搭建开发环境](https://g
    发表于 10-23 16:29

    鸿蒙Flutter实战:07混合开发

    # 鸿蒙Flutter实战:混合开发 鸿蒙Flutter混合开发主要有两种形式。 ## 1.基于har 将flutter module
    发表于 10-23 16:00

    鸿蒙Flutter实战:05-使用第三方插件

    # 鸿蒙Flutter 实战:使用第三方插件 在鸿蒙Flutter开发中,如果涉及到使用原生功能,就要使用插件。使用插件有两种方式,一种是
    发表于 10-22 21:54

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发UI框架,提供如下两种开发范式,我们 **只学声明式开发
    的头像 发表于 05-13 16:06 794次阅读
    <b class='flag-5'>鸿蒙</b>ArkUI:【从代码到<b class='flag-5'>UI</b>显示的整体渲染流程】

    HarmonyOS实战开发-深度探索与打造个性化自定义组件

    今天分享一下 什么是自定义组件?及其自定义组件的实战。 做过前端或者android开发的都知道自定义组件,鸿蒙中显示在界面上的UI都称为组件,小打一个按钮,再到一个列表。
    发表于 05-08 16:30

    HarmonyOS实战开发-如何使用全局状态保留能力弹窗来实现评论组件。

    开发有帮助,我想邀请大家帮我三个小忙: 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。 关注小编,同时可以期待后续文章ing?,不定期分享原创知识。 更多鸿蒙最新技术知识点,请关注作者博客:鸿蒙
    发表于 05-07 15:06

    HarmonyOS实战开发-全局状态保留能力弹窗

    // 全局状态保留能力弹窗 模块依赖 不涉及 最后 如果大家觉得这篇内容对学习鸿蒙开发有帮助,我想邀请大家帮我三个小忙: 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。 关注小编,同时可以
    发表于 05-07 14:53

    鸿蒙OS开发实战:【自动化测试框架】使用指南

    为支撑HarmonyOS操作系统的自动化测试活动开展,我们提供了支持JS/TS语言的单元及UI测试框架,支持开发者针对应用接口进行单元测试,并且可基于UI操作进行UI自动化脚本的编写。
    的头像 发表于 04-08 14:49 1281次阅读
    <b class='flag-5'>鸿蒙</b>OS<b class='flag-5'>开发</b><b class='flag-5'>实战</b>:【自动化测试框架】使用指南

    鸿蒙实战应用开发:【拨打电话】功能

    |---model ||---Logger.ts // 日志工具 |---pages ||---Index.ets // 首页 具体实现 该示例展示拨打电话功能,dial方法拨打电话,可设置通话参数
    发表于 03-04 20:22

    鸿蒙实战项目开发:【短信服务】

    、OpenHarmony 多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发鸿蒙项目实战等等)鸿蒙(Harmony NEXT) 技术知识点 如果你是一名An
    发表于 03-03 21:29

    鸿蒙这么大声势,为何迟迟看不见岗位?最新数据来了

    联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了ArkTS语言、ArkUI声明式UI开发、Stage模型入门、OpenHarmony多媒体技术、
    发表于 02-29 20:53

    鸿蒙入门实战-ArkTS开发

    声明式UI基本概念 应用界面是由一个个页面组成,ArkTS是由ArkUI框架提供,用于以声明式开发范式开发界面的语言。 声明式UI构建页面的过程,其实是组合组件的过程,声明式
    发表于 01-16 17:27

    免费学习鸿蒙(HarmonyOS)开发,一些地址分享

    。 分别有ArkTS语言、ArkUI声明式UI开发、Stage模型、北向和南向的开发等等鸿蒙入门到实战的内容。
    发表于 01-12 20:48

    鸿蒙基础开发实战-(ArkTS)像素转换

    的使用。通过像素转换案例,向开发者讲解了如何使用像素单位设置组件的尺寸、字体的大小以及不同像素单位之间的转换方法。更多鸿蒙4.0的学习,可以前往主页学习或前往《鸿蒙4.0
    发表于 01-11 16:53