鴻蒙系統(tǒng)應(yīng)用開發(fā)項目化教程 課件全套 項目1-6 建立HarmonyOS開發(fā)環(huán)境- 開發(fā)新聞客戶端

鴻蒙應(yīng)用開發(fā)項目一建立HarmonyOS開發(fā)環(huán)境要成為一名HarmonyOS應(yīng)用程序開發(fā)工程師，首先需要正確搭建HarmonyOS應(yīng)用程序開發(fā)環(huán)境。正確搭建HarmonyOS應(yīng)用程序開發(fā)環(huán)境有三個步驟，首先需要了解HarmonyOS系統(tǒng)架構(gòu)和技術(shù)特性，然后根據(jù)現(xiàn)有操作系統(tǒng)選擇合適的HarmonyOS開發(fā)工具進行安裝和配置，最后通過創(chuàng)建一個簡單的HarmonyOS應(yīng)用程序來測試開發(fā)環(huán)境是否已經(jīng)安裝成果，鴻蒙SDK和模擬器能否正常使用。因此，本項目可以分解為認識HarmonyOS、安裝DevEcoStudio工具和創(chuàng)建第一個HarmonyOS應(yīng)用程序三個子任務(wù)。了解HarmonyOS的概念與特性；了解HarmonyOS與OpenHarmony的關(guān)系。知識目標能夠搭建HarmonyOS開發(fā)環(huán)境；能夠創(chuàng)建并運行HarmonyOS應(yīng)用程序。能力目標閱讀并理解軟件技術(shù)文檔；理解鴻蒙系統(tǒng)開發(fā)是突破技術(shù)壁壘，實現(xiàn)系統(tǒng)國產(chǎn)化的有效途徑。素養(yǎng)目標教學目標任務(wù)一認識HarmonyOS應(yīng)用開發(fā)崗位要求任務(wù)二

安裝DevEcoStudioforHarmonyOS任務(wù)三

創(chuàng)建并運行第一個HarmonyOS移動應(yīng)用程序目錄CONTENTS任務(wù)一認識HarmonyOS應(yīng)用開發(fā)崗位要求任務(wù)目標及重點難點知識清單01HarmonyOS的發(fā)展歷程02HarmonyOS系統(tǒng)架構(gòu)03HarmonyOS技術(shù)特性04HarmonyOS應(yīng)用場景知識清單01HarmonyOS的發(fā)展歷程HarmonyOS升級至2.0版本HarmonyOS4正式發(fā)布HarmonyOS3開發(fā)者預(yù)覽版正式發(fā)布華為正式發(fā)布HarmonyOS2012年2019年2020年2021年2023年華為開始規(guī)劃自有操作系統(tǒng)“鴻蒙”知識清單02HarmonyOS系統(tǒng)架構(gòu)知識清單03HarmonyOS技術(shù)特性多種設(shè)備之間通過HarmonyOS可以實現(xiàn)硬件互助和資源共享，依賴的關(guān)鍵技術(shù)主要包括分布式軟總線、分布式數(shù)據(jù)管理、分布式任務(wù)調(diào)度和分布式設(shè)備虛擬化等知識清單03HarmonyOS技術(shù)特性多種設(shè)備之間通過HarmonyOS可以實現(xiàn)硬件互助和資源共享，依賴的關(guān)鍵技術(shù)主要包括分布式軟總線、分布式數(shù)據(jù)管理、分布式任務(wù)調(diào)度和分布式設(shè)備虛擬化等知識清單03HarmonyOS技術(shù)特性多種設(shè)備之間通過HarmonyOS可以實現(xiàn)硬件互助和資源共享，依賴的關(guān)鍵技術(shù)主要包括分布式軟總線、分布式數(shù)據(jù)管理、分布式任務(wù)調(diào)度和分布式設(shè)備虛擬化等知識清單03HarmonyOS技術(shù)特性多種設(shè)備之間通過HarmonyOS可以實現(xiàn)硬件互助和資源共享，依賴的關(guān)鍵技術(shù)主要包括分布式軟總線、分布式數(shù)據(jù)管理、分布式任務(wù)調(diào)度和分布式設(shè)備虛擬化等知識清單03HarmonyOS技術(shù)特性多種設(shè)備之間通過HarmonyOS可以實現(xiàn)硬件互助和資源共享，依賴的關(guān)鍵技術(shù)主要包括分布式軟總線、分布式數(shù)據(jù)管理、分布式任務(wù)調(diào)度和分布式設(shè)備虛擬化等知識清單04HarmonyOS應(yīng)用場景華為“1+8+N”戰(zhàn)略產(chǎn)品示意圖HarmonyOS是面向AIoT的下一代操作系統(tǒng)。AIoT=AI+IoT。AI（ArtificialIntelligence）就是人工智能的意思，IoTInternetofThings）就是物聯(lián)網(wǎng)的意思，也就是說AIoT融合了這兩項技術(shù)。AI的內(nèi)核是智能化，IoT的內(nèi)核是萬物互聯(lián)。HarmonyOS應(yīng)用開發(fā)和安卓應(yīng)用開發(fā)的區(qū)別任務(wù)實施HarmonyOS應(yīng)用開發(fā)人員需求數(shù)量HarmonyOS應(yīng)用開發(fā)人員崗位的招聘要求了解HarmonyOS發(fā)展歷程、系統(tǒng)架構(gòu)、技術(shù)特性和應(yīng)用場景，可以幫助進一步分析HarmonyOS應(yīng)用開發(fā)崗位要求。任務(wù)實施01HarmonyOS應(yīng)用開發(fā)人員需求數(shù)量僅從智能手機應(yīng)用來看，從HarmonyOS發(fā)布以來，迅速成為全球僅次于安卓、iOS外的第三大智能手機操作系統(tǒng)。決定一款操作系統(tǒng)成功的關(guān)鍵在于應(yīng)用生態(tài)，其衡量指標就是用APP的數(shù)量，而APP數(shù)量的關(guān)鍵又在于開發(fā)者數(shù)量。開發(fā)者數(shù)量多，APP就多，生態(tài)才能建立起來。目前蘋果iOS在全球開發(fā)者人數(shù)已經(jīng)超2000萬，遍布77個國家，開發(fā)的APP超過500萬個，蘋果iOS在中國就有440萬開發(fā)者，開發(fā)出超過100萬個APP。谷歌雖不曾公布具體的數(shù)據(jù)，但根據(jù)有關(guān)機構(gòu)的分析，安卓開發(fā)者數(shù)量已經(jīng)超過了蘋果，APP數(shù)量也超過了蘋果，也就是說開發(fā)者數(shù)量超過了2000萬，APP數(shù)量也超過了500萬。而目前HarmonyOS生態(tài)的開發(fā)者數(shù)量為120萬，原生APP數(shù)量僅為300多個。雖然HarmonyOS兼容安卓應(yīng)用，但為了建立鴻蒙應(yīng)用生態(tài)，對HarmonyOS應(yīng)用開發(fā)者的需求量是十分巨大的。任務(wù)實施02HarmonyOS應(yīng)用開發(fā)和安卓應(yīng)用開發(fā)的區(qū)別HarmonyOS能夠兼容安卓應(yīng)用。但HarmonyOS應(yīng)用開發(fā)與安卓應(yīng)用開發(fā)是有區(qū)別的。HarmonyOS是微內(nèi)核設(shè)計，安卓是基于Linux的宏內(nèi)核設(shè)計。為了兼容安卓應(yīng)用，目前HarmonyOS包含與安卓相同的Linux內(nèi)核。在未來HarmonyOS生態(tài)成熟后，將會去掉Linux內(nèi)核，只保留鴻蒙微內(nèi)核，最終實現(xiàn)理想的智能終端分布式系統(tǒng)。相對來說，微內(nèi)核開發(fā)難度大，但是系統(tǒng)穩(wěn)定性高。HarmonyOS目前可以兼容所有的安卓應(yīng)用，同時支持等多終端設(shè)備。任務(wù)實施03HarmonyOS應(yīng)用開發(fā)人員崗位的招聘要求15423熟悉JavaScript/Typescript、React、鴻蒙HiLink、FAJS開發(fā)框架（或微信小程序原生框架）、或類似狀態(tài)管理組件等具有良好編碼風格，有較強的獨立工作能力和團隊合作精神思路清晰，思維敏捷，快速的學習能力熟悉Android或者iOS等其他移動平臺應(yīng)用開發(fā)能根據(jù)產(chǎn)品定義開發(fā)鴻蒙系統(tǒng)的應(yīng)用任職要求任務(wù)拓展OpenHarmony和HarmonyOS有什么區(qū)別常見問題及其解決方法了解HarmonyOS系統(tǒng)1學習編程語言和工具2掌握HarmonyOS的UI框架和設(shè)計理念3遷移現(xiàn)有Android應(yīng)用4開發(fā)新的HarmonyOS應(yīng)用5持續(xù)學習和跟進6如何從Android開發(fā)崗位遷移到HarmonyOS開發(fā)崗位任務(wù)小結(jié)完成的任務(wù)學到的知識HarmonyOS發(fā)展歷程HarmonyOS系統(tǒng)架構(gòu)HarmonyOS技術(shù)特性HarmonyOS應(yīng)用場景通過本任務(wù)認識HarmonyOS，明確鴻蒙應(yīng)用開發(fā)崗位要求，了解OpenHarmony和HarmonyOS的區(qū)別，為后續(xù)搭建鴻蒙開發(fā)環(huán)境和應(yīng)用開發(fā)打下了基礎(chǔ)。任務(wù)二安裝DevEcoStudioforHarmonyOS任務(wù)目標及重點難點知識清單01DevEcoStudio工具HUAWEIDevEcoStudio（以下簡稱DevEcoStudio）是基于IntelliJIDEACommunity開源版本打造，面向華為終端全場景多設(shè)備的一站式集成開發(fā)環(huán)境（IDE），為開發(fā)者提供工程模板創(chuàng)建、開發(fā)、編譯、調(diào)試、發(fā)布等E2E的HarmonyOS應(yīng)用/服務(wù)開發(fā)。通過使用DevEcoStudio，開發(fā)者可以更高效的開發(fā)具備HarmonyOS分布式能力的應(yīng)用/服務(wù)，進而提升創(chuàng)新效率。DevEco

Studio的特點知識清單02HarmonyOSSDK及工具鏈安裝DevEcoStudio任務(wù)實施下載DevEcoStudio配置DevEcoStudio任務(wù)實施01下載DevEcoStudio/consumer/cn/deveco-studio/archive/任務(wù)實施02安裝DevEcoStudio（1）Windows環(huán)境。下載完成后，雙擊下載的“deveco-studio-xxxx.exe”，進入DevEcoStudio安裝向?qū)?，在如下安裝選項界面勾選DevEcoStudio后，點擊Next，直至安裝完成。（2）macOS環(huán)境。下載完成后，雙擊下載的“deveco-studio-xxxx.dmg”軟件包。在安裝界面中，將“DevEco-Studio.app”拖拽到“Applications”中，等待安裝完成。任務(wù)實施03配置DevEcoStudioHarmonyOS應(yīng)用/服務(wù)支持APIVersion4～APIVersion9，首次使用DevEcoStudio，該工具的配置向?qū)龑в脩粝螺dSDK及工具鏈。配置向?qū)J下載APIVersion9的SDK及工具鏈，如需下載APIVersion4～APIVersion8的SDK及工具鏈，可在工程配置完成后，進入HarmonyOSSDK界面手動下載任務(wù)實施03配置DevEcoStudio運行已安裝的DevEcoStudio，若是首次使用，則選擇Donotimportsettings單選按鈕，單擊OK按鈕安裝Node.js與Ohpm?？梢灾付ū镜匾寻惭b的Node.js或Ohpm（Node.js版本要求為v14.19.1及以上，且低于v17.0.0；對應(yīng)的npm版本要求為6.14.16及以上）路徑位置在SDKSetup界面單擊文件夾按鈕，設(shè)置HarmonyOSSDK存儲路徑（HarmonyOSSDK存儲路徑中不能包含中文字符）在彈出的SDK下載信息界面中單擊Next按鈕，并在彈出的HarmonyOSSDKLicenseAgreement界面中閱讀License協(xié)議，須同意License協(xié)議后，單擊Next按鈕開始下載SDK等待Node.js、Ohpm和SDK下載完成后，單擊Finish按鈕，進入DevEcoStudio歡迎頁12345任務(wù)拓展

DevEcoStudio開發(fā)環(huán)境依賴于網(wǎng)絡(luò)環(huán)境，需要連接網(wǎng)絡(luò)才能確保工具的正常使用。一般來說，如果使用的是個人或家庭網(wǎng)絡(luò)，那么是不需要配置代理信息的；只有在部分企業(yè)網(wǎng)絡(luò)受限的情況下，才需要配置代理信息。

如果首次使用DevEcoStudio，那配置向?qū)е袝霈F(xiàn)SetupHTTPProxy界面，如果用戶通過代理服務(wù)器上網(wǎng)，可以通過配置代理的方式來解決，包括配置DevEcoStudio代理、npm代理和Ohpm代理。配置DevEcoStudio代理配置NPM代理配置Ohpm代理常見問題及其解決方法HarmonyOSSDK無法安裝

修改DevEcoStudio快捷方式的兼容性，以管理員身份運行此程序任務(wù)小結(jié)完成的任務(wù)學到的知識DevEcoStudio工具HarmonyOSSDK及工具鏈在本任務(wù)中，完成了DevEcoStudio的安裝與配置。以管理員身份啟動DevEcoStudio能正常進入開發(fā)工具主界面，確保HarmonyOSSDK和相關(guān)工具已經(jīng)正確安裝并配置，表明任務(wù)測評通過，這樣就為后續(xù)應(yīng)用的開發(fā)搭建了必需的開發(fā)環(huán)境任務(wù)三創(chuàng)建并運行第一個HarmonyOS移動應(yīng)用程序任務(wù)目標及重點難點知識清單01HarmonyOS應(yīng)用/服務(wù)開發(fā)流程使用DevEcoStudio，只需要按照如下幾步，即可輕松開發(fā)并上架一個HarmonyOS應(yīng)用/服務(wù)到華為應(yīng)用市場開發(fā)HarmonyOS應(yīng)用/服務(wù)使用DevEcoStudio開發(fā)應(yīng)用或者服務(wù)發(fā)布HarmonyOS應(yīng)用/服務(wù)HarmonyOS應(yīng)用/服務(wù)開發(fā)一切就緒后，需要將應(yīng)用發(fā)布至華為應(yīng)用市場開發(fā)準備注冊一個華為開發(fā)者賬號，并完成實名認證運行、調(diào)試和測試HarmonyOS應(yīng)用/服務(wù)HarmonyOS應(yīng)用/服務(wù)開發(fā)完成后，可以使用真機進行調(diào)試，或者使用模擬器進行調(diào)試使用Previewer工具預(yù)覽程序界面任務(wù)實施創(chuàng)建HelloWorld項目使用模擬器運行HelloWorld任務(wù)實施01創(chuàng)建HelloWorld項目（1）打開DevEcoStudio，在歡迎頁點擊CreateProject，創(chuàng)建一個新工程；（2）根據(jù)工程創(chuàng)建向?qū)?，選擇創(chuàng)建Application應(yīng)用或AtomicService原子化服務(wù)；（3）填寫工程相關(guān)信息，保持默認值即可；（4）工程創(chuàng)建完成后，DevEcoStudio會自動進行工程的同步。任務(wù)實施02使用Previewer工具預(yù)覽程序運行效果（1）在HelloWorld項目左邊目錄結(jié)構(gòu)中找到Index.ets文件并打開（2）單擊右側(cè)邊框欄中的Previewer工具，可以看到程序運行效果任務(wù)實施03使用遠程模擬器運行HelloWorld（1）在DevEcoStudio菜單欄中執(zhí)行Tools→DeviceManager，找到遠程模擬器；（2）在RemoteEmulator標簽中單擊SignIn按鈕，彈出華為開發(fā)者聯(lián)盟賬號（實際一般用“賬號”，軟件中通常為“帳號”）登錄界面，輸入已實名認證的華為開發(fā)者聯(lián)盟賬號的用戶名和密碼進行登錄；（3）成功登錄后，單擊界面中的“允許”按鈕進行授權(quán)；（4）在彈出的設(shè)備列表中，選擇設(shè)備P50，并單擊啟動按鈕，運行遠程模擬器；（5）單擊DevEcoStudio工具欄中的圖標運行項目，或者使用默認快捷鍵<Shift+F10>（macOS為<Ctrl+R>HarmonyOS）運行項目；（6）DevEcoStudio會啟動HarmonyOS應(yīng)用/服務(wù)的編譯構(gòu)建，完成后HarmonyOS應(yīng)用/服務(wù)即可運行在遠程模擬器上。任務(wù)實施03使用遠程模擬器運行HelloWorld任務(wù)拓展配置NPM代理配置Ohpm代理HarmonyOSAPP工程結(jié)構(gòu)常見問題及其解決方法輸入華為賬號開發(fā)者聯(lián)盟賬號后，未出現(xiàn)“允許”按鈕，瀏覽器界面無跳轉(zhuǎn)

使用瀏覽器登錄華為帳號后，如果帳號已經(jīng)實名認證，但還是未出現(xiàn)授權(quán)的“允許”按鈕，瀏覽器界面也未跳轉(zhuǎn)或提示。

出現(xiàn)該問題的原因可能是瀏覽器不兼容導致，模擬器登錄授權(quán)在Chrome、IE11和Safari瀏覽器中進行過充分驗證，建議您將默認瀏覽器設(shè)置為其中一種。

以Windows10為例，打開控制面板>程序>默認程序>設(shè)置默認程序，更改或設(shè)置默認瀏覽器任務(wù)小結(jié)完成的任務(wù)學到的知識HarmonyOS應(yīng)用/服務(wù)開發(fā)流程通過此任務(wù)，能夠運行第一個HarmonyOS移動應(yīng)用程序，且能夠運用Previewer工具和遠程模擬器查看界面運行效果。特別注意的是，遠程模擬器需要實名認證的華為開發(fā)者聯(lián)盟賬號登錄以后才能使用，推薦使用個人銀行卡或者身份證進行實名認證?！兄x觀看——THANKS長沙民政職業(yè)技術(shù)學院鴻蒙應(yīng)用開發(fā)開發(fā)計算器本項目需要實現(xiàn)一個簡單的計算器應(yīng)用。該應(yīng)用可進行簡單的加、減、乘、除運算；單擊C按鈕可清除結(jié)果顯示區(qū)；輸入數(shù)字和運算符后可即時運算；輸入等號后，可計算出結(jié)果并顯示在結(jié)果區(qū)。項目二開發(fā)計算器任務(wù)一實現(xiàn)計算器界面任務(wù)二

實現(xiàn)計算器計算邏輯目錄CONTENTSPART-01工程中核心文件的關(guān)系工程中核心文件的關(guān)系新建一個工程MyCal,程序?qū)⒛J生成如右圖的目錄結(jié)構(gòu)，其中entry是項目下的一個工程模塊。有幾個文件需要關(guān)注，分別是：module.json5、EntryAbility.ts、Index.ets。工程中核心文件的關(guān)系module.json5是模塊配置文件。一個應(yīng)用里可以有多個Ability，每次在工程里通過右鍵新建一個ability，該配置文件將新增一個ability配置。但只有一個Ability對象可以將"skills"的值設(shè)置為{"entities":["entity.system.home"],"actions":["action.system.home"]}，代表該Ability對象為程序啟動后第一個加載的Ability。工程中核心文件的關(guān)系UIAbility組件是系統(tǒng)調(diào)度的基本單元，為應(yīng)用提供繪制界面的窗口EntryAbility.ts中以on開頭的方法都是生命周期函數(shù)。其中onWindowStageCreate通過windowStage.loadContent方法指明需要加載的頁面文件工程中核心文件的關(guān)系打開pages/Index.ets，Index.ets文件由ArkTS語言編寫。應(yīng)用的頁面布局都在后綴為ets的文件中完成Build()方法中，可以完成頁面的布局。注意：build方法里只能由一個根布局。比如右圖中，Column()是build()的直接孩子，它沒有兄弟，這里的Column(）就是一個列布局，是本頁面的唯一的根布局工程中核心文件的關(guān)系@Entry、@Component和@State都是裝飾器。@Component表示這是個自定義組件；@Entry則表示這是個入口組件；@State表示這是組件中的狀態(tài)變量，這個變量變化會觸發(fā)UI刷新。ArkTS中默認內(nèi)置的基礎(chǔ)組件、容器組件、媒體組件、繪制組件、畫布組件等各種組件，開發(fā)者可以直接調(diào)用，如示例中的Column、Text、Divider、Button等。工程中核心文件的關(guān)系@Component實現(xiàn)自定義組件；@Entry則表示這是個入口組件；PART-02常見布局常見布局彈性布局柵格布局網(wǎng)格布局層疊布局12345線性布局常見布局—線性布局線性布局(LinearLayout)是開發(fā)中最常用的布局。線性布局的子組件在線性方向上（水平方向和垂直方向）依次排列。Column容器內(nèi)子組件按照垂直方向排列，Row組件中，子組件按照水平方向排列。根據(jù)不同的排列方向，選擇使用Row或Column容器創(chuàng)建線性布局，通過調(diào)整space，alignItems，justifyContent屬性調(diào)整子組件的間距，水平垂直方向的對齊方式。常見布局—線性布局space的作用及使用方法常見布局—線性布局space的作用及使用方法常見布局—線性布局alignItems的作用及使用方法常見布局—線性布局justifyContent的作用及使用方法在線性布局下，常用空白填充組件Blank，在容器主軸方向自動填充空白空間，達到自適應(yīng)拉伸效果。自適應(yīng)拉伸

@Entry@ComponentstructBlankExample{build(){Column(){Row(){Text('Bluetooth').fontSize(18)Blank()Toggle({type:ToggleType.Switch,isOn:true})}.backgroundColor(0xFFFFFF).borderRadius(15).padding({left:12}).width('100%')}.backgroundColor(0xEFEFEF).padding(20).width('100%')}}常見布局—線性布局自適應(yīng)縮放自適應(yīng)縮放是指在各種不同大小設(shè)備中，子組件按照預(yù)設(shè)的比例，尺寸隨容器尺寸的變化而變化。第一種方法：父容器尺寸確定時，設(shè)置了layoutWeight屬性的子組件與兄弟元素占主軸尺寸按照權(quán)重進行分配，忽略元素本身尺寸設(shè)置，在任意尺寸設(shè)備下，自適應(yīng)占滿剩余空間。第二種方法：父容器尺寸確定時，使用百分比設(shè)置子組件以及兄弟組件的width寬度，可以保證各自元素在任意尺寸下的自適應(yīng)占比。常見布局—線性布局自適應(yīng)縮放第一種方法：父容器尺寸確定時，設(shè)置了layoutWeight屬性的子組件與兄弟元素占主軸尺寸按照權(quán)重進行分配，忽略元素本身尺寸設(shè)置，在任意尺寸設(shè)備下，自適應(yīng)占滿剩余空間。Column(){Text('1:2:3').width('100%')Row(){Column(){Text('layoutWeight(1)').textAlign(TextAlign.Center)

}.layoutWeight(2).backgroundColor(0xffd306).height('100%')

Column(){Text('layoutWeight(2)').textAlign(TextAlign.Center)

}.layoutWeight(4).backgroundColor(0xffed97).height('100%')Column(){Text('layoutWeight(6)').textAlign(TextAlign.Center)

}.layoutWeight(6).backgroundColor(0xffd306).height('100%')}.backgroundColor(0xffd306).height('30%')}常見布局—線性布局自適應(yīng)縮放第二種方法：父容器尺寸確定時，使用百分比設(shè)置子組件以及兄弟組件的width寬度，可以保證各自元素在任意尺寸下的自適應(yīng)占比。Column(){Row(){Column(){Text('leftwidth20%').textAlign(TextAlign.Center)

}.width('20%').backgroundColor(0xffd306).height('100%')Column(){Text('centerwidth50%').textAlign(TextAlign.Center)

}.width('50%').backgroundColor(0xffed97).height('100%')

Column(){Text('rightwidth30%').textAlign(TextAlign.Center)

}.width('30%').backgroundColor(0xffd306).height('100%')}.backgroundColor(0xffd306).height('30%')}常見布局—線性布局常見布局—層疊布局層疊布局（StackLayout）用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。通過層疊容器Stack實現(xiàn)，容器中的子元素依次入棧，后一個子元素覆蓋前一個子元素顯示。對齊方式設(shè)置子元素在容器內(nèi)的對齊方式。支持左上（TopStart），上中（Top），右上（TopEnd），左（Start），中（Center），右（End），左下（BottomStart），中下（Bottom），右下（BottomEnd）九種對齊方式Stack({alignContent:Alignment.BottomStart}){…}常見布局—層疊布局層疊布局（StackLayout）用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。通過層疊容器Stack實現(xiàn)，容器中的子元素依次入棧，后一個子元素覆蓋前一個子元素顯示。Z序控制Stack容器中兄弟組件顯示層級關(guān)系可以通過zIndex屬性改變。zIndex值越大，顯示層級越高，即zIndex值大的組件會覆蓋在zIndex值小的組件上方。

Stack({alignContent:Alignment.BottomStart}){Column(){Text('Stack子元素1').fontSize(20)}.width(100).height(100).backgroundColor(0xffd306).zIndex(2)Column(){Text('Stack子元素2').fontSize(20)}.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)Column(){Text('Stack子元素3').fontSize(20)}.width(200).height(200).backgroundColor(Color.Grey)}.margin({top:100}).width(350).height(350).backgroundColor(0xe0e0e0)常見布局—彈性布局彈性布局（Flex布局）是自適應(yīng)布局中使用最為靈活的布局。彈性布局提供一種更加有效的方式來對容器中的子組件進行排列、對齊和分配空白空間。容器：Flex組件作為Flex布局的容器，用于設(shè)置布局相關(guān)屬性。子組件：Flex組件內(nèi)的子組件自動成為布局的子組件。主軸：Flex組件布局方向的軸線，子組件默認沿著主軸排列。主軸開始的位置稱為主軸起始端，結(jié)束位置稱為主軸終點端。交叉軸：垂直于主軸方向的軸線。交叉軸起始的位置稱為交叉軸首部，結(jié)束位置稱為交叉軸尾部。幾個重要概念常見布局—彈性布局創(chuàng)建一個Flex({direction:FlexDirection.Row}){…}為例，主軸方向為Row,代表橫向。交叉軸為縱向。常見布局—彈性布局彈性布局可通過Flex組件提供的Flex接口創(chuàng)建。如下：Flex(options?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})，參數(shù)direction決定主軸的方向，即子組件的排列方向。可選值有Row、RowReverse、Column、ColumnReverse彈性布局的換行方式常見布局—彈性布局默認情況下，子組件在Flex容器中都排在一條線（又稱"軸線"）上。通過wrap參數(shù)設(shè)置子組件換行方式。可選值有：FlexWrap.NoWrap（默認值）：不換行。如果子組件的寬度總和大于父元素的寬度，則子組件會被壓縮寬度。FlexWrap.Wrap：換行，每一行子組件按照主軸方向排列。FlexWrap.WrapReverse：換行，每一行子組件按照主軸反方向排列。常見布局—彈性布局FlexWrap.NoWrap（默認值）：不換行。如果子組件的寬度總和大于父元素的寬度，則子組件會被壓縮寬度。彈性布局的換行方式常見布局—彈性布局彈性布局的換行方式FlexWrap.Wrap：換行，每一行子組件按照主軸方向排列。FlexWrap.WrapReverse：換行，每一行子組件按照主軸反方向排列。常見布局—彈性布局彈性布局的換行方式主軸對齊：通過justifyContent參數(shù)設(shè)置在主軸方向的對齊方式，存在下面六種情況常見布局—彈性布局彈性布局的換行方式交叉軸對齊：可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式ItemAlign.Start：交叉軸方向首部對齊ItemAlign.Center：交叉軸方向居中對齊ItemAlign.End：交叉軸方向底部對齊交叉軸方向常見布局—彈性布局彈性布局的換行方式交叉軸對齊：可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式ItemAlign.Stretch：交叉軸方向拉伸填充，在未設(shè)置尺寸時，拉伸到容器尺寸ItemAlign.Baseline：交叉軸方向文本基線對齊交叉軸方向常見布局—彈性布局彈性布局的換行方式子組件的alignSelf屬性也可以設(shè)置子組件在父容器交叉軸的對齊格式，且會覆蓋Flex布局容器中alignItems默認配置

Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center}){//容器組件設(shè)置子組件居中Text('alignSelfStart').width('25%').height(80)

.alignSelf(ItemAlign.Start)//子組件自己設(shè)置為首部對齊.backgroundColor(0xF5DEB3)}.width('90%').height(220).backgroundColor(0xAFEEEE)常見布局—彈性布局使用彈性布局，可以實現(xiàn)子組件沿水平方向排列，兩端對齊，子組件間距平分，豎直方向上子組件居中的效果

@Entry@ComponentstructFlexExample{build(){Column(){Column({space:5}){Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap,justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}){Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)Text('2').width('30%').height(50).backgroundColor(0xD2B48C)Text('3').width('30%').height(50).backgroundColor(0xF5DEB3)}.height(70).width('90%').backgroundColor(0xAFEEEE)}.width('100%').margin({top:5})}.width('100%')}}常見布局—網(wǎng)格布局網(wǎng)格布局（GridLayout）是自適應(yīng)布局中一種重要的布局，具備較強的頁面均分能力，子組件占比控制能力。通過Grid容器組件和子組件GridItem實現(xiàn)，Grid用于設(shè)置網(wǎng)格布局相關(guān)參數(shù)，GridItem定義子組件相關(guān)特征（1）容器組件尺寸發(fā)生變化時，所有子組件以及間距等比例調(diào)整，實現(xiàn)布局的自適應(yīng)能力。（2）支持自定義網(wǎng)格布局行數(shù)和列數(shù)，以及每行每列尺寸占比。（3）支持設(shè)置網(wǎng)格布局中子組件的行列間距。（4）支持設(shè)置子組件橫跨幾行或者幾列。優(yōu)勢常見布局—網(wǎng)格布局行列數(shù)量占比：通過Grid的組件的columnsTemplate和rowTemplate屬性設(shè)置網(wǎng)格布局行列數(shù)量與尺寸占比。

Grid(){ForEach(this.Number,(num:string)=>{GridItem(){Text(`列${num}`).fontSize(16).textAlign(TextAlign.Center).backgroundColor(0xd0d0d0).width('100%').height('100%').borderRadius(5)}})

}.columnsTemplate('1fr1fr1fr1fr').rowsTemplate('1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height(100)一行四列常見布局—網(wǎng)格布局通過layoutDirection可以設(shè)置網(wǎng)格布局的主軸方向，決定子組件的排列方式?？蛇x值包括Row，RowReverse，Column，ColumnReverse四種情況。排列方式常見布局—網(wǎng)格布局行列間距columnsGap用于設(shè)置網(wǎng)格子組件GridItem垂直方向的間距，rowsGap用于設(shè)置GridItem水平方向的間距Grid().columnsTemplate('1fr1fr1fr1fr').columnsGap(10).rowsGap(20)常見布局—網(wǎng)格布局網(wǎng)格子組件GridItem設(shè)置子組件橫跨多行時，通過rowStart設(shè)置子組件起始行編號，rowEnd設(shè)置終點行編號。當rowStart值與rowEnd值相同時，子組件只占一個網(wǎng)格Grid(){GridItem(){Text('4').fontSize(16).textAlign(TextAlign.Center).textStyle()

}.columnStart(4).columnEnd(5)//4從第四列到第五列}.columnsTemplate('1fr1fr1fr1fr1fr').rowsTemplate('1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height('200vp').layoutDirection(GridDirection.Column)一行五列，第四列做了列合并常見布局—網(wǎng)格布局網(wǎng)格子組件GridItem設(shè)置子組件橫跨多行時，通過rowStart設(shè)置子組件起始行編號，rowEnd設(shè)置終點行編號。當rowStart值與rowEnd值相同時，子組件只占一個網(wǎng)格Grid(){

GridItem(){Text('5').fontSize(16).textAlign(TextAlign.Center).textStyle()

}.rowStart(2).rowEnd(3)//5子組件從第二行到第三行}.columnsTemplate('1fr').rowsTemplate(‘1fr1fr1fr').columnsGap(10).rowsGap(20).width('90%').backgroundColor(0xF0F0F0).height('200vp').layoutDirection(GridDirection.Column)三行一列，第二行做了行合并PART-03常見組件常見組件組件是構(gòu)建頁面的核心，每個組件通過對數(shù)據(jù)和方法的簡單封裝，實現(xiàn)獨立的可視、可交互功能單元。組件之間相互獨立，隨取隨用，也可以在需求相同的地方重復使用。組件類型主要組件基礎(chǔ)組件Blank、Button、Checkbox、CheckboxGroup、DataPanel、DatePicker、Divider、Gauge、Image、ImageAnimator、LoadingProgress、Marquee、Navigation、PatternLock、PluginComponent、Progress、QRCode、Radio、Rating、RemoteWindow、RichText、ScrollBar、Search、Select、Slider、Span、Stepper、StepperItem、Text、TextArea、TextClock、TextInput、TextPicker、TextTimer、TimePicker、Toggle、Web、XComponent容器組件AbilityComponent、AlphabetIndexer、Badge、Column、ColumnSplit、Counter、Flex、、GridContainer、GridCol、GridRow、Grid、GridItem、List、ListItem、ListItemGroup、Navigator、Panel、Refresh、RelativeContainer、Row、RowSplit、Scroll、SideBarContainer、Stack、Swiper、Tabs、TabContent媒體組件Video繪制組件Circle、Ellipse、Line、Polyline、Polygon、Path、Rect、Shape畫布組件Canvas常見組件組件的創(chuàng)建都是以組件名開頭，接一對英文圓括號，括號內(nèi)是組件的參數(shù)，在括號外可級聯(lián)調(diào)用組件的屬性方法和事件方法。以Text組件為例：Text('你好').fontSize(60).width('95%').height('100%')組件的創(chuàng)建常見組件組件的創(chuàng)建Text組件的創(chuàng)建語法：Text(content?:string|Resource)。參數(shù)說明如表參數(shù)名參數(shù)類型必填參數(shù)描述contentstring|Resource否文本內(nèi)容。包含子組件Span時不生效，顯示Span內(nèi)容，并且此時text組件的樣式不生效。默認值：''常見組件所有組件有一些通用屬性，比如尺寸設(shè)置、位置設(shè)置、邊框設(shè)置、背景設(shè)置等。名稱參數(shù)說明描述widthLength設(shè)置組件自身的寬度，缺省時使用元素自身內(nèi)容需要的寬度。若子組件的寬大于父組件的寬，則會畫出父組件的范圍heightLength設(shè)置組件自身的高度，缺省時使用元素自身內(nèi)容需要的高度。若子組件的高大于父組件的高，則會畫出父組件的范圍paddingPadding|Length設(shè)置內(nèi)邊距屬性。參數(shù)為Length類型時，四個方向內(nèi)邊距同時生效。默認值：0padding設(shè)置百分比時，上下左右內(nèi)邊距均以父容器的width作為基礎(chǔ)值。marginMargin|Length設(shè)置外邊距屬性。參數(shù)為Length類型時，四個方向外邊距同時生效。默認值：0margin設(shè)置百分比時，上下左右外邊距均以父容器的width作為基礎(chǔ)值alignAlignment設(shè)置元素內(nèi)容在元素繪制區(qū)域內(nèi)的對齊方式。默認值：Alignment.CenterbackgroundColorResourceColor設(shè)置組件的背景色。backgroundImagesrc:ResourceStr,repeat?:ImageRepeatsrc：圖片地址，支持網(wǎng)絡(luò)圖片資源和本地圖片資源地址(不支持svg類型的圖片)。repeat：設(shè)置背景圖片的重復樣式，默認不重復fontColorResourceColor設(shè)置字體顏色fontSizeLength設(shè)置字體大小，Length為number類型時，使用fp單位。字體默認大小16。不支持設(shè)置百分比字符串fontStyleFontStyle.Normal正常字體FontStyle.Italic斜體設(shè)置字體樣式。默認值：FontStyle.Normal組件的通用屬性常見組件某些組件在創(chuàng)建時，圓括號里的參數(shù)會用到一些特有屬性，以Button組件為例。Button('Disable',{type:ButtonType.Capsule,stateEffect:false})名稱描述Capsule膠囊型按鈕（圓角默認為高度的一半）Circle圓形按鈕Normal普通按鈕（默認不帶圓角）ButtonType取值組件參數(shù)中的屬性PART-04開發(fā)計算器界面任務(wù)實施—開發(fā)計算器界面將計算器布局從整體到局部進行劃分。由于整個計算器界面背景顏色統(tǒng)一，可以最外面設(shè)計一個Column布局。Column布局里的內(nèi)容將縱向排列，從上往下可分成四個部分，分別是三個Text，一個五行四列的Grid布局。每個Text組件外建議加一個Row布局，表示一行橫向布局。其中等號按鈕要做行合并。界面布局設(shè)計任務(wù)實施—開發(fā)計算器界面打開DevEcoStudio，新建EmptyAbility工程，命名為MyCalStage，注意按圖2-27選項選擇：Bundlename通常以“com.公司名.項目名”構(gòu)成，CompileSDK為3.1.0(API9),Model為Stage，Language為ArkTS，DeviceType暫時只能選Phone。因華為提供的遠程模擬器中針對API9的設(shè)備也還只有Phone。

1、新建工程任務(wù)實施—開發(fā)計算器界面見教材代碼清單2-132、代碼實現(xiàn)任務(wù)實施—開發(fā)計算器界面針對手機的中英文配置進行了適配en_US\element\string.json下定義了英文環(huán)境下的字符配置zh_CN\element\string.json下定義了中文環(huán)境下的字符配置3、語言個性化任務(wù)實施—開發(fā)計算器界面3、語言個性化任務(wù)實施—開發(fā)計算器界面上述資源字符串calculate_name在定義時，如果只在base\element\string.json中定義，而沒有在en_US\element\string.json和zh_CN\element\string.json定義，則會報錯。解決方法：在en_US\element\string.json和zh_CN\element\string.json下同時定義calculate_name3、語言個性化PART-05實現(xiàn)計算器計算邏輯任務(wù)實施—實現(xiàn)計算器計算邏輯所有組件也有一些通用事件，比如點擊事件、觸摸事件、掛載卸載事件等。這里以按鈕的點擊事件為例說明事件的用法。Button組件通常用于觸發(fā)某些操作，可以綁定onClick事件來響應(yīng)點擊操作后的自定義行為onclick中要定義一個響應(yīng)點擊動作的事件處理方法。Button('Ok',{type:ButtonType.Normal,stateEffect:true}).onClick(()=>{('ButtononClick’)})這里面有一個箭頭函數(shù)，屬于ES6的語法事件綁定任務(wù)實施—實現(xiàn)計算器計算邏輯計算器邏輯需要實現(xiàn)加、減、乘、除，在用戶點擊等號時需要進行計算，點擊C鍵時進行刪除。1、首先，要找到需要實現(xiàn)事件響應(yīng)的按鈕，添加事件；2、然后，針對每一種事件實現(xiàn)具體計算邏輯。任務(wù)實施—實現(xiàn)計算器計算邏輯效果測試求余運算尚未實現(xiàn)，請模仿已實現(xiàn)的加、減、乘、除實現(xiàn)求余運算?！兄x觀看——THANKS長沙民政職業(yè)技術(shù)學院鴻蒙應(yīng)用開發(fā)

本任務(wù)需要實現(xiàn)一個聯(lián)系人的應(yīng)用。1.主界面能顯示目前用戶保存的所有聯(lián)系人信息（性別圖標、姓名、電話）2.在通訊錄主界面點擊新增圖標時，進入新增聯(lián)系人界面。如果用戶按界面要求填入電話、聯(lián)系人名稱、性別等信息，點擊保存圖標，則將在系統(tǒng)中保存聯(lián)系人信息，并自動追加到主界面已有聯(lián)系人的最后；如果用戶點擊了對話框的取消圖標，則不會保存新建聯(lián)系人對話框輸入的信息且自動回到主界面。項目三創(chuàng)建通訊錄主界面新建聯(lián)系人界面聯(lián)系人詳情界面主界面學習目標知識目標能力目標素養(yǎng)目標教學目標掌握常用UI組件TextInput、Search的常見方法。掌握線性界面布局。掌握關(guān)系型數(shù)據(jù)庫的使用方法。掌握使用列表List及ListItem顯示條目數(shù)據(jù)的方法。掌握頁面路由以及參數(shù)傳遞方法。熟練掌握鴻蒙移動應(yīng)用開發(fā)的基本流程。能熟練應(yīng)用線性布局編寫界面。能熟練利用List及ListItem顯示列表。能熟練使用關(guān)系數(shù)據(jù)庫進行插入、修改、刪除、查詢數(shù)據(jù)。能熟練掌握頁面路由及參數(shù)傳遞。培養(yǎng)并踐行編碼規(guī)范意識，變量命名可讀、格式規(guī)范，注釋清晰易讀。培養(yǎng)自主學習能力，通過閱讀文檔，學習新知并能在實際項目中運用、解決問題。任務(wù)一實現(xiàn)主界面和新增聯(lián)系人界面任務(wù)二向通訊錄增加聯(lián)系人任務(wù)三顯示通訊錄聯(lián)系人列表任務(wù)四查看聯(lián)系人詳情目錄CONTENTS實現(xiàn)主界面和新增聯(lián)系人界面任務(wù)描述

通訊錄的主界面需求如下面左圖所示，請實現(xiàn)主界面。當用戶點擊了新增圖標時，界面跳轉(zhuǎn)到新增界面，新增界面如右圖所示。在新增界面，點擊標題欄的回退圖標，將回到主界面。主界面聯(lián)系人詳情界面任務(wù)重點及難點任務(wù)目的1．知識目標：（1）掌握常用UI組件Search、TextInput的常見方法；（2）掌握使用router進行頁面跳轉(zhuǎn)的方法；2．能力目標：（1）熟練掌握鴻蒙移動開發(fā)的基本流程中的創(chuàng)建項目、創(chuàng)建界面布局的過程；（2）能熟練應(yīng)用線性布局和層疊布局編寫界面；（3）能熟練使用router實現(xiàn)頁面跳轉(zhuǎn)3．素質(zhì)目標：（1）通過界面布局培養(yǎng)從整體到局部的思維；（2）學習讀API文檔；重難點重點：（1）能熟練使用router實現(xiàn)頁面跳轉(zhuǎn)（2）能熟練應(yīng)用線性布局和層疊布局編寫界面；難點：（1）能熟練應(yīng)用線性布局和層疊布局編寫界面；1.1完成任務(wù)所需知識清單1Search2TextInput3router1.1完成任務(wù)所需知識清單-Search組件當需要對所瀏覽內(nèi)容根據(jù)關(guān)鍵字搜索特定條目時就可以用到搜索框組件。接口定義如下：Search(options?:{value?:string;placeholder?:string;icon?:string;controller?:SearchController})1、Search組件--實現(xiàn)搜索框的組件接口參數(shù)說明表參數(shù)名參數(shù)類型必填參數(shù)描述valuestring否設(shè)置當前顯示的搜索文本內(nèi)容placeholderstring否設(shè)置無輸入時的提示文本iconstring否設(shè)置搜索圖標路徑，默認使用系統(tǒng)搜索圖標，圖標支持的圖源格式:svg、jpg和pngcontrollerSearchController否設(shè)置Search組件控制器1.1完成任務(wù)所需知識清單-Search組件除支持UI組件的通用屬性（比如Width，Height等），還支持其余屬性1、Search組件實現(xiàn)搜索框的組件名稱參數(shù)類型描述searchButtonstring搜索框末尾搜索按鈕文本內(nèi)容，默認無搜索按鈕placeholderColorResourceColor設(shè)置placeholder文本顏色placeholderFontFont設(shè)置placeholder文本樣式textFontFont設(shè)置搜索框內(nèi)輸入文本樣式textAlignTextAlign設(shè)置文本在搜索框中的對齊方式。默認值：TextAlign.StartcopyOption9+CopyOptions設(shè)置輸入的文本是否可復制1.1完成任務(wù)所需知識清單-Search組件除支持通用事件外，還支持其余事件1.Search組件實現(xiàn)搜索框的組件名稱功能描述onSubmit(callback:(value:string)=>void)點擊搜索圖標、搜索按鈕或者按下軟鍵盤搜索按鈕時觸發(fā)該回調(diào)。-value:當前搜索框中輸入的文本內(nèi)容onChange(callback:(value:string)=>void)輸入內(nèi)容發(fā)生變化時，觸發(fā)該回調(diào)。-value:當前搜索框中輸入的文本內(nèi)容1.1完成任務(wù)所需知識清單-Search組件1、Search組件實現(xiàn)搜索框的組件示例：實現(xiàn)一個如圖的搜索框。1.1完成任務(wù)所需知識清單-Search組件1

@Entry2

@Component3

structSearchExample{4

@StatechangeValue:string=''5

@StatesubmitValue:string=''6

controller:SearchController=newSearchController()78

build(){9

Column(){10

Text('onSubmit:'+this.submitValue).fontSize(18).margin(15)11

Text('onChange:'+this.changeValue).fontSize(18).margin(15)12

Search({value:this.changeValue,placeholder:'Typetosearch...',controller:this.controller})13

.searchButton('SEARCH')14

.width(400)15

.height(40)1.1完成任務(wù)所需知識清單-Search組件16

.placeholderColor(Color.Grey)17

.placeholderFont({size:14,weight:400})18

.textFont({size:14,weight:400})19

.onSubmit((value:string)=>{20

this.submitValue=value21

})22

.onChange((value:string)=>{23

this.changeValue=value24

})25

.margin(20)26

Button('SetcaretPosition1')27

.onClick(()=>{28

//設(shè)置光標位置到輸入的第一個字符后29

this.controller.caretPosition(1)30

})31

}.width('100%')32

}33

}1.1完成任務(wù)所需知識清單-TextInput組件接口參數(shù)說明表TextInput是單行文本輸入框組件，可以設(shè)置輸入文本的數(shù)據(jù)類型為字符或者數(shù)字或者密碼，可以設(shè)置輸入框的默認輸入內(nèi)容等屬性。接口定義如下：TextInput(value?:{placeholder?:ResourceStr,text?:ResourceStr,controller?:TextInputController})參數(shù)名參數(shù)類型必填參數(shù)描述placeholderResourceStr否設(shè)置無輸入時的提示文本textResourceStr否設(shè)置輸入框當前的文本內(nèi)容controller8+TextInputController否設(shè)置TextInput控制器1.1完成任務(wù)所需知識清單-TextInput組件

TextInput組件文本輸入框除支持通用屬性外，還支持其余屬性名稱參數(shù)類型描述typeInputType設(shè)置輸入框類型。默認值：InputType.Normal；枚舉值可以選擇Normal,Password,Email,Number,PhoneNumberplaceholderColorResourceColor設(shè)置placeholder文本顏色placeholderFontFont設(shè)置placeholder文本樣式enterKeyTypeEnterKeyType設(shè)置輸入法回車鍵類型，目前僅支持默認類型顯示。默認值：EnterKeyType.DonemaxLengthnumber設(shè)置文本的最大輸入字符數(shù)copyOptionCopyOptions設(shè)置輸入的文本是否可復制。設(shè)置CopyOptions.None時，當前TextArea中的文字無法被復制或剪切，僅支持粘貼showPasswordIconboolean密碼輸入模式時，輸入框末尾的圖標是否顯示。默認值：truestyleTextInputStyle設(shè)置輸入框為默認風格或內(nèi)聯(lián)輸入風格。默認值：TextInputStyle.DefaulttextAlignTextAlign設(shè)置輸入文本在輸入框中的對齊方式。默認值：TextAlign.Start

事件接口名稱功能描述onChange(callback:(value:string)=>void)輸入內(nèi)容發(fā)生變化時，觸發(fā)該回調(diào)。value：輸入的文本內(nèi)容。onSubmit(callback:(enterKey:EnterKeyType)=>void)按下輸入法回車鍵觸發(fā)該回調(diào)，返回值為當前輸入法回車鍵的類型。enterKeyType：輸入法回車鍵類型。具體類型見EnterKeyType枚舉說明。onEditChanged(callback:(isEditing:boolean)=>void)(deprecated)輸入狀態(tài)變化時，觸發(fā)該回調(diào)。從API8開始，建議使用onEditChange。onEditChange(callback:(isEditing:boolean)=>void)8+輸入狀態(tài)變化時，觸發(fā)該回調(diào)。isEditing為true表示正在輸入。1.1完成任務(wù)所需知識清單-TextInput組件

TextInput樣例1.1完成任務(wù)所需知識清單-TextInput組件1@Entry2@Component3structTextInputExample{4@Statetext:string=''5controller:TextInputController=newTextInputController()67build(){8Column(){9TextInput({placeholder:'inputyourword...',controller:this.controller})10.placeholderColor(Color.Grey)11.placeholderFont({size:14,weight:400})12.caretColor(Color.Blue)13.width(400)14.height(40)15.margin(20)16.fontSize(14)17.fontColor(Color.Black)18.onChange((value:string)=>{19this.text=value20})

TextInput樣例1.1完成任務(wù)所需知識清單-TextInput組件21Text(this.text)22Button('SetcaretPosition1')23.margin(15)24.onClick(()=>{25//將光標移動至第一個字符后26this.controller.caretPosition(1)27})28//密碼輸入框29TextInput({placeholder:'inputyourpassword...'})30.width(400)31.height(40)32.margin(20)33.type(InputType.Password)34.maxLength(9)35.showPasswordIcon(true)36//內(nèi)聯(lián)風格輸入框37TextInput({placeholder:'inlinestyle'})38.width(400)39.height(50)40.margin(20)41.borderRadius(0)42.style(TextInputStyle.Inline)43}.width('100%')44}

頁面路由指在應(yīng)用程序中實現(xiàn)不同頁面之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞。HarmonyOS提供了Router模塊，通過不同的url地址，可以方便地進行頁面路由，訪問不同的頁面。兩種跳轉(zhuǎn)模式，決定了目標頁是否會替換當前頁：●

router.pushUrl()：目標頁不會替換當前頁，而是壓入頁面棧。這樣可以保留當前頁的狀態(tài)，并且可以通過返回鍵或者調(diào)用router.back()方法返回到當前頁?！?/p>

router.replaceUrl()：目標頁會替換當前頁，并銷毀當前頁。這樣可以釋放當前頁的資源，并且無法返回到當前頁。1.1完成任務(wù)所需知識清單-router頁面路由

兩種實例模式，分別是Standard和Single。這兩種模式?jīng)Q定了目標url是否會對應(yīng)多個實例?！?/p>

Standard：標準實例模式，也是默認情況下的實例模式。每次調(diào)用該方法都會新建一個目標頁，并壓入棧頂。●

Single：單實例模式。即如果目標頁的url在頁面棧中已經(jīng)存在同url頁面，則離棧頂最近的同url頁面會被移動到棧頂，并重新加載；如果目標頁的url在頁面棧中不存在同url頁面，則按照標準模式跳轉(zhuǎn)。1.1完成任務(wù)所需知識清單-router頁面路由

場景一：有一個主頁（Home）和一個詳情頁（Detail），希望從主頁點擊一個商品，跳轉(zhuǎn)到詳情頁。同時，需要保留主頁在頁面棧中，以便返回時恢復狀態(tài)。這種場景下，可以使用pushUrl()方法，并且使用Standard實例模式（標準實例模式下，router.RouterMode.Standard參數(shù)可以省略）。1//在Home頁面中2functiononJumpClick():void{3router.pushUrl({4url:'pages/Detail'//目標url5},router.RouterMode.Standard,(err)=>{6if(err){7console.error(`InvokepushUrlfailed,codeis${err.code},messageis${err.message}`);8return;9}10('InvokepushUrlsucceeded.');11});12}1.1完成任務(wù)所需知識清單-router頁面路由

場景二：有一個登錄頁（Login）和一個個人中心頁（Profile），希望從登錄頁成功登錄后，跳轉(zhuǎn)到個人中心頁。同時，銷毀登錄頁，在返回時直接退出應(yīng)用。這種場景下，可以使用replaceUrl()方法，并且使用Standard實例模式（或者省略）。場景三：有一個設(shè)置頁（Setting）和一個主題切換頁（Theme），希望從設(shè)置頁點擊主題選項，跳轉(zhuǎn)到主題切換頁。同時，需要保證每次只有一個主題切換頁存在于頁面棧中，在返回時直接回到設(shè)置頁。這種場景下，可以使用pushUrl()方法，并且使用Single實例模式。1.1完成任務(wù)所需知識清單-router頁面路由

場景四：有一個搜索結(jié)果列表頁（SearchResult）和一個搜索結(jié)果詳情頁（SearchDetail），希望從搜索結(jié)果列表頁點擊某一項結(jié)果，跳轉(zhuǎn)到搜索結(jié)果詳情頁。同時，如果該結(jié)果已經(jīng)被查看過，則不需要再新建一個詳情頁，而是直接跳轉(zhuǎn)到已經(jīng)存在的詳情頁。這種場景下，可以使用replaceUrl()方法，并且使用Single實例模式。1.3完成任務(wù)所需知識清單-router頁面路由

當用戶在一個頁面完成操作后，通常需要返回到上一個頁面或者指定頁面，這就需要用到頁面返回功能。方式一：返回到上一個頁面。1router.back();方式二：返回到指定頁面。1router.back({2url:'pages/Home'3});1.3完成任務(wù)所需知識清單-router頁面路由輸入主題完成應(yīng)用的主界面UI框架設(shè)計1.2任務(wù)1的實施任務(wù)目標創(chuàng)建主界面

（1）創(chuàng)建項目啟動