鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程 課件 劉正 單元3-HarmonyOS開(kāi)發(fā)基礎(chǔ)知識(shí)；單元4-UI開(kāi)發(fā)之基礎(chǔ)組件；單元5-UI開(kāi)發(fā)之容器組件

《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》HarmonyOS開(kāi)發(fā)基礎(chǔ)知識(shí)《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》鴻蒙應(yīng)用開(kāi)發(fā)之--ArkTS簡(jiǎn)介目錄12ArkTS的起源什么是ArkTS？3ArkTS的演進(jìn)什么是ArkTS？01ArkTS簡(jiǎn)介ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開(kāi)發(fā)語(yǔ)言。ArkTS圍繞應(yīng)用開(kāi)發(fā)在TypeScript（簡(jiǎn)稱(chēng)TS）生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展，繼承了TS的所有特性，是TS的超集。網(wǎng)址：/consumer/cn/arktsArkTS的起源02ArkTS的起源JavaScript（JS）Mozilla創(chuàng)造了JSTypeScript（TS）Microsoft創(chuàng)建了TSArkTSHuawei進(jìn)一步推出了ArkTSArkTS的演進(jìn)03ArkTS的演進(jìn)2019.82022.112020.92023.1鴻蒙操作系統(tǒng)正式發(fā)布鴻蒙系統(tǒng)升級(jí)至HarmonyOS2.0ArkTS正式發(fā)布？ArkTS得到廣泛應(yīng)用總結(jié)ArkTS是HarmonyOS的應(yīng)用開(kāi)發(fā)語(yǔ)言。ArkTS、TypeScript和JavaScript三者之間的關(guān)系。以教材學(xué)習(xí)為主，官網(wǎng)學(xué)習(xí)資料為輔，進(jìn)一步深入學(xué)習(xí)ArkTS。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》鴻蒙應(yīng)用開(kāi)發(fā)之—ArkTS基礎(chǔ)語(yǔ)法目錄123裝飾器自定義組件引言4UI描述引言01引言編碼規(guī)范ArkTS遵循一定的編碼規(guī)范，包括命名規(guī)范、縮進(jìn)規(guī)范、注釋規(guī)范等，以確保代碼的整潔和一致性。語(yǔ)法風(fēng)格ArkTS在保持TypeScript基本語(yǔ)法風(fēng)格的基礎(chǔ)上，引入了一些特定的規(guī)則和約束。靜態(tài)類(lèi)型與TypeScript的動(dòng)態(tài)類(lèi)型不同，ArkTS對(duì)類(lèi)型施加了更嚴(yán)格的約束，引入了靜態(tài)類(lèi)型，提高了代碼的可讀性和可維護(hù)性。引言裝飾器02裝飾器010203裝飾器是一種特殊類(lèi)型的聲明。它用于裝飾類(lèi)、結(jié)構(gòu)、方法以及變量，并賦予其特殊的含義。裝飾器語(yǔ)法是將@符號(hào)置于函數(shù)定義之前。裝飾器的基本概念裝飾器常用的裝飾器@Entry@Entry裝飾的自定義組件將作為UI頁(yè)面的入口。@Component@Component裝飾器僅能裝飾struct關(guān)鍵字聲明的數(shù)據(jù)結(jié)構(gòu)。@State@State裝飾的變量，或稱(chēng)為狀態(tài)變量，一旦變量擁有了狀態(tài)屬性，就和自定義組件的渲染綁定起來(lái)。當(dāng)狀態(tài)改變時(shí)，UI會(huì)發(fā)生對(duì)應(yīng)的渲染改變。自定義組件03自定義組件概念自定義組件是一種允許開(kāi)發(fā)者根據(jù)業(yè)務(wù)需求，封裝特定功能和UI界面的可復(fù)用代碼塊。優(yōu)勢(shì)提高代碼復(fù)用性，降低開(kāi)發(fā)成本；簡(jiǎn)化復(fù)雜頁(yè)面的開(kāi)發(fā)過(guò)程；便于團(tuán)隊(duì)協(xié)作和維護(hù)。0102自定義組件可組合允許開(kāi)發(fā)者組合使用系統(tǒng)組件、及其屬性和方法?？芍赜米远x組件可以被其他組件重用，并作為不同的實(shí)例在不同的父組件或容器中使用。數(shù)據(jù)驅(qū)動(dòng)UI更新通過(guò)狀態(tài)變量的改變，來(lái)驅(qū)動(dòng)UI的刷新。UI描述04UI描述定義UI描述語(yǔ)言是一種用于描述用戶(hù)界面元素、布局和交互的標(biāo)記語(yǔ)言。特點(diǎn)易于理解、學(xué)習(xí)和使用，支持多種平臺(tái)和設(shè)備，具有高度可定制性。應(yīng)用場(chǎng)景適用于快速構(gòu)建跨平臺(tái)的應(yīng)用程序界面，提高開(kāi)發(fā)效率和用戶(hù)體驗(yàn)。030201總結(jié)ArkTS的基本語(yǔ)法、裝飾器的概念、自定義組件以及UI描述的概念。掌握主要裝飾器的用法、自定義組件和系統(tǒng)組件的區(qū)別，了解UI描述的應(yīng)用場(chǎng)景。隨著HarmonyOS的發(fā)展，ArkTS的生態(tài)也將逐漸豐富起來(lái)，包括更多的庫(kù)、框架和工具鏈支持，保持持續(xù)學(xué)習(xí)的能力，推動(dòng)ArkTS的普及和發(fā)展。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》ArkTS—狀態(tài)管理目錄12狀態(tài)管理的應(yīng)用場(chǎng)景狀態(tài)管理的概念狀態(tài)管理的概念01狀態(tài)管理的概念狀態(tài)管理是指在應(yīng)用程序中處理和管理數(shù)據(jù)的過(guò)程。它允許應(yīng)用程序跟蹤和控制數(shù)據(jù)的變化，并將這些變化同步到頁(yè)面上，使頁(yè)面和數(shù)據(jù)保持一致。運(yùn)行時(shí)的狀態(tài)變化所帶來(lái)的UI重新渲染，在ArkUI中統(tǒng)稱(chēng)為狀態(tài)管理機(jī)制。狀態(tài)管理旨在提供一種機(jī)制，使得應(yīng)用能夠在用戶(hù)交互、數(shù)據(jù)更新等情況下，維護(hù)狀態(tài)的正確性和一致性。在ArkTS中，狀態(tài)管理是通過(guò)裝飾器來(lái)實(shí)現(xiàn)的。狀態(tài)管理的概念在右邊的示例中，用戶(hù)與應(yīng)用程序的交互觸發(fā)了文本狀態(tài)變更，狀態(tài)變更引起了UI渲染，UI從“HelloWorld“變更為“HelloArkUI“。狀態(tài)管理的概念應(yīng)用級(jí)別的狀態(tài)管理組件級(jí)別的狀態(tài)管理狀態(tài)管理的應(yīng)用場(chǎng)景02狀態(tài)管理的應(yīng)用場(chǎng)景在此之前，我們構(gòu)建的頁(yè)面多為靜態(tài)界面。如果希望構(gòu)建一個(gè)動(dòng)態(tài)的、有交互的界面，就需要用到狀態(tài)管理。狀態(tài)管理的應(yīng)用場(chǎng)景游戲開(kāi)發(fā)中的狀態(tài)管理游戲進(jìn)程控制通過(guò)狀態(tài)管理，游戲開(kāi)發(fā)者可以方便地控制游戲的整體進(jìn)程，如關(guān)卡狀態(tài)、任務(wù)狀態(tài)等，從而實(shí)現(xiàn)游戲的流程控制和劇情發(fā)展。多人游戲同步在多人在線(xiàn)游戲中，狀態(tài)管理對(duì)于保持所有玩家之間的狀態(tài)同步至關(guān)重要，確保每個(gè)玩家看到的游戲世界是一致的。角色狀態(tài)管理在游戲中，每個(gè)角色或?qū)嶓w都有多種狀態(tài)，如生命值、魔法值、速度、位置等。狀態(tài)管理可以確保這些狀態(tài)的實(shí)時(shí)更新與同步，為游戲邏輯提供準(zhǔn)確的數(shù)據(jù)支持。030201狀態(tài)管理的應(yīng)用場(chǎng)景復(fù)雜業(yè)務(wù)流程的狀態(tài)跟蹤流程控制與優(yōu)化在復(fù)雜的業(yè)務(wù)流程中，狀態(tài)管理可以實(shí)時(shí)跟蹤各個(gè)環(huán)節(jié)的執(zhí)行狀態(tài)，幫助管理者了解整個(gè)流程的進(jìn)展情況，及時(shí)發(fā)現(xiàn)并解決問(wèn)題，實(shí)現(xiàn)流程的優(yōu)化。數(shù)據(jù)整合與分析通過(guò)狀態(tài)管理收集到的業(yè)務(wù)流程數(shù)據(jù)，企業(yè)可以進(jìn)行深入的數(shù)據(jù)分析，挖掘潛在的業(yè)務(wù)價(jià)值，為決策提供有力支持。協(xié)同與溝通狀態(tài)管理可以提供一個(gè)共享的、實(shí)時(shí)的信息平臺(tái)，促進(jìn)團(tuán)隊(duì)成員之間的協(xié)同與溝通，確保業(yè)務(wù)流程的順利進(jìn)行。狀態(tài)管理的優(yōu)勢(shì)ArkTS狀態(tài)管理能夠快速響應(yīng)狀態(tài)變化，確保數(shù)據(jù)的實(shí)時(shí)性，滿(mǎn)足對(duì)實(shí)時(shí)性要求高的應(yīng)用場(chǎng)景?？焖夙憫?yīng)通過(guò)狀態(tài)管理，可以避免不必要的重復(fù)計(jì)算和數(shù)據(jù)處理，提高系統(tǒng)的整體運(yùn)行效率。減少冗余計(jì)算ArkTS狀態(tài)管理通過(guò)合理的狀態(tài)更新和同步機(jī)制，有效降低了系統(tǒng)負(fù)載，從而優(yōu)化了整體性能。優(yōu)化性能總結(jié)狀態(tài)管理的概念。理解狀態(tài)管理的概念并在合適的應(yīng)用場(chǎng)景下去使用。狀態(tài)管理的優(yōu)勢(shì)在于：提升系統(tǒng)可靠性、優(yōu)化資源利用以及降低運(yùn)維成本。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》ArkTS—渲染控制目錄12條件渲染渲染控制的概念3循環(huán)渲染渲染控制的概念01渲染控制的概念A(yù)rkUI通過(guò)自定義組件的build()函數(shù)和@builder裝飾器中的聲明式UI描述語(yǔ)句構(gòu)建相應(yīng)的UI。在聲明式描述語(yǔ)句中開(kāi)發(fā)者除了使用系統(tǒng)組件外，還可以使用渲染控制語(yǔ)句來(lái)輔助UI的構(gòu)建，這些渲染控制語(yǔ)句包括控制組件是否顯示的條件渲染語(yǔ)句，基于數(shù)組數(shù)據(jù)快速生成組件的循環(huán)渲染語(yǔ)句等。條件渲染02條件渲染定義條件渲染是指在特定的條件下，動(dòng)態(tài)地決定是否渲染某個(gè)組件或元素。特點(diǎn)只有當(dāng)滿(mǎn)足特定條件時(shí)，才進(jìn)行渲染操作。這有助于減少不必要的渲染，提高應(yīng)用性能。使用規(guī)則支持if、else和elseif語(yǔ)句。030201條件渲染if(this.temperature<0){Text('氣溫太低，結(jié)冰了!')

.fontColor(Color.Red).fontSize(25)}truefalse應(yīng)用場(chǎng)景用戶(hù)權(quán)限控制根據(jù)用戶(hù)的權(quán)限級(jí)別，動(dòng)態(tài)顯示或隱藏某些功能組件。例如，只有管理員才能看到的設(shè)置按鈕或菜單項(xiàng)。在展示數(shù)據(jù)時(shí)，根據(jù)數(shù)據(jù)的不同類(lèi)型或狀態(tài)來(lái)動(dòng)態(tài)切換顯示的組件。例如，在展示用戶(hù)信息時(shí)，根據(jù)用戶(hù)的性別來(lái)顯示不同的頭像或背景色。在異步請(qǐng)求數(shù)據(jù)或執(zhí)行耗時(shí)操作時(shí)，可以使用條件渲染來(lái)顯示加載指示器或占位符，以提高用戶(hù)體驗(yàn)。根據(jù)設(shè)備的屏幕尺寸或分辨率來(lái)動(dòng)態(tài)調(diào)整布局和組件的顯示方式。例如，在小屏幕上隱藏某些非核心功能或調(diào)整組件的布局方式。數(shù)據(jù)展示切換加載狀態(tài)提示響應(yīng)式設(shè)計(jì)01020304循環(huán)渲染03循環(huán)渲染定義循環(huán)渲染是指在UI開(kāi)發(fā)中，通過(guò)循環(huán)遍歷數(shù)據(jù)集合，動(dòng)態(tài)生成并渲染多個(gè)相同類(lèi)型的UI組件。實(shí)現(xiàn)步驟定義好需要循環(huán)渲染的UI組件模板；在模板中使用循環(huán)語(yǔ)句遍歷數(shù)據(jù)集合；將數(shù)據(jù)綁定到UI組件上，實(shí)現(xiàn)動(dòng)態(tài)渲染。支持接口支持ForEach、LazyForEach和Repeat接口。030201循環(huán)渲染ForEach(arr:Array,itemGenerator:(item:Object,index:number)=>void,keyGenerator?:(item:Object,index:number)=>string)arr：數(shù)據(jù)源，為Array類(lèi)型的數(shù)組。itemGenerator：組件生成函數(shù)。keyGenerator：鍵值生成函數(shù)。應(yīng)用場(chǎng)景動(dòng)態(tài)表單在表單填寫(xiě)等場(chǎng)景中，需要根據(jù)用戶(hù)選擇動(dòng)態(tài)生成表單項(xiàng)。通過(guò)循環(huán)渲染結(jié)合條件渲染，可以實(shí)現(xiàn)復(fù)雜的動(dòng)態(tài)表單功能。列表渲染在電商、新聞等應(yīng)用中，經(jīng)常需要展示大量的列表數(shù)據(jù)。通過(guò)循環(huán)渲染，可以動(dòng)態(tài)生成列表項(xiàng)，提高開(kāi)發(fā)效率和性能?？ㄆ讲季衷谏缃弧①Y訊等應(yīng)用中，常常采用卡片式布局展示內(nèi)容。利用循環(huán)渲染，可以輕松實(shí)現(xiàn)多個(gè)卡片的動(dòng)態(tài)生成和布局?？偨Y(jié)ArkTS的渲染控制：條件渲染、循環(huán)渲染。學(xué)會(huì)條件渲染的用法，渲染對(duì)應(yīng)狀態(tài)下的UI內(nèi)容，掌握循環(huán)渲染中ForEach接口的調(diào)用方法。合理運(yùn)用ArkTS的渲染控制，減少不必要的渲染，提高開(kāi)發(fā)效率和性能。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》鴻蒙應(yīng)用開(kāi)發(fā)之—ArkUI概念目錄12兩種開(kāi)發(fā)范式ArkUI的概念A(yù)rkUI的概念01ArkUI的概念010203ArkUI（方舟開(kāi)發(fā)框架）是HarmonyOS提供的一種全新UI開(kāi)發(fā)框架。它支持使用JS/TS語(yǔ)言進(jìn)行UI界面開(kāi)發(fā)，并提供了豐富的UI組件和動(dòng)畫(huà)效果。ArkUI還具備數(shù)據(jù)綁定、事件處理、狀態(tài)管理等核心功能，幫助開(kāi)發(fā)者高效構(gòu)建用戶(hù)界面。ArkUI的概念A(yù)rkUI支持跨平臺(tái)開(kāi)發(fā)，一套代碼可以同時(shí)運(yùn)行在多種設(shè)備上，降低了開(kāi)發(fā)成本。ArkUI提供了豐富的主題和樣式系統(tǒng)，可以輕松實(shí)現(xiàn)界面風(fēng)格的自定義。ArkUI采用了聲明式編程模型，相較于傳統(tǒng)UI框架的命令式編程，更加直觀和易于維護(hù)。ArkUI的概念010203ArkUI倡導(dǎo)簡(jiǎn)潔高效的設(shè)計(jì)理念，通過(guò)減少冗余代碼和簡(jiǎn)化開(kāi)發(fā)流程來(lái)提高開(kāi)發(fā)效率。提供了豐富的組件和API，幫助開(kāi)發(fā)者快速構(gòu)建出美觀且功能強(qiáng)大的用戶(hù)界面。ArkUI還支持組件化開(kāi)發(fā)，便于代碼的復(fù)用和維護(hù)，進(jìn)一步提高了開(kāi)發(fā)效率。兩種開(kāi)發(fā)范式02兩種開(kāi)發(fā)范式聲明式開(kāi)發(fā)范式基于ArkTS的聲明式開(kāi)發(fā)范式，采用基于TypeScript聲明式UI語(yǔ)法擴(kuò)展而來(lái)的ArkTS語(yǔ)言，從組件、動(dòng)畫(huà)和狀態(tài)管理三個(gè)維度提供UI繪制能力。01兩種開(kāi)發(fā)范式類(lèi)Web開(kāi)發(fā)范式采用經(jīng)典的HTML、CSS、JavaScript三段式開(kāi)發(fā)方式。該范式更符合于Web前端開(kāi)發(fā)者的使用習(xí)慣，便于快速將已有的Web應(yīng)用改造成方舟UI框架應(yīng)用。02兩種開(kāi)發(fā)范式總結(jié)ArkUI框架的基本概念和兩種開(kāi)發(fā)范式。了解方舟UI框架，熟悉兩種開(kāi)發(fā)范式。隨著HarmonyOS的不斷發(fā)展，ArkUI將進(jìn)一步強(qiáng)化跨設(shè)備統(tǒng)一體驗(yàn)，定期訪問(wèn)HarmonyOS官方網(wǎng)站，獲取最新技術(shù)資訊和開(kāi)發(fā)文檔。也期待ArkUI能夠融合更多創(chuàng)新技術(shù)，如AI、VR等，為開(kāi)發(fā)者提供更豐富、更前言的開(kāi)發(fā)工具和平臺(tái)，推動(dòng)應(yīng)用創(chuàng)新。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》鴻蒙應(yīng)用開(kāi)發(fā)之—調(diào)試技術(shù)目錄12斷點(diǎn)調(diào)試引言3日志調(diào)試引言01引言通過(guò)調(diào)試可以發(fā)現(xiàn)并修復(fù)軟件中的錯(cuò)誤和缺陷，從而提高軟件的穩(wěn)定性和可靠性。提高軟件質(zhì)量減少軟件運(yùn)行中的錯(cuò)誤和崩潰，使用戶(hù)能夠更順暢地使用。提升用戶(hù)體驗(yàn)調(diào)試是軟件開(kāi)發(fā)過(guò)程中不可或缺的一環(huán)，它有助于開(kāi)發(fā)人員理解代碼的執(zhí)行流程和性能瓶頸。輔助開(kāi)發(fā)過(guò)程斷點(diǎn)調(diào)試02斷點(diǎn)調(diào)試在所要調(diào)試代碼的最前面單擊一下即可，再次單擊即可取消斷點(diǎn)設(shè)置。設(shè)置斷點(diǎn)單擊調(diào)試按鈕啟動(dòng)調(diào)試。啟動(dòng)調(diào)試0102斷點(diǎn)調(diào)試圖標(biāo)含義ResumeProgram當(dāng)程序執(zhí)行到斷點(diǎn)時(shí)停止執(zhí)行，單擊此按鈕程序繼續(xù)執(zhí)行。StepOver在單步調(diào)試時(shí)，直接前進(jìn)到下一行。StepInto在單步調(diào)試時(shí)，遇到子函數(shù)后，進(jìn)入子函數(shù)并繼續(xù)單步執(zhí)行。ForceStepInto在單步調(diào)試時(shí)，強(qiáng)制進(jìn)入方法。StepOut在單步調(diào)試執(zhí)行到子函數(shù)內(nèi)時(shí)，單擊StepOut會(huì)執(zhí)行完子函數(shù)剩余部分，并跳出返回到上一層函數(shù)。Stop停止調(diào)試任務(wù)。RunToCursor斷點(diǎn)執(zhí)行到鼠標(biāo)停留處。斷點(diǎn)調(diào)試的適用場(chǎng)景排查問(wèn)題當(dāng)程序出現(xiàn)錯(cuò)誤或異常時(shí)，通過(guò)斷點(diǎn)調(diào)試可以定位問(wèn)題所在，分析錯(cuò)誤原因。功能驗(yàn)證在開(kāi)發(fā)新功能或修改現(xiàn)有功能時(shí)，通過(guò)斷點(diǎn)調(diào)試可以驗(yàn)證功能是否按預(yù)期工作。代碼邏輯復(fù)雜當(dāng)代碼邏輯較為復(fù)雜時(shí)，通過(guò)斷點(diǎn)調(diào)試可以逐步跟蹤程序執(zhí)行流程，幫助理解代碼邏輯。日志調(diào)試03日志調(diào)試DevEcoStudio的日志級(jí)別包括DEBUG、INFO、WARN、ERROR和FATAL五種級(jí)別，分別對(duì)應(yīng)不同詳細(xì)程度的日志信息。日志級(jí)別通?？梢栽谂渲梦募虼a中設(shè)置日志級(jí)別，以控制輸出的日志詳細(xì)程度。設(shè)置方法日志調(diào)試是指在代碼中插入日志語(yǔ)句，記錄程序運(yùn)行時(shí)的關(guān)鍵信息，以便后續(xù)分析和排查問(wèn)題。概念日志調(diào)試接口名功能描述debug()輸出DEBUG級(jí)別的日志。DEBUG級(jí)別日志表示僅用于應(yīng)用/服務(wù)調(diào)試。可以在DevEcoStudio的terminal窗口或cmd里，通過(guò)命令“hdcshellhilogcat”設(shè)置可打印日志的等級(jí)為DEBUG。info()輸出INFO級(jí)別的日志。INFO級(jí)別日志表示普通的信息。warn()輸出WARN級(jí)別的日志。WARN級(jí)別日志表示存在警告。error()輸出ERROR級(jí)別的日志。ERROR級(jí)別日志表示存在錯(cuò)誤。fatal()輸出FATAL級(jí)別的日志。FATAL級(jí)別日志表示出現(xiàn)致命錯(cuò)誤、不可恢復(fù)錯(cuò)誤。日志調(diào)試圖標(biāo)含義向上翻頁(yè)，日志窗口取消自動(dòng)滾動(dòng)。向下翻頁(yè)，日志窗口取消自動(dòng)滾動(dòng)。如果翻頁(yè)已到底部，日志窗口自動(dòng)滾動(dòng)。當(dāng)該按鈕處于選中狀態(tài)時(shí)，日志自動(dòng)換行顯示，否則日志按行顯示。當(dāng)該按鈕處于選中狀態(tài)時(shí)，日志自動(dòng)滾動(dòng)到窗口底部，否則停留在當(dāng)前日志顯示處。重新開(kāi)啟日志接收，會(huì)清空日志緩存和窗口日志。日志調(diào)試圖標(biāo)含義清空窗口日志。對(duì)當(dāng)前選擇的設(shè)備屏幕進(jìn)行截屏，并保存在本地。保存日志緩存到指定文件。自動(dòng)選擇和切換已連接的設(shè)備。過(guò)濾只展示App日志。關(guān)閉當(dāng)前日志窗口。日志調(diào)試優(yōu)勢(shì)日志調(diào)試無(wú)需中斷程序執(zhí)行，可以記錄程序運(yùn)行過(guò)程中的詳細(xì)信息，便于后續(xù)分析。局限性日志調(diào)試可能會(huì)產(chǎn)生大量的日志數(shù)據(jù)，需要占用較多的存儲(chǔ)空間。同時(shí)，對(duì)于實(shí)時(shí)性要求較高的系統(tǒng)，日志調(diào)試可能會(huì)影響系統(tǒng)性能。此外，日志調(diào)試無(wú)法像斷點(diǎn)調(diào)試那樣直接查看變量的實(shí)時(shí)值?？偨Y(jié)斷點(diǎn)調(diào)試與日志調(diào)試。掌握斷點(diǎn)調(diào)試和日志調(diào)試方法，在定位復(fù)雜問(wèn)題時(shí)可結(jié)合兩種調(diào)試方法。合理使用日志級(jí)別，優(yōu)化斷點(diǎn)設(shè)置并保持團(tuán)隊(duì)協(xié)作與溝通，提升調(diào)試效率，進(jìn)而提高軟件質(zhì)量，提升用戶(hù)體驗(yàn)。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》任務(wù)實(shí)施3.2任務(wù)分析《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組UI開(kāi)發(fā)之基礎(chǔ)組件《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組基礎(chǔ)組件之--

組件通用信息目錄123組件通用信息任務(wù)實(shí)施組件框架組件框架01延遲符號(hào)容器

基礎(chǔ)組件：文本、按鈕、圖片等

繪制組件：線(xiàn)形、矩形、圓形等

畫(huà)布組件：畫(huà)布、位圖、動(dòng)畫(huà)等組件框架基礎(chǔ)媒體繪制畫(huà)布

媒體組件：視頻

容器組件：布局、列表、導(dǎo)航等組件通用信息02延遲符號(hào)組件通用信息通用屬性通用事件手勢(shì)處理通用屬性組件普遍支持的用來(lái)設(shè)置組件基本標(biāo)識(shí)和外觀顯示特征的屬性，例如尺寸、位置、背景、邊框、文本樣式等通用事件通常是指那些可以在不同應(yīng)用場(chǎng)景或組件中復(fù)用的、具有通用性的事件，例如用戶(hù)點(diǎn)擊按鈕、滑動(dòng)屏幕、輸入文本等操作手勢(shì)處理對(duì)用戶(hù)在設(shè)備屏幕上執(zhí)行的觸控操作進(jìn)行識(shí)別、解析和響應(yīng)的過(guò)程，例如單擊手勢(shì)、長(zhǎng)按手勢(shì)、平移手勢(shì)、捏合手勢(shì)、旋轉(zhuǎn)手勢(shì)和滑動(dòng)手勢(shì)等屬性010205040306尺寸設(shè)置位置設(shè)置邊框設(shè)置顯隱控制文本樣式設(shè)置背景設(shè)置通用屬性事件010205040306點(diǎn)擊事件觸摸事件拖拽事件組件區(qū)域變化事件鼠標(biāo)事件按鍵事件通用事件手勢(shì)010205040306TapGestureLongPressGesturePanGestureSwipeGestureRotationGesturePinchGesture手勢(shì)處理問(wèn)題思考通用屬性是指所有組件都支持的屬性。A.對(duì)B.錯(cuò)任務(wù)實(shí)施03延遲符號(hào)任務(wù)實(shí)施321通過(guò)指南文檔檢索，查找鴻蒙如何定義UI

和組件

的基本概念通過(guò)開(kāi)發(fā)者社區(qū)論壇檢索，搜集其他開(kāi)發(fā)者給出的鴻蒙應(yīng)用開(kāi)發(fā)學(xué)習(xí)建議，并嘗試在論壇中進(jìn)行提問(wèn)和答復(fù)通過(guò)API參考文檔檢索，搜索組件具備哪些通用屬性

和通用事件，以及組件分為哪些類(lèi)型任務(wù)實(shí)施1任務(wù)實(shí)施12任務(wù)實(shí)施123總結(jié)基于ArkTS的聲明式開(kāi)發(fā)范式組件框架

-分為哪五大類(lèi)？組件通用信息

-包含哪三方面內(nèi)容？遇到新知識(shí)怎么查？

-資料檢索途徑有哪些？認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組文本類(lèi)組件之--Text目錄123Text常見(jiàn)用法代碼演示Text簡(jiǎn)介T(mén)ext簡(jiǎn)介01延遲符號(hào)Text簡(jiǎn)介T(mén)extText常見(jiàn)用法02延遲符號(hào)Text接口ResourceResource是資源引用類(lèi)型，可以通過(guò)$r創(chuàng)建Resource類(lèi)型對(duì)象，語(yǔ)法格式如下：$r('')belonging：系統(tǒng)資源或者應(yīng)用資源，相應(yīng)的取值為'sys'和'app'；type：資源類(lèi)型，支持'color'、'float'、'string'、'media'等；name：資源名稱(chēng)，在資源定義時(shí)確定。Text屬性fontSize（Length）文本大小fontColor（ResourceColor）文本顏色fontWeight（number|FontWeight|string）文本粗細(xì)textAlign（TextAlign）文本對(duì)齊方式TextAlign參數(shù)textAlign（TextAlign）設(shè)置文本段落在水平方向的對(duì)齊方式Length參數(shù)fontSize（Length）設(shè)置字體大小ResourceColor參數(shù)fontColor（ResourceColor）設(shè)置字體顏色RGB三原色顏色值組成：三原色1.#RGB：3位16進(jìn)制整數(shù)2.#RRGGBB3.#AARRGGBB#f00|#00ff00|#ff0000ffFontWeightfontWeight（number|FontWeight|string）設(shè)置文本的字體粗細(xì)問(wèn)題思考Text接口如何引用string.json文件字符串？{"string":[{"name":"module_desc","value":"moduledescription"}]}$r('app.string.module_desc')代碼演示03延遲符號(hào)代碼演示1Text($r('app.string.text')).width('80%').border({width:2,color:Color.Black}).padding(10).fontSize(30)//文本顏色為紅色.fontColor('#f00')//文本內(nèi)容水平方向居中對(duì)齊.textAlign(TextAlign.Center).fontWeight(FontWeight.Bold)代碼演示2{"name":"text","value":"學(xué)而不思則罔\n思而不學(xué)則殆"}注意，工程在base/element、en_US/element和zh_CN/element三個(gè)目錄中均包含string.json文件，需要在上述三個(gè)文件中同步添加字符串內(nèi)容，實(shí)現(xiàn)字符串內(nèi)容的國(guó)際化開(kāi)發(fā)?？偨Y(jié)Text概念

–應(yīng)用場(chǎng)景是什么？Text常見(jiàn)用法-接口和屬性有哪些？代碼演示

-《論語(yǔ)》。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組文本類(lèi)組件之--TextInput目錄123TextInput常見(jiàn)用法代碼演示TextInput簡(jiǎn)介T(mén)extInput簡(jiǎn)介01TextInput簡(jiǎn)介T(mén)extInput常見(jiàn)用法02延遲符號(hào)TextInput接口ResourceStr參數(shù)Resourcestr用于描述字符串可以使用的類(lèi)型TextInput屬性textAlign(TextAlign)文本對(duì)齊方式type(InputType)輸入類(lèi)型maxLength(number)最大字符數(shù)copyOption(CopyOptions)文本是否可復(fù)制InputType參數(shù)type

(InputType)設(shè)置輸入框類(lèi)型CopyOptions參數(shù)copyOption(CopyOptions)設(shè)置輸入的文本是否可復(fù)制TextInput事件InputType枚舉值為Password時(shí)，顯示小眼睛圖標(biāo)并且默認(rèn)會(huì)將文字變成圓點(diǎn)。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1//placeholder設(shè)置無(wú)輸入時(shí)的提示文本

TextInput({placeholder:'請(qǐng)輸入用戶(hù)名'}).placeholderColor(Color.Gray).placeholderFont({size:30}).border({width:2,color:Color.Black}).caretColor(Color.Black).copyOption(CopyOptions.LocalDevice).margin(20)//輸入內(nèi)容發(fā)生變化時(shí)，觸發(fā)該回調(diào)方法

.onChange((value:string)=>{})代碼演示2

TextInput({placeholder:'請(qǐng)輸入密碼'}).placeholderColor(Color.Gray).placeholderFont({size:30}).border({width:2,color:Color.Black}).caretColor(Color.Black)//設(shè)置輸入內(nèi)容類(lèi)型.type(InputType.Password).margin(20)總結(jié)TextInput概念

–應(yīng)用場(chǎng)景是什么？TextInput常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-注冊(cè)登錄頁(yè)面。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙應(yīng)用開(kāi)發(fā)基礎(chǔ)教程（HarmonyOS）》課程組文本類(lèi)組件之--TextArea目錄123TextArea常見(jiàn)用法代碼演示TextArea簡(jiǎn)介T(mén)extArea簡(jiǎn)介01TextArea簡(jiǎn)介T(mén)extArea常見(jiàn)用法02延遲符號(hào)TextArea接口TextArea屬性textAlign(TextAlign)文本對(duì)齊方式placeholderColor(ResourceColor)提示語(yǔ)文本顏色placeholderFont(Font)提示語(yǔ)文本樣式copyOption(CopyOptions)文本是否可復(fù)制TextArea事件TextArea寬度未設(shè)置時(shí)，默認(rèn)撐滿(mǎn)最大寬度。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示{"string":[{"name":"module_desc","value":"moduledescription"},

{"name":"text","value":"長(zhǎng)亭外\n古道邊\n芳草碧連天"}]}代碼演示2Row(){Column(){

TextInput({placeholder:$r('app.string.text')}).placeholderFont({size:26}).margin(20)

TextArea({placeholder:$r('app.string.text')}).placeholderFont({size:26}).margin(20)}.width('100%')}.height('100%')總結(jié)TextArea概念

–應(yīng)用場(chǎng)景是什么？TextArea常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-李叔同《送別》。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組文本類(lèi)組件之--RichText目錄123RichText常見(jiàn)用法代碼演示RichText簡(jiǎn)介RichText簡(jiǎn)介01RichText簡(jiǎn)介RichText常見(jiàn)用法02延遲符號(hào)RichText接口RichText標(biāo)簽RichText標(biāo)簽RichText屬性width(Length)組件寬度height(Length)組件高度size({width?:Length,height?:Length})組件寬高尺寸layoutWeight(number|string)組件權(quán)重RichText事件RichText支持padding，margin通用屬性。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1

@Statetext:string='<h1style="font-size:40px;text-align:center;">憫農(nóng)</h1>'+'<pstyle="font-size:30px;text-align:center;">鋤禾日當(dāng)午，汗滴禾下土。</p>'+'<pstyle="font-size:30px;text-align:center;">誰(shuí)知盤(pán)中餐，粒粒皆辛苦。</p>'

代碼演示2

//text是自定義字符串變量RichText(this.text).align(Alignment.Center)

.onStart(()=>{

//開(kāi)始加載網(wǎng)頁(yè)}).onComplete(()=>{

//網(wǎng)頁(yè)加載結(jié)束})總結(jié)RichText概念

–應(yīng)用場(chǎng)景是什么？RichText常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-唐·李紳《憫農(nóng)》。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙應(yīng)用開(kāi)發(fā)基礎(chǔ)教程（HarmonyOS）》課程組文本類(lèi)組件之--Marquee目錄123Marquee常見(jiàn)用法代碼演示Marquee簡(jiǎn)介Marquee簡(jiǎn)介01Marquee簡(jiǎn)介Marquee常見(jiàn)用法02延遲符號(hào)Marquee接口Marquee屬性fontColor(ResourceColor)字體顏色fontSize( Length)字體大小fontWeight(number|FontWeight|string)字體粗細(xì)fontFamily(string|Resource)字體列表Marquee事件Marquee可以控制滾動(dòng)速度。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示@Statetext:string='青青園中葵，'Marquee({start:true,step:6,loop:2,fromStart:true,src:this.text}).fontSize(50).fontWeight(FontWeight.Bold)

.onStart(()=>{//開(kāi)始滾動(dòng)時(shí)觸發(fā)回調(diào)}).onBounce(()=>{//完成一次滾動(dòng)時(shí)觸發(fā)}).onFinish(()=>{

//滾動(dòng)全部循環(huán)次數(shù)完成時(shí)觸發(fā)回調(diào)})總結(jié)Marquee概念

–應(yīng)用場(chǎng)景是什么？Marquee常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-漢樂(lè)府《長(zhǎng)歌行》。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙應(yīng)用開(kāi)發(fā)基礎(chǔ)教程（HarmonyOS）》課程組文本類(lèi)組件之--TextPicker目錄123TextPicker常見(jiàn)用法代碼演示TextPicker簡(jiǎn)介T(mén)extPicker簡(jiǎn)介01TextPicker簡(jiǎn)介T(mén)extPickerTextPicker常見(jiàn)用法02延遲符號(hào)TextPicker接口TextPicker屬性defaultPickerItemHeight(number|string)設(shè)置Picker各選擇項(xiàng)的高度TextPicker事件TextPicker支持通用屬性中的文本樣式設(shè)置。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示

foods:string[]=['河南胡辣湯','湖北熱干面','潮汕牛肉丸','新疆大盤(pán)雞','廣西螺獅粉'];TextPicker({range:this.foods,selected:0,value:'湖北熱干面'})/*通過(guò)defaultPickerItemHeight屬性設(shè)置TextPicker各選擇項(xiàng)的高度*/.defaultPickerItemHeight(80)

.onChange((value:string,index:number)=>{//index:當(dāng)前選中項(xiàng)的索引值//value:當(dāng)前選中項(xiàng)的文本

})總結(jié)TextPicker概念

–應(yīng)用場(chǎng)景是什么？TextPicker常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-地方特色美食。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙應(yīng)用開(kāi)發(fā)基礎(chǔ)教程（HarmonyOS）》課程組文本類(lèi)組件之--Span目錄123Span常見(jiàn)用法代碼演示Span簡(jiǎn)介Span簡(jiǎn)介01Span簡(jiǎn)介SpanSpan常見(jiàn)用法02延遲符號(hào)Span接口Span屬性letterSpacing(number|string)文本字符間距decoration{type:TextDecorationType,color?:ResourceColor}文本裝飾線(xiàn)textCase( TextCase)文本大小寫(xiě)TextDecorationType參數(shù)TextDecorationType用于描述裝飾線(xiàn)樣式TextCase參數(shù)TextCase用于設(shè)置文本大小寫(xiě)Span需要設(shè)置組件的寬高屬性。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1Row(){Column(){ Text(){//第一行文本內(nèi)容}

Text(){//第二行文本內(nèi)容}Text(){//第三行文本內(nèi)容}}.width('100%')}.height('100%')代碼演示2

Text(){//Span沒(méi)有單獨(dú)使用，而是嵌入到Text中使用

Span('車(chē)次號(hào):').fontSize(40)Span('永不返航').decoration({type:TextDecorationType.LineThrough,color:Color.Red}).fontSize(40)}代碼演示3

Text(){

Span('出發(fā)站:').fontSize(40)

Span('校園一角') .decoration({ type:TextDecorationType.Underline}) .fontSize(40)}代碼演示4

Text(){

Span('到達(dá)站:').fontSize(40)

Span('未來(lái)一隅').decoration({type:TextDecorationType.Underline}).fontSize(40)}總結(jié)Span概念

–應(yīng)用場(chǎng)景是什么？Span常見(jiàn)用法-接口和屬性有哪些？代碼演示

-畢業(yè)車(chē)次號(hào)。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組按鈕類(lèi)組件之--Button目錄123Button常見(jiàn)用法代碼演示Button簡(jiǎn)介Button簡(jiǎn)介01延遲符號(hào)Button簡(jiǎn)介ButtonButton常見(jiàn)用法02延遲符號(hào)Button接口ButtonType參數(shù)Button接口Button屬性type(ButtonType)按鈕樣式stateEffect(boolean)是否開(kāi)啟按壓態(tài)顯示效果Button事件問(wèn)題思考按鈕內(nèi)容僅支持文本？A.對(duì)B.錯(cuò)代碼演示03延遲符號(hào)代碼演示1//創(chuàng)建膠囊型按鈕，這是API9版本的默認(rèn)按鈕樣式Button('登錄').fontSize(30).onClick(()=>{//按鈕單擊事件處理方法})

Button('登錄').fontSize(30).type(ButtonType.Normal)//創(chuàng)建矩形按鈕.margin(30)代碼演示2//創(chuàng)建圓角矩形按鈕Button('登錄',{type:ButtonType.Normal})

.fontSize(30).borderRadius(10)

//創(chuàng)建圓形按鈕

Button('登錄',{type:ButtonType.Circle})

.borderRadius(40).fontSize(20).margin(30)總結(jié)Button概念

–應(yīng)用場(chǎng)景是什么？Button常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-各種形式的按鈕。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組按鈕類(lèi)組件之--Radio目錄123Radio常見(jiàn)用法代碼演示Radio簡(jiǎn)介Radio簡(jiǎn)介01延遲符號(hào)Radio簡(jiǎn)介RadioRadio常見(jiàn)用法02延遲符號(hào)Radio接口Radio屬性checked(boolean)單選框的選中狀態(tài)Radio事件Radio接口中的value參數(shù)是單選項(xiàng)內(nèi)容？A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1Column(){Text('“衣帶漸寬終不悔，為伊消得人憔悴”，其中的“消得”特指\n').fontSize(30).fontWeight(FontWeight.Bold)Row(){//第一個(gè)單選項(xiàng)}Row(){//第二個(gè)單選項(xiàng)}}.alignItems(HorizontalAlign.Start)代碼演示2Column(){Text('“衣帶漸寬終不悔，為伊消得人憔悴”，其中的“消得”特指\n')Row(){

Radio({value:'A',group:'宋詞'})

.onChange((isChecked:boolean)=>{})Text('消瘦')}

}代碼演示3Column(){Text('“衣帶漸寬終不悔，為伊消得人憔悴”，其中的“消得”特指\n')

Row(){

Radio({value:'B',group:'宋詞'}).checked(true)

.onChange((isChecked:boolean)=>{})Text('值得')}}總結(jié)Radio概念

–應(yīng)用場(chǎng)景是什么？Radio常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-柳永《蝶戀花》。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組按鈕類(lèi)組件之--Checkbox目錄123Checkbox常見(jiàn)用法代碼演示Checkbox簡(jiǎn)介Checkbox簡(jiǎn)介01延遲符號(hào)Checkbox簡(jiǎn)介CheckboxCheckbox常見(jiàn)用法02延遲符號(hào)Checkbox接口Checkbox屬性select(boolean)多選框的選中狀態(tài)selectedColor(ResourceColor)多選框選中狀態(tài)顏色Checkbox事件Checkbox可以設(shè)置全選/全不選功能？A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1Column(){Text('以下屬于我國(guó)著名醫(yī)學(xué)家的有\(zhòng)n').fontSize(30) .fontWeight(FontWeight.Bold)Row(){//第一個(gè)多選項(xiàng)}Row(){//第二個(gè)多選項(xiàng)}Row(){//第三個(gè)多選項(xiàng)}}.alignItems(HorizontalAlign.Start)代碼演示2Column(){Text('以下屬于我國(guó)著名醫(yī)學(xué)家的有\(zhòng)n')Row(){

Checkbox({name:'A',group:'doctor'}) .select(true)

.onChange((value:boolean)=>{})Text('藥圣李時(shí)珍')}

}代碼演示3Column(){Text('以下屬于我國(guó)著名醫(yī)學(xué)家的有\(zhòng)n')Row(){

Checkbox({name:'B',group:'doctor'}) .select(true)

.onChange((value:boolean)=>{})Text('藥王孫思邈')}}代碼演示4Column(){Text('以下屬于我國(guó)著名醫(yī)學(xué)家的有\(zhòng)n')

Row(){

Checkbox({name:'C',group:'doctor'}) .select(true)

.onChange((value:boolean)=>{})Text('醫(yī)圣張仲景')}}總結(jié)Checkbox概念

–應(yīng)用場(chǎng)景是什么？Checkbox常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-我國(guó)歷史著名醫(yī)學(xué)家。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組按鈕類(lèi)組件之--Toggle目錄123Toggle常見(jiàn)用法代碼演示Toggle簡(jiǎn)介T(mén)oggle簡(jiǎn)介01延遲符號(hào)Toggle簡(jiǎn)介T(mén)oggleToggle常見(jiàn)用法02延遲符號(hào)Toggle接口ToggleType參數(shù)type:ToggleType用于描述開(kāi)關(guān)類(lèi)型Toggle屬性selectedColor(ResourceColor)組件打開(kāi)狀態(tài)的背景顏色switchPointColor(ResourceColor)圓形滑塊顏色Toggle事件Toggle提供勾選框樣式、狀態(tài)按鈕樣式及開(kāi)關(guān)樣式。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示Row(){Text('自動(dòng)調(diào)節(jié)')

Toggle({type:ToggleType.Switch,isOn:true}).selectedColor(0xed6f21).switchPointColor(0xe5ffffff).size({width:60,height:40}).margin({left:100})

.onChange((isOn:boolean)=>{})}總結(jié)Toggle概念

–應(yīng)用場(chǎng)景是什么？Toggle常見(jiàn)用法-接口和屬性有哪些？代碼演示

-自動(dòng)調(diào)節(jié)設(shè)置。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組圖片類(lèi)組件之--Image目錄123Image常見(jiàn)用法代碼演示Image簡(jiǎn)介Image簡(jiǎn)介01延遲符號(hào)Image簡(jiǎn)介ImageImage常見(jiàn)用法02延遲符號(hào)Image接口Image屬性objectFit(ImageFit)圖片填充效果objectRepeat(ImageRepeat)）圖片重復(fù)樣式alt(string|Resource)加載時(shí)顯示的占位圖ImageFit參數(shù)objectFit(ImageFit)用于描述圖片縮放效果ImageRepeat參數(shù)objectRepeat(ImageRepeat）用于描述圖片的重復(fù)樣式Image事件Image支持動(dòng)態(tài)圖片展示。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1Column(){//第一個(gè)子組件Text('唐三彩')//第二個(gè)子組件

Image(this.url)//第三個(gè)子組件Text('錯(cuò)金銀云紋青銅犀尊')//第四個(gè)子組件Image($r('app.media.b'))}.width('100%').padding(10)代碼演示2Text('唐三彩')Image(this.url).size({width:'100%',height:200}).objectFit(ImageFit.Fill).alt($r('app.media.icon'))Text('錯(cuò)金銀云紋青銅犀尊')Image($r('app.media.b')).size({width:'100%',height:200}).objectFit(ImageFit.Auto)代碼演示3//module.json5配置文件"module":{

"requestPermissions":[{"name":"ohos.permission.INTERNET"}]}總結(jié)Image概念

–應(yīng)用場(chǎng)景是什么？Image常見(jiàn)用法-接口和屬性有哪些？代碼演示

-文物展示。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組圖片類(lèi)組件之-- ImageAnimator目錄123ImageAnimator常見(jiàn)用法代碼演示ImageAnimator簡(jiǎn)介ImageAnimator簡(jiǎn)介01延遲符號(hào)ImageAnimator簡(jiǎn)介ImageAnimatorImageAnimator常見(jiàn)用法02延遲符號(hào)ImageAnimator接口ImageAnimator屬性iterations(number)播放次數(shù)state(AnimationStatus)播放狀態(tài)duration(number)播放總時(shí)長(zhǎng)images(Array<ImageFrameInfo>)圖片幀信息集合ImageFrameInfo參數(shù)ImageFrameInfo用于描述圖片幀信息集合AnimationStatus參數(shù)state(

AnimationStatus)用于描述動(dòng)畫(huà)狀態(tài)ImageAnimator事件圖片播放時(shí)長(zhǎng)單位默認(rèn)秒。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1@Statestate:AnimationStatus=AnimationStatus.Initial

ImageAnimator().images([{src:$r('app.media.a'),duration:3000},{src:$r('app.media.b'),duration:2000},{src:$r('app.media.c'),duration:1000}]).state(this.state).iterations(-1)//-1表示無(wú)限次播放.size({width:'100%',height:'80%'})

代碼演示2ImageAnimator().onStart(()=>{//開(kāi)始播放}).onPause(()=>{//暫停播放})Button('開(kāi)始播放',{type:ButtonType.Normal}).onClick(()=>{this.state=AnimationStatus.Running})Button('暫停播放',{type:ButtonType.Normal}).onClick(()=>{this.state=AnimationStatus.Paused})總結(jié)ImageAnimator概念

–應(yīng)用場(chǎng)景是什么？ImageAnimator常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-旅游景點(diǎn)展示。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組圖片類(lèi)組件之--

DataPanel目錄123DataPanel常見(jiàn)用法代碼演示DataPanel簡(jiǎn)介DataPanel簡(jiǎn)介01延遲符號(hào)DataPanel簡(jiǎn)介DataPanelDataPanel常見(jiàn)用法02延遲符號(hào)DataPanel接口DataPanelType參數(shù)type?:DataPanelType用于描述面板類(lèi)型DataPanel屬性closeEffect(boolean)關(guān)閉旋轉(zhuǎn)動(dòng)效DataPanel提供了數(shù)據(jù)占比文本顯示功能。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示data:number[]=[20,40,40]build(){Row(){Column(){

DataPanel({values:this.data,max:-1,type:DataPanelType.Line}).size({width:200,height:20})

DataPanel({values:this.data,max:200,type:DataPanelType.Circle}).size({width:200,height:200}).margin(20)}}}總結(jié)DataPanel概念

–應(yīng)用場(chǎng)景是什么？DataPanel常見(jiàn)用法-接口和屬性有哪些？代碼演示

-不同類(lèi)型的DataPanel。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組圖片類(lèi)組件之--Gauge目錄123Gauge常見(jiàn)用法代碼演示Gauge簡(jiǎn)介Gauge簡(jiǎn)介01延遲符號(hào)Gauge簡(jiǎn)介GaugeGauge常見(jiàn)用法02延遲符號(hào)Gauge接口Gauge屬性startAngle(number)起始角度位置endAngle(number)終止角度位置colors(Array<ColorStop>)分段顏色設(shè)置ColorStop參數(shù)ColorStop用于描述漸進(jìn)色顏色斷點(diǎn)Gauge屬性strokeWidth(Length)環(huán)形厚度value(number)當(dāng)前數(shù)據(jù)值Gauge提供了分段顏色設(shè)置功能。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示Column(){

Gauge({value:50,min:0,max:100}).value(25).colors([[Color.Brown,1],[Color.Pink,1],[Color.Green,1],[Color.Orange,1]])

Gauge({value:30}).startAngle(0).endAngle(270).colors([[0x317AF7,1],[0x5BA854,1],[0xE08C3A,1]]).strokeWidth(20)}總結(jié)Gauge概念

–應(yīng)用場(chǎng)景是什么？Gauge常見(jiàn)用法-接口和屬性有哪些？代碼演示

-不同類(lèi)型的Gauge。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組圖片類(lèi)組件之--QRCode目錄123QRCode常見(jiàn)用法代碼演示QRCode簡(jiǎn)介QRCode簡(jiǎn)介01延遲符號(hào)QRCode簡(jiǎn)介QRCodeQRCode常見(jiàn)用法02延遲符號(hào)QRCode接口QRCode屬性color(ResourceColor)二維碼顏色backgroundColor(ResourceColor)二維碼背景顏色QRCode可以生成條形碼。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示QRCode('普通二維碼').size({width:200,height:200}).margin(20)

QRCode('有顏色二維碼').size({width:200,height:200}).color(Color.Red)QRCode('帶背景顏色二維碼').size({width:200,height:200}).backgroundColor(Color.Blue).margin(20)總結(jié)QRCode概念

–應(yīng)用場(chǎng)景是什么？QRCode常見(jiàn)用法-接口和屬性有哪些？代碼演示

-不同類(lèi)型的QRCode。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組圖片類(lèi)組件之--

PatternLock目錄123PatternLock常見(jiàn)用法代碼演示PatternLock簡(jiǎn)介PatternLock簡(jiǎn)介01延遲符號(hào)PatternLock簡(jiǎn)介PatternLockPatternLock常見(jiàn)用法02延遲符號(hào)PatternLock接口PatternLock屬性circleRadius(Length)圓點(diǎn)半徑regularColor(ResourceColor)圓點(diǎn)“未選中”狀態(tài)顏色selectedColor(ResourceColor)圓點(diǎn)“選中”狀態(tài)顏色sideLength(Length)組件寬高PatternLock屬性activeColor(ResourceColor)圓點(diǎn)在“激活”狀態(tài)的填充顏色pathStrokeWidth(number|string)連線(xiàn)寬度autoReset(boolean)組件重置pathColor(ResourceColor)連線(xiàn)顏色PatternLock事件圓點(diǎn)索引值按照先行后列從左到右順序記錄。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1@Statepasswords:number[]=[]@Statemessage:string='請(qǐng)輸入密碼'patternLockController:PatternLockController= newPatternLockController()Text(this.message）//PatternLockButton('重置圖案密碼鎖').onClick(()=>{this.patternLockController.reset()this.passwords=[]this.message='請(qǐng)輸入密碼'})

代碼演示2PatternLock(this.patternLockController).sideLength(300).circleRadius(9).regularColor(Color.Black).selectedColor(Color.Orange).activeColor(Color.Red).pathStrokeWidth(18).pathColor(Color.Pink).autoReset(true)代碼演示3PatternLock(this.patternLockController).onPatternComplete((input:Array<number>)=>{//判斷密碼長(zhǎng)度是否大于0if(this.passwords.length==0){this.passwords=inputthis.message="請(qǐng)?jiān)俅屋斎朊艽a"}else{//判斷兩次輸入的密碼是否相同，相同則提示密碼設(shè)置成功，否則提示重新輸入}})

代碼演示4else{if(this.passwords.toString()===input.toString()){this.passwords=inputthis.message='密碼輸入成功:'+this.passwords.toString()}else{this.message='兩次輸入密碼不一致'}}

總結(jié)PatternLock概念

–應(yīng)用場(chǎng)景是什么？PatternLock常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-圖案密碼鎖二次驗(yàn)證及重置。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組時(shí)間日期類(lèi)組件之--

DatePicker目錄123DatePicker常見(jiàn)用法代碼演示DatePicker簡(jiǎn)介DatePicker簡(jiǎn)介01延遲符號(hào)DatePicker簡(jiǎn)介DatePickerDatePicker常見(jiàn)用法02延遲符號(hào)DatePicker接口DatePicker屬性lunar(boolean)是否顯示農(nóng)歷DatePicker事件DatePickerResult參數(shù)DatePickerResult用于描述年月日信息監(jiān)聽(tīng)事件中1月份返回?cái)?shù)值1。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示1@StateisLunar:boolean=falseprivateselectedDate:Date=newDate()DatePicker({start:newDate('2024-1-1'),end:newDate('2034-12-31'),selected:this.selectedDate}).height('80%').lunar(this.isLunar)

.onChange((value:DatePickerResult)=>{})代碼演示2@StateisLunar:boolean=falseButton('切換公歷農(nóng)歷').onClick(()=>{this.isLunar=!this.isLunar})總結(jié)DatePicker概念

–應(yīng)用場(chǎng)景是什么？DatePicker常見(jiàn)用法-接口、屬性和事件有哪些？代碼演示

-公歷農(nóng)歷切換。認(rèn)真學(xué)鴻蒙一起干大事《鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)基礎(chǔ)教程》課程組時(shí)間日期類(lèi)組件之--

TimePicker目錄123TimePicker常見(jiàn)用法代碼演示TimePicker簡(jiǎn)介T(mén)imePicker簡(jiǎn)介01延遲符號(hào)TimePicker簡(jiǎn)介T(mén)imePickerTimePicker常見(jiàn)用法02延遲符號(hào)TimePicker接口TimePicker屬性u(píng)seMilitaryTime(boolean)展示時(shí)間是否為24小時(shí)制TimePicker事件TimePicker支持時(shí)、分、秒三種數(shù)據(jù)選擇。A.對(duì)B.錯(cuò)問(wèn)題思考代碼演示03延遲符號(hào)代碼演示@StateisMilitaryTime:boolean=falseprivateselectedTime:Date=newDate()TimePicker({selected:this.selectedTime}).useMilitaryTime(this.isMilitaryTime)

.onChange((value:TimePickerResult)=>{})

代碼演示Button('切換12小時(shí)制/24小時(shí)制').onClick(()=>{this.isMilitaryTime=!this.isMilitaryTime})

總結(jié)TimePicker概念

–應(yīng)用場(chǎng)景是什么？TimePicker常見(jiàn)用法-接口、屬性