《鴻蒙JS應用開發(fā)》項目3應用開發(fā)基礎3.2.2任務簡單組件的使用任務陳述在這個任務中，您將了解ArkUI中的組件（Component）概念以及基本使用。組件是構建和組織頁面的基礎單元，并且在下一章節(jié)我們將深入學習不同類型的組件，通過本任務，您只需要掌握簡單組件（div,text,和image）的使用即可，方便我們掌握頁面開發(fā)的基礎知識。學習目標理解div,text,和image組件的基礎用途和功能學習如何在ArkUI中正確地使用這些基礎組件學習如何通過CSS樣式來控制這些組件的視覺表現。學習準備基礎的HTML和CSS知識，特別是對于標簽和選擇器的理解。對JavaScript的基礎了解，特別是DOM操作?；A的ArkUI框架了解，例如如何創(chuàng)建一個新頁面等。任務實施01任務導入在鴻蒙開發(fā)中，一個App應用包含多個hap，一個hap包含了多個page頁面，而一個page頁面則包含了多個組件。開發(fā)者可以將應用設計為多個page頁面，每個頁面進行單獨的文件管理，并通過路由API實現頁面的調度管理，以實現應用內功能的解耦。組件（Component）則構成了頁面開發(fā)的核心，每個組件都是通過對數據和方法的精簡封裝，實現了獨立的可視化和可交互的功能單元。這些組件彼此獨立，可以根據需要隨時取用，同時在不同的場景中重復使用，極大地提高了開發(fā)效率。那么接下來我們先來學習幾個簡單的組件。div組件的介紹在傳統(tǒng)的HTML標簽中，div標簽是我們頻繁用到的標簽，在ArkUI中div也是非常重要的組件，在每一個頁面中都應該包含一個根組件，就是接下來要使用的div組件。div組件作為單純的布局容器，可以支持多種子組件，使用起來更為方便。簡單來講，可以將它想象成是一個盒子。這個盒子可以設置他的寬、高、顏色，還可以往盒子里添加圖形、文字等或者其他容器組件。如果有多個盒子，可以通過CSS樣式對他們進行排版，例如上、下、左、右排列以及設置外邊距，內邊距等操作。在頁面結構相對簡單時，可以直接用div作為容器。div組件新建一個index.hml文件，代碼如下。注意：關于div的使用還需要注意，每個頁面有且只能有一個div根節(jié)點，該頁面下所有的組件必須被包含在里面去使用。例如下面的代碼編譯是會報錯的：<divclass="container">

<divclass="inner_div1"></div>

<divclass="inner_div2"></div>

<divclass="inner_div3"></div>

</div><divclass="navigate"></div>

<divclass="container"></div>css

樣式新建一個index.css文件，代碼如下.container{

width:100%;/*設置容器寬度為100%*/

height:100%;/*設置容器高度為100%*/

display:flex;/*使用彈性布局*/

flex-direction:column;/*主軸方向為垂直方向，子元素垂直排列*/

justify-content:center;/*沿主軸居中對齊*/

align-items:center;/*沿交叉軸居中對齊*/

}

.container>div{

width:300px;

/*設置子元素寬度為300px*/

height:300px;

/*設置子元素高度為300px*/

margin-bottom:100px;/*底邊距為100px，用于分隔子元素*/

}.inner_div1{

background-color:red;/*設置背景顏色為紅色*/

}

.inner_div2{

background-color:blue;/*設置背景顏色為藍色*/

}

.inner_div3{background-color:green;/*設置背景顏色為綠色*/

}

查看效果預覽器查看效果如下圖所示：text組件如果要想在界面中顯示文字，必須使用text組件，這是因為在div中目前還不支持直接顯示文字，想讓文字顯示則需要結合text組件來使用，代碼如下。例如下面的代碼編譯是不會報錯，但是在預覽器中是不會顯示的：<divclass="container">

<text>

HelloWorld

</text>

</div><divclass="container">

HelloWorld

</div>text組件注意：text組件不支持text內同時存在文本內容和span子組件。如果同時存在，會顯示后者，代碼如下所示：<divclass="container">

<text>

<span>HelloWorld</span>

HarmonyOS

</text>

</div>預覽器查看效果如下圖所示：image組件在HarmonyOS應用開發(fā)中，圖形界面的美觀性常常依賴于圖像的展示與渲染。圖像展示的工作通常由Image圖片組件來完成，該組件專門負責呈現圖像。Image組件的工作方式是通過src屬性指定圖像的路徑，支持使用本地路徑引用圖像資源，同時支持多種常見圖像格式，如png、jpg、bmp、svg和gif。通常，開發(fā)者會將應用所需的圖像文件存儲在common文件夾下以便進行訪問和使用。如圖所示：image組件的常見屬性在某些情況下，圖像的加載可能需要一些時間，這時可以通過設置alt屬性來顯示占位圖，以在圖像加載過程中提供用戶一個視覺提示。Image組件還支持其他一些樣式屬性的設置，例如border-radius，用于將圖像呈現為圓形形狀，以增強設計效果。另外，object-fit樣式屬性也可以用來調整圖像的縮放方式，以確保圖像在不同尺寸的容器中適切地顯示，提高了圖像的可視性和美觀性。接下來我們將演示一遍hml

演示代碼hml代碼如下所示：<divclass="container">

<imagesrc="../../common/images/ic_banner01.png"class="img1"/>

<imagesrc="../../common/images/ic_banner02.png"class="img2"/>

<imagesrc="../../common/images/ic_banner03.png"class="img3"/>

<imagesrc="../../common/images/ic_banner04.png"class="img4"/>

<imagesrc="../../common/images/ic_banner05.png"class="img5"/>

</div>css

演示代碼css代碼如下所示：.container{

display:flex;/*使用彈性布局*/

flex-direction:column;/*主軸方向為垂直方向，子元素垂直排列*/

justify-content:center;/*沿主軸居中對齊*/

align-items:center;/*沿交叉軸居中對齊*/

width:100%;/*設置容器寬度為100%*/

height:100%;/*設置容器高度為100%*/

}

image{

/*設置圖像的邊框樣式，綠色邊框，寬度為10px*/

border:10pxsolidgreen;

}

.img1{

/*保持原有尺寸進行居中顯示*/

object-fit:none;}

.img2{

/*保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內，居中顯示*/

object-fit:contain;

}

.img3{

/*保持寬高比進行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界，居中顯示*/

object-fit:cover;

}

.img