0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識你,還能領(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)容

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

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

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

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

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

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攝氏度”水平放置,這兩個文本組件的顏色會根據(jù)this.isComplete的值改變,但改變的方式與下述按鈕不同,實(shí)現(xiàn)兩個文本的左右顏色的切換而不是在原位置實(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)擊時,會將this.isComplete的值取反(如果之前是true,則變?yōu)閒alse,反之亦然),同時代碼中的.onClick方法是一個事件監(jiān)聽器,它會在按鈕被點(diǎn)擊時執(zhí)行給定的函數(shù),這個函數(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的方法定義日期滑動選擇器彈窗并彈出和功能界面的切換。

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

審核編輯 黃宇

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

    關(guān)注

    0

    文章

    203

    瀏覽量

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

    關(guān)注

    57

    文章

    2302

    瀏覽量

    42689
  • OpenHarmony
    +關(guān)注

    關(guān)注

    25

    文章

    3641

    瀏覽量

    16061
收藏 人收藏

    評論

    相關(guān)推薦

    鴻蒙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

    鴻蒙ArkUI:【從代碼到UI顯示的整體渲染流程】

    方舟開發(fā)框架(簡稱ArkUI)是鴻蒙開發(fā)UI框架,提供如下兩種開發(fā)范式,我們 **只學(xué)聲明式開發(fā)
    的頭像 發(fā)表于 05-13 16:06 ?770次閱讀
    <b class='flag-5'>鴻蒙</b>ArkUI:【從代碼到<b class='flag-5'>UI</b>顯示的整體渲染流程】

    HarmonyOS實(shí)戰(zhàn)開發(fā)-深度探索與打造個性化自定義組件

    今天分享一下 什么是自定義組件?及其自定義組件的實(shí)戰(zhàn)。 做過前端或者android開發(fā)的都知道自定義組件,鴻蒙中顯示在界面上的UI都稱為組件,小打一個按鈕,再到一個列表。
    發(fā)表于 05-08 16:30

    HarmonyOS實(shí)戰(zhàn)開發(fā)-如何使用全局狀態(tài)保留能力彈窗來實(shí)現(xiàn)評論組件。

    開發(fā)有幫助,我想邀請大家?guī)臀胰齻€小忙: 點(diǎn)贊,轉(zhuǎn)發(fā),有你們的 『點(diǎn)贊和評論』,才是我創(chuàng)造的動力。 關(guān)注小編,同時可以期待后續(xù)文章ing?,不定期分享原創(chuàng)知識。 更多鴻蒙最新技術(shù)知識點(diǎn),請關(guān)注作者博客:鴻蒙
    發(fā)表于 05-07 15:06

    HarmonyOS實(shí)戰(zhàn)開發(fā)-全局狀態(tài)保留能力彈窗

    // 全局狀態(tài)保留能力彈窗 模塊依賴 不涉及 最后 如果大家覺得這篇內(nèi)容對學(xué)習(xí)鴻蒙開發(fā)有幫助,我想邀請大家?guī)臀胰齻€小忙: 點(diǎn)贊,轉(zhuǎn)發(fā),有你們的 『點(diǎn)贊和評論』,才是我創(chuàng)造的動力。 關(guān)注小編,同時可以
    發(fā)表于 05-07 14:53

    鴻蒙OS開發(fā)實(shí)戰(zhàn):【自動化測試框架】使用指南

    為支撐HarmonyOS操作系統(tǒng)的自動化測試活動開展,我們提供了支持JS/TS語言的單元及UI測試框架,支持開發(fā)者針對應(yīng)用接口進(jìn)行單元測試,并且可基于UI操作進(jìn)行UI自動化腳本的編寫。
    的頭像 發(fā)表于 04-08 14:49 ?1244次閱讀
    <b class='flag-5'>鴻蒙</b>OS<b class='flag-5'>開發(fā)</b><b class='flag-5'>實(shí)戰(zhàn)</b>:【自動化測試框架】使用指南

    鴻蒙實(shí)戰(zhàn)應(yīng)用開發(fā):【撥打電話】功能

    |---model ||---Logger.ts // 日志工具 |---pages ||---Index.ets // 首頁 具體實(shí)現(xiàn) 該示例展示撥打電話功能,dial方法撥打電話,可設(shè)置通話參數(shù)
    發(fā)表于 03-04 20:22

    鴻蒙實(shí)戰(zhàn)項(xiàng)目開發(fā):【短信服務(wù)】

    、OpenHarmony 多媒體技術(shù)、Napi組件、OpenHarmony內(nèi)核、Harmony南向開發(fā)、鴻蒙項(xiàng)目實(shí)戰(zhàn)等等)鴻蒙(Harmony NEXT) 技術(shù)知識點(diǎn) 如果你是一名An
    發(fā)表于 03-03 21:29

    鴻蒙這么大聲勢,為何遲遲看不見崗位?最新數(shù)據(jù)來了

    聯(lián)合打造的《鴻蒙NEXT星河版OpenHarmony開發(fā)文檔》里面內(nèi)容包含了ArkTS語言、ArkUI聲明式UI開發(fā)、Stage模型入門、OpenHarmony多媒體技術(shù)、
    發(fā)表于 02-29 20:53

    鴻蒙入門實(shí)戰(zhàn)-ArkTS開發(fā)

    聲明式UI基本概念 應(yīng)用界面是由一個個頁面組成,ArkTS是由ArkUI框架提供,用于以聲明式開發(fā)范式開發(fā)界面的語言。 聲明式UI構(gòu)建頁面的過程,其實(shí)是組合組件的過程,聲明式
    發(fā)表于 01-16 17:27

    免費(fèi)學(xué)習(xí)鴻蒙(HarmonyOS)開發(fā),一些地址分享

    。 分別有ArkTS語言、ArkUI聲明式UI開發(fā)、Stage模型、北向和南向的開發(fā)等等鴻蒙入門到實(shí)戰(zhàn)的內(nèi)容。
    發(fā)表于 01-12 20:48

    鴻蒙基礎(chǔ)開發(fā)實(shí)戰(zhàn)-(ArkTS)像素轉(zhuǎn)換

    的使用。通過像素轉(zhuǎn)換案例,向開發(fā)者講解了如何使用像素單位設(shè)置組件的尺寸、字體的大小以及不同像素單位之間的轉(zhuǎn)換方法。更多鴻蒙4.0的學(xué)習(xí),可以前往主頁學(xué)習(xí)或前往《鴻蒙4.0
    發(fā)表于 01-11 16:53