0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
电子发烧友
开通电子发烧友VIP会员 尊享10大特权
海量资料免费下载
精品直播免费看
优质内容免费畅学
课程9折专享价
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙實(shí)戰(zhàn)開發(fā)-全局UI方法的功能

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-02-02 17:13 ? 次閱讀

主要開發(fā)內(nèi)容

時(shí)間調(diào)節(jié)

使用全局UI的方法定義日期滑動(dòng)選擇器彈窗并彈出。
操作說明:首先創(chuàng)建一個(gè)包含按鈕的用戶界面,當(dāng)用戶點(diǎn)擊“時(shí)間設(shè)置”按鈕時(shí),會(huì)彈出調(diào)用TimePickerDialog組件的show方法,顯示一個(gè)時(shí)間選擇對(duì)話框,用戶進(jìn)行選擇時(shí)間后,該選擇會(huì)被傳遞給前一個(gè)界面進(jìn)行處理。

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

實(shí)現(xiàn)效果如下:

時(shí)間設(shè)置功能

功能切換

使用UI組件和方法實(shí)現(xiàn)功能界面的切換。
操作說明:通過this.isComplete的布爾值進(jìn)行條件渲染和改變界面。
首先:進(jìn)行判斷this.isComplete的值,若該條件為true,進(jìn)行“制冷腔”文本標(biāo)簽的顯示。

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,進(jìn)行顯示另一個(gè)文本“蓄冷腔”,通過之后獲取this.isComplete的值實(shí)現(xiàn)兩個(gè)文本間的切換和顯示,且兩個(gè)文本渲染和位置相同。

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攝氏度”水平放置,這兩個(gè)文本組件的顏色會(huì)根據(jù)this.isComplete的值改變,但改變的方式與下述按鈕不同,實(shí)現(xiàn)兩個(gè)文本的左右顏色的切換而不是在原位置實(shí)現(xiàn)的文本覆蓋。

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') }

最后,設(shè)置按鈕,顯示“腔室切換”,當(dāng)點(diǎn)擊時(shí),會(huì)將this.isComplete的值取反(如果之前是true,則變?yōu)閒alse,反之亦然),同時(shí)代碼中的.onClick方法是一個(gè)事件監(jiān)聽器,它會(huì)在按鈕被點(diǎn)擊時(shí)執(zhí)行給定的函數(shù),這個(gè)函數(shù)將this.isComplete的值切換。

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

實(shí)現(xiàn)效果如下:

制冷腔功能

點(diǎn)擊按鈕:制冷腔→蓄冷腔,14攝氏度→16攝氏度:

蓄冷腔功能

總結(jié)

該功能是基于手機(jī)、平板、智慧屏或智能穿戴的模板進(jìn)行的開發(fā),HarmonyOS提供了豐富的組件,通過全面系統(tǒng)的了解學(xué)習(xí)ArkTS API的調(diào)用,使用全局UI的方法定義日期滑動(dòng)選擇器彈窗并彈出和功能界面的切換。

本項(xiàng)目的目標(biāo)是開發(fā)一個(gè)易于使用且功能強(qiáng)大的系統(tǒng),用于時(shí)間管理和腔室溫度轉(zhuǎn)換。最主要的兩個(gè)功能是利用鴻蒙具備分布架構(gòu)、天生流暢、內(nèi)核安全及生態(tài)互享等優(yōu)勢(shì)來完成該系統(tǒng)功能,通過鴻蒙框架使用全局UI方法實(shí)現(xiàn)時(shí)間的調(diào)節(jié),利用組件實(shí)現(xiàn)功能切換。

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • ui
    ui
    +關(guān)注

    關(guān)注

    0

    文章

    206

    瀏覽量

    21698
  • 鴻蒙
    +關(guān)注

    關(guān)注

    59

    文章

    2538

    瀏覽量

    43818
  • OpenHarmony
    +關(guān)注

    關(guān)注

    28

    文章

    3838

    瀏覽量

    18230
收藏 0人收藏

    評(píng)論

    相關(guān)推薦
    熱點(diǎn)推薦

    鴻蒙5開發(fā)寶藏案例分享---瀑布流優(yōu)化實(shí)戰(zhàn)分享

    以下是根據(jù)鴻蒙官方瀑布流優(yōu)化案例整理的非官方技術(shù)分享,結(jié)合開發(fā)實(shí)戰(zhàn)經(jīng)驗(yàn)重新解讀,加入更多場(chǎng)景分析和代碼示例: ?** 鴻蒙瀑布流性能優(yōu)化實(shí)戰(zhàn)
    發(fā)表于 06-12 17:41

    鴻蒙5開發(fā)寶藏案例分享---內(nèi)存優(yōu)化實(shí)戰(zhàn)指南

    好的,沒問題!發(fā)現(xiàn)官方寶藏確實(shí)讓人興奮,這就幫你整理一篇更詳細(xì)、更接地氣的鴻蒙內(nèi)存優(yōu)化實(shí)戰(zhàn)指南,結(jié)合官方文檔的精華,加點(diǎn)“私貨”和代碼示例,咱們好好聊聊! 標(biāo)題:鴻蒙開發(fā)隱藏寶藏!內(nèi)存
    發(fā)表于 06-12 17:15

    鴻蒙5開發(fā)寶藏案例分享---性能優(yōu)化案例解析

    鴻蒙性能優(yōu)化寶藏指南:實(shí)戰(zhàn)工具與代碼案例解析 大家好呀!今天在翻鴻蒙開發(fā)者文檔時(shí),意外挖到一個(gè) 性能優(yōu)化寶藏庫 ——原來官方早就提供了超多實(shí)用工具和案例,但很多小伙伴可能沒發(fā)現(xiàn)!這篇就
    發(fā)表于 06-12 16:36

    鴻蒙5開發(fā)寶藏案例分享---埋點(diǎn)開發(fā)實(shí)戰(zhàn)指南

    鴻蒙埋點(diǎn)開發(fā)寶藏指南:官方案例實(shí)戰(zhàn)解析,輕松搞定數(shù)據(jù)追蹤! 大家好呀!我是HarmonyOS開發(fā)路上的探索者。最近在折騰應(yīng)用埋點(diǎn)時(shí),意外發(fā)現(xiàn)了鴻蒙
    發(fā)表于 06-12 16:30

    鴻蒙5開發(fā)寶藏案例分享---切面編程實(shí)戰(zhàn)揭秘

    鴻蒙切面編程(AOP)實(shí)戰(zhàn)指南:隱藏的寶藏功能大揭秘! 大家好!今天在翻鴻蒙開發(fā)者文檔時(shí),意外發(fā)現(xiàn)了官方埋藏的「切面編程」寶藏案例!實(shí)際
    發(fā)表于 06-12 16:21

    鴻蒙5開發(fā)寶藏案例分享---應(yīng)用架構(gòu)實(shí)戰(zhàn)技巧

    鴻蒙應(yīng)用架構(gòu)實(shí)戰(zhàn):分層設(shè)計(jì)與線程通信詳解 大家好! 今天咱們聊聊鴻蒙開發(fā)中那些“官方文檔提了但實(shí)際開發(fā)難找”的架構(gòu)設(shè)計(jì)技巧。結(jié)合官方文檔(鏈
    發(fā)表于 06-12 16:14

    KaihongOS筆記本電腦開發(fā)實(shí)戰(zhàn)第九節(jié):全功能TypeC驅(qū)動(dòng)框架適配

    《手把手教你做PC》系列直播課再度開播 !《 KaihongOS筆記本電腦開發(fā)實(shí)戰(zhàn)第九節(jié)九:全功能TypeC驅(qū)動(dòng)框架適配》將于5月21日19:00開播 ↑掃碼入群,領(lǐng)課程講義資料包↑ 深開鴻資深
    發(fā)表于 05-19 18:29

    DevEco Studio AI輔助開發(fā)工具兩大升級(jí)功能 鴻蒙應(yīng)用開發(fā)效率再提升

    HarmonyOS應(yīng)用的AI智能輔助開發(fā)助手——CodeGenie,該AI助手深度集成在DevEco Studio中,提供鴻蒙知識(shí)智能問答、鴻蒙ArkTS代碼補(bǔ)全/生成和萬能卡片生成等功能
    發(fā)表于 04-18 14:43

    DialogHub上線OpenHarmony開源社區(qū),高效開發(fā)鴻蒙應(yīng)用彈窗

    作為鴻蒙應(yīng)用開發(fā)者,在使用ArkUI現(xiàn)有能力進(jìn)行彈窗開發(fā)時(shí),總會(huì)遇到一些讓人糾結(jié)的交互問題:應(yīng)用內(nèi)進(jìn)行消息提示時(shí),既要求消息內(nèi)容支持圖文混排,又要求彈窗本身不能打斷用戶交互(頁面滑動(dòng)、頁面
    發(fā)表于 04-03 17:30

    名單公布!【書籍評(píng)測(cè)活動(dòng)NO.56】極速探索HarmonyOS NEXT:純血鴻蒙應(yīng)用開發(fā)實(shí)踐

    開發(fā)的核心技術(shù),以及鴻蒙應(yīng)用在實(shí)際開發(fā)中的應(yīng)用方法。 本書共分為四篇,共計(jì)16章,分別為鴻蒙開發(fā)
    發(fā)表于 01-20 16:53

    鴻蒙Flutter實(shí)戰(zhàn):14-現(xiàn)有Flutter 項(xiàng)目支持鴻蒙 II

    分別安裝官方的3.22版本,以及鴻蒙社區(qū)的 3.22.0 版本 3.搭建 Flutter鴻蒙開發(fā)環(huán)境 參考文章《鴻蒙Flutter實(shí)戰(zhàn):0
    發(fā)表于 12-26 14:59

    鴻蒙Flutter實(shí)戰(zhàn):11-使用 Flutter SDK 3.22.0

    # 使用 Flutter SDK 3.22.0 ## SDK 安裝 參考[鴻蒙Flutter實(shí)戰(zhàn):01-搭建開發(fā)環(huán)境]文章的說明,首先安裝 Flutter SDK 3.22.0。 目前
    發(fā)表于 11-01 15:03

    鴻蒙Flutter實(shí)戰(zhàn):08-如何調(diào)試代碼

    # 鴻蒙Flutter實(shí)戰(zhàn):如何調(diào)試代碼 ## 1.環(huán)境搭建 參考文章[鴻蒙Flutter實(shí)戰(zhàn):01-搭建開發(fā)環(huán)境](https://g
    發(fā)表于 10-23 16:29

    鴻蒙Flutter實(shí)戰(zhàn):07混合開發(fā)

    # 鴻蒙Flutter實(shí)戰(zhàn):混合開發(fā) 鴻蒙Flutter混合開發(fā)主要有兩種形式。 ## 1.基于har 將flutter module
    發(fā)表于 10-23 16:00

    鴻蒙Flutter實(shí)戰(zhàn):05-使用第三方插件

    # 鴻蒙Flutter 實(shí)戰(zhàn):使用第三方插件 在鴻蒙Flutter開發(fā)中,如果涉及到使用原生功能,就要使用插件。使用插件有兩種方式,一種是
    發(fā)表于 10-22 21:54

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會(huì)員交流學(xué)習(xí)
    • 獲取您個(gè)性化的科技前沿技術(shù)信息
    • 參加活動(dòng)獲取豐厚的禮品