那曲檬骨新材料有限公司

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

    瀏覽量

    21419
  • 鴻蒙
    +關注

    關注

    57

    文章

    2392

    瀏覽量

    43058
  • OpenHarmony
    +關注

    關注

    25

    文章

    3747

    瀏覽量

    16589
收藏 人收藏

    評論

    相關推薦

    【書籍評測活動NO.56】極速探索HarmonyOS NEXT:純血鴻蒙應用開發實踐

    了解并掌握鴻蒙開發的核心技術,以及鴻蒙應用在實際開發中的應用方法。 本書共分為四篇,共計16章,分別為
    發表于 01-20 16:53

    鴻蒙Flutter實戰:14-現有Flutter 項目支持鴻蒙 II

    分別安裝官方的3.22版本,以及鴻蒙社區的 3.22.0 版本 3.搭建 Flutter鴻蒙開發環境 參考文章《鴻蒙Flutter實戰:0
    發表于 12-26 14:59

    鴻蒙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 ?1026次閱讀
    <b class='flag-5'>鴻蒙</b>ArkUI:【從代碼到<b class='flag-5'>UI</b>顯示的整體渲染流程】

    HarmonyOS實戰開發-深度探索與打造個性化自定義組件

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

    HarmonyOS實戰開發-全局彈窗封裝案例

    這篇內容對學習鴻蒙開發有幫助,我想邀請大家幫我三個小忙: 點贊,轉發,有你們的 『點贊和評論』,才是我創造的動力。 關注小編,同時可以期待后續文章ing?,不定期分享原創知識。 更多鴻蒙最新技術知識點,請關注作者博客:
    發表于 05-08 15:51

    HarmonyOS實戰開發-如何使用全局狀態保留能力彈窗來實現評論組件。

    開發有幫助,我想邀請大家幫我三個小忙: 點贊,轉發,有你們的 『點贊和評論』,才是我創造的動力。 關注小編,同時可以期待后續文章ing?,不定期分享原創知識。 更多鴻蒙最新技術知識點,請關注作者博客:鴻蒙
    發表于 05-07 15:06

    HarmonyOS實戰開發-全局狀態保留能力彈窗

    // 全局狀態保留能力彈窗 模塊依賴 不涉及 最后 如果大家覺得這篇內容對學習鴻蒙開發有幫助,我想邀請大家幫我三個小忙: 點贊,轉發,有你們的 『點贊和評論』,才是我創造的動力。 關注小編,同時可以
    發表于 05-07 14:53

    鴻蒙OS開發實戰:【自動化測試框架】使用指南

    為支撐HarmonyOS操作系統的自動化測試活動開展,我們提供了支持JS/TS語言的單元及UI測試框架,支持開發者針對應用接口進行單元測試,并且可基于UI操作進行UI自動化腳本的編寫。
    的頭像 發表于 04-08 14:49 ?1547次閱讀
    <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
    百家乐官网技术秘籍| 百家乐官网销售视频| 大发888老虎机平台| 帝王百家乐新足球平台| 百家乐官网透视牌靴价格| 百家乐官网游戏百家乐官网| 凯斯娱乐城| 永利高平台| 网上百家乐游戏下载| 百家乐资金注码| 巴西百家乐官网的玩法技巧和规则 | 大赢家博彩网| 大发888官方下载 网站| 运城百家乐的玩法技巧和规则| 百家乐太阳城菲律宾| 百家乐数据程序| 聚龍社百家乐官网的玩法技巧和规则| 百家乐官网透视牌靴哪里有| 优博在线娱乐| 太阳城百家乐游戏| 大发888真钱棋牌软件| 威尼斯人娱乐城提款| 百家乐永利娱乐平台| 游戏百家乐庄闲| 百家乐赌具哪里最好| 百家乐真钱牌九| 百家乐官网电子| 百家乐官网大| 财神百家乐官网的玩法技巧和规则 | 百家乐vshow| 百家乐赌博游戏平台| 百家乐游戏分析| 24山向内什么山向最好| 正品百家乐官网的玩法技巧和规则| 澳门百家乐官网单注下注| 狮威百家乐官网娱乐网| 百家乐官网变牌器批发| 极速百家乐官网真人视讯| 澳门百家乐官网赌客| 棋牌百家乐官网赢钱经验技巧评测网 | 新葡京国际娱乐城|