鴻蒙系統(tǒng)應(yīng)用開發(fā)項(xiàng)目化教程 課件 項(xiàng)目1、2 建立HarmonyOS開發(fā)環(huán)境、開發(fā)計(jì)算器

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

安裝DevEcoStudioforHarmonyOS任務(wù)三

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

Studio的特點(diǎn)知識(shí)清單02HarmonyOSSDK及工具鏈安裝DevEcoStudio任務(wù)實(shí)施下載DevEcoStudio配置DevEcoStudio任務(wù)實(shí)施01下載DevEcoStudio/consumer/cn/deveco-studio/archive/任務(wù)實(shí)施02安裝DevEcoStudio（1）Windows環(huán)境。下載完成后，雙擊下載的“deveco-studio-xxxx.exe”，進(jìn)入DevEcoStudio安裝向?qū)?，在如下安裝選項(xiàng)界面勾選DevEcoStudio后，點(diǎn)擊Next，直至安裝完成。（2）macOS環(huán)境。下載完成后，雙擊下載的“deveco-studio-xxxx.dmg”軟件包。在安裝界面中，將“DevEco-Studio.app”拖拽到“Applications”中，等待安裝完成。任務(wù)實(shí)施03配置DevEcoStudioHarmonyOS應(yīng)用/服務(wù)支持APIVersion4～APIVersion9，首次使用DevEcoStudio，該工具的配置向?qū)?huì)引導(dǎo)用戶下載SDK及工具鏈。配置向?qū)J(rèn)下載APIVersion9的SDK及工具鏈，如需下載APIVersion4～APIVersion8的SDK及工具鏈，可在工程配置完成后，進(jìn)入HarmonyOSSDK界面手動(dòng)下載任務(wù)實(shí)施03配置DevEcoStudio運(yùn)行已安裝的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存儲(chǔ)路徑（HarmonyOSSDK存儲(chǔ)路徑中不能包含中文字符）在彈出的SDK下載信息界面中單擊Next按鈕，并在彈出的HarmonyOSSDKLicenseAgreement界面中閱讀License協(xié)議，須同意License協(xié)議后，單擊Next按鈕開始下載SDK等待Node.js、Ohpm和SDK下載完成后，單擊Finish按鈕，進(jìn)入DevEcoStudio歡迎頁12345任務(wù)拓展

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

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

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

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

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

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

實(shí)現(xiàn)計(jì)算器計(jì)算邏輯目錄CONTENTSPART-01工程中核心文件的關(guān)系工程中核心文件的關(guān)系新建一個(gè)工程MyCal,程序?qū)⒛J(rèn)生成如右圖的目錄結(jié)構(gòu)，其中entry是項(xiàng)目下的一個(gè)工程模塊。有幾個(gè)文件需要關(guān)注，分別是：module.json5、EntryAbility.ts、Index.ets。工程中核心文件的關(guān)系module.json5是模塊配置文件。一個(gè)應(yīng)用里可以有多個(gè)Ability，每次在工程里通過右鍵新建一個(gè)ability，該配置文件將新增一個(gè)ability配置。但只有一個(gè)Ability對象可以將"skills"的值設(shè)置為{"entities":["entity.system.home"],"actions":["action.system.home"]}，代表該Ability對象為程序啟動(dòng)后第一個(gè)加載的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方法里只能由一個(gè)根布局。比如右圖中，Column()是build()的直接孩子，它沒有兄弟，這里的Column(）就是一個(gè)列布局，是本頁面的唯一的根布局工程中核心文件的關(guān)系@Entry、@Component和@State都是裝飾器。@Component表示這是個(gè)自定義組件；@Entry則表示這是個(gè)入口組件；@State表示這是組件中的狀態(tài)變量，這個(gè)變量變化會(huì)觸發(fā)UI刷新。ArkTS中默認(rèn)內(nèi)置的基礎(chǔ)組件、容器組件、媒體組件、繪制組件、畫布組件等各種組件，開發(fā)者可以直接調(diào)用，如示例中的Column、Text、Divider、Button等。工程中核心文件的關(guān)系@Component實(shí)現(xiàn)自定義組件；@Entry則表示這是個(gè)入口組件；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，在容器主軸方向自動(dòng)填充空白空間，達(dá)到自適應(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í)，設(shè)置了layoutWeight屬性的子組件與兄弟元素占主軸尺寸按照權(quán)重進(jìn)行分配，忽略元素本身尺寸設(shè)置，在任意尺寸設(shè)備下，自適應(yīng)占滿剩余空間。第二種方法：父容器尺寸確定時(shí)，使用百分比設(shè)置子組件以及兄弟組件的width寬度，可以保證各自元素在任意尺寸下的自適應(yīng)占比。常見布局—線性布局自適應(yīng)縮放第一種方法：父容器尺寸確定時(shí)，設(shè)置了layoutWeight屬性的子組件與兄弟元素占主軸尺寸按照權(quán)重進(jì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í)，使用百分比設(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實(shí)現(xiàn)，容器中的子元素依次入棧，后一個(gè)子元素覆蓋前一個(gè)子元素顯示。對齊方式設(shè)置子元素在容器內(nèi)的對齊方式。支持左上（TopStart），上中（Top），右上（TopEnd），左（Start），中（Center），右（End），左下（BottomStart），中下（Bottom），右下（BottomEnd）九種對齊方式Stack({alignContent:Alignment.BottomStart}){…}常見布局—層疊布局層疊布局（StackLayout）用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。通過層疊容器Stack實(shí)現(xiàn)，容器中的子元素依次入棧，后一個(gè)子元素覆蓋前一個(gè)子元素顯示。Z序控制Stack容器中兄弟組件顯示層級(jí)關(guān)系可以通過zIndex屬性改變。zIndex值越大，顯示層級(jí)越高，即zIndex值大的組件會(huì)覆蓋在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)布局中使用最為靈活的布局。彈性布局提供一種更加有效的方式來對容器中的子組件進(jìn)行排列、對齊和分配空白空間。容器：Flex組件作為Flex布局的容器，用于設(shè)置布局相關(guān)屬性。子組件：Flex組件內(nèi)的子組件自動(dòng)成為布局的子組件。主軸：Flex組件布局方向的軸線，子組件默認(rèn)沿著主軸排列。主軸開始的位置稱為主軸起始端，結(jié)束位置稱為主軸終點(diǎn)端。交叉軸：垂直于主軸方向的軸線。交叉軸起始的位置稱為交叉軸首部，結(jié)束位置稱為交叉軸尾部。幾個(gè)重要概念常見布局—彈性布局創(chuàng)建一個(gè)Flex({direction:FlexDirection.Row}){…}為例，主軸方向?yàn)镽ow,代表橫向。交叉軸為縱向。常見布局—彈性布局彈性布局可通過Flex組件提供的Flex接口創(chuàng)建。如下：Flex(options?:{direction?:FlexDirection,wrap?:FlexWrap,justifyContent?:FlexAlign,alignItems?:ItemAlign,alignContent?:FlexAlign})，參數(shù)direction決定主軸的方向，即子組件的排列方向?？蛇x值有Row、RowReverse、Column、ColumnReverse彈性布局的換行方式常見布局—彈性布局默認(rèn)情況下，子組件在Flex容器中都排在一條線（又稱"軸線"）上。通過wrap參數(shù)設(shè)置子組件換行方式?？蛇x值有：FlexWrap.NoWrap（默認(rèn)值）：不換行。如果子組件的寬度總和大于父元素的寬度，則子組件會(huì)被壓縮寬度。FlexWrap.Wrap：換行，每一行子組件按照主軸方向排列。FlexWrap.WrapReverse：換行，每一行子組件按照主軸反方向排列。常見布局—彈性布局FlexWrap.NoWrap（默認(rèn)值）：不換行。如果子組件的寬度總和大于父元素的寬度，則子組件會(huì)被壓縮寬度。彈性布局的換行方式常見布局—彈性布局彈性布局的換行方式FlexWrap.Wrap：換行，每一行子組件按照主軸方向排列。FlexWrap.WrapReverse：換行，每一行子組件按照主軸反方向排列。常見布局—彈性布局彈性布局的換行方式主軸對齊：通過justifyContent參數(shù)設(shè)置在主軸方向的對齊方式，存在下面六種情況常見布局—彈性布局彈性布局的換行方式交叉軸對齊：可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式ItemAlign.Start：交叉軸方向首部對齊ItemAlign.Center：交叉軸方向居中對齊ItemAlign.End：交叉軸方向底部對齊交叉軸方向常見布局—彈性布局彈性布局的換行方式交叉軸對齊：可以通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式ItemAlign.Stretch：交叉軸方向拉伸填充，在未設(shè)置尺寸時(shí)，拉伸到容器尺寸ItemAlign.Baseline：交叉軸方向文本基線對齊交叉軸方向常見布局—彈性布局彈性布局的換行方式子組件的alignSelf屬性也可以設(shè)置子組件在父容器交叉軸的對齊格式，且會(huì)覆蓋Flex布局容器中alignItems默認(rèn)配置

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)常見布局—彈性布局使用彈性布局，可以實(shí)現(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)布局中一種重要的布局，具備較強(qiáng)的頁面均分能力，子組件占比控制能力。通過Grid容器組件和子組件GridItem實(shí)現(xiàn)，Grid用于設(shè)置網(wǎng)格布局相關(guān)參數(shù)，GridItem定義子組件相關(guān)特征（1）容器組件尺寸發(fā)生變化時(shí)，所有子組件以及間距等比例調(diào)整，實(shí)現(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è)置子組件橫跨多行時(shí)，通過rowStart設(shè)置子組件起始行編號(hào)，rowEnd設(shè)置終點(diǎn)行編號(hào)。當(dāng)rowStart值與rowEnd值相同時(shí)，子組件只占一個(gè)網(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è)置子組件橫跨多行時(shí)，通過rowStart設(shè)置子組件起始行編號(hào)，rowEnd設(shè)置終點(diǎn)行編號(hào)。當(dāng)rowStart值與rowEnd值相同時(shí)，子組件只占一個(gè)網(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)建頁面的核心，每個(gè)組件通過對數(shù)據(jù)和方法的簡單封裝，實(shí)現(xiàn)獨(dú)立的可視、可交互功能單元。組件之間相互獨(dú)立，隨取隨用，也可以在需求相同的地方重復(fù)使用。組件類型主要組件基礎(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)建都是以組件名開頭，接一對英文圓括號(hào)，括號(hào)內(nèi)是組件的參數(shù)，在括號(hào)外可級(jí)聯(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時(shí)不生效，顯示Span內(nèi)容，并且此時(shí)text組件的樣式不生效。默認(rèn)值：''常見組件所有組件有一些通用屬性，比如尺寸設(shè)置、位置設(shè)置、邊框設(shè)置、背景設(shè)置等。名稱參數(shù)說明描述widthLength設(shè)置組件自身的寬度，缺省時(shí)使用元素自身內(nèi)容需要的寬度。若子組件的寬大于父組件的寬，則會(huì)畫出父組件的范圍heightLength設(shè)置組件自身的高度，缺省時(shí)使用元素自身內(nèi)容需要的高度。若子組件的高大于父組件的高，則會(huì)畫出父組件的范圍paddingPadding|Length設(shè)置內(nèi)邊距屬性。參數(shù)為Length類型時(shí)，四個(gè)方向內(nèi)邊距同時(shí)生效。默認(rèn)值：0padding設(shè)置百分比時(shí)，上下左右內(nèi)邊距均以父容器的width作為基礎(chǔ)值。marginMargin|Length設(shè)置外邊距屬性。參數(shù)為Length類型時(shí)，四個(gè)方向外邊距同時(shí)生效。默認(rèn)值：0margin設(shè)置百分比時(shí)，上下左右外邊距均以父容器的width作為基礎(chǔ)值alignAlignment設(shè)置元素內(nèi)容在元素繪制