宿遷網(wǎng)站制作win7優(yōu)化極致性能
鴻蒙項(xiàng)目云捐助第二講鴻蒙圖文互動(dòng)基本程序?qū)崿F(xiàn)
結(jié)合第一講建立的“Hello World”程序，得到如下圖所示的界面。
這里的“Hello World”是通過(guò)“Priview”顯示出來(lái)的。在這個(gè)界面中進(jìn)行開(kāi)發(fā)的前奏曲，可以通過(guò)點(diǎn)擊更換圖片的案例來(lái)體會(huì)一下鴻蒙Next的開(kāi)發(fā)使用方法。
###這里我們直接修改鴻蒙Next項(xiàng)目目錄下entry入口模塊中main主文件夾下ets/pages目錄下的index.ets的文件。如下圖所示的文件。
在這個(gè)文件中修改圖片隨按鈕的點(diǎn)擊而變化需要了解一些基本的布局方法，需要記住一些關(guān)鍵的指令標(biāo)簽。
一、鴻蒙Next開(kāi)發(fā)布局中基礎(chǔ)記憶的布局標(biāo)簽
這里完成鴻蒙Next基本的開(kāi)發(fā)布局需要記憶的一些布局組件名稱(chēng)，如下所示：
Row 表示行,在容器中的元素做為行內(nèi)元素顯示
Column 表示列，在容器中的元素做為塊狀元素顯示
Text 表示文字，在Text中可以設(shè)置顯示的文本
Image 表示圖像，在Image中可以設(shè)置圖片的資源文件
Button 表示按鈕，在Button中可以設(shè)置按鈕的文字
這里還可以設(shè)置組件名稱(chēng)的屬性，有兩個(gè)所有組件都具備的屬性是非常重要的。如下所示
width 設(shè)置組件的寬
height 設(shè)置組件的高
二、完成鴻蒙Next的圖片文字按鈕的基本邏輯
在前面介紹了鴻蒙頁(yè)面中常見(jiàn)的圖片，文字及按鈕的組件標(biāo)簽名，這里通過(guò)文字和按鈕實(shí)現(xiàn)一個(gè)簡(jiǎn)單的鴻蒙頁(yè)面，代碼如下圖。
在上述代碼中，Text中的this.message顯示的就是代碼最開(kāi)始設(shè)置的@State指定的信息“Hello World”,在Text的外面有一個(gè)Column()的列式塊狀組件，使Column()元素包含的Text文字和Button按鈕以豎向的形式顯示。在Text的文本組件下面的.fontSize表示字號(hào)的屬性方法，接下來(lái)的.fontWeight表示粗體的屬性方法，繼續(xù)下來(lái)的.alignRule指定了一個(gè)規(guī)則，表示文字的居中方式，這種居中方式由VerticalAlign.Center指定的。有了Text元素的相關(guān)屬性方法指定后，后面跟上的是一個(gè)按鈕Button,按鈕設(shè)定了基本的寬width和高h(yuǎn)eight屬性，同時(shí)設(shè)定一個(gè)方法onClick，這個(gè)onClick就是按鈕點(diǎn)擊后的動(dòng)作，這個(gè)按鈕點(diǎn)擊事發(fā)生的動(dòng)作可以改變之前@State定義的message變量名。把onClick中的功能進(jìn)行限定為點(diǎn)擊按鈕改變文字,實(shí)現(xiàn)的功能代碼如下圖所示。
這里對(duì)比兩次代碼上的不同，在onClick方法中改變message變量的值，可以使用this方法指定一個(gè)新值，新的變量值就會(huì)覆蓋原變量的值。這里的變量定義使用了@State來(lái)定義的。功能上實(shí)現(xiàn)了把原來(lái)的“Hello World”改成了“你好，世界！”,這里可以在預(yù)覽中看到，原來(lái)顯示的是“Hello World”，后面點(diǎn)擊按鈕后，界面上的文字變成了“你好，世界！”。
這里把程序做一個(gè)修改,把文字下面增加一個(gè)圖片,首先找到兩張不同的圖片,這兩張圖片可以從百度圖庫(kù)中搜索到相關(guān)的“風(fēng)景”,如下圖所示。
從百度圖庫(kù)找到圖片后，注意需要把圖片放在鴻蒙Next項(xiàng)目中的media文件夾中，具體位置如下圖所示。
通過(guò)圖示得知，兩張不同的風(fēng)景圖片需要存放在鴻蒙Next項(xiàng)目目錄下entry入口模塊中main主文件夾下resource目錄下的media目錄下，這里產(chǎn)生了兩張圖片，一個(gè)是背景圖片background.png, 一個(gè)是前景圖片foreground.png,下面需要修改功能的需求是點(diǎn)擊按鈕后，不但要更換文字，還需要更換圖片，在鴻蒙頁(yè)面布局中還需要引入一張圖片，在原有index.ets文件的Column列式塊狀元素中添加一個(gè)Image的組件，代碼如下圖。
這里又在Column的列式塊狀元素中又加入了Image的組件，這個(gè)組件位于Button的按鈕組件之上，并使用$r限定使用的資源名稱(chēng)，為了簡(jiǎn)化資源的使用名稱(chēng)，這里把background.png改成a.png,把另個(gè)一個(gè)圖片foreground.png改成b.png。在Image使用時(shí)后面括號(hào)中通過(guò)$r引入資源文件,app.media就指向了圖片的資源目錄，app.media.a就指向圖片資源目錄中的a.png圖片中，后面的.width定義圖片的寬，使用雙引號(hào)帶80%限定圖片占屏幕的80%，如果直接指定數(shù)字就是圖片具體的寬，如后面的.height就是直接指定一個(gè)200的值，即圖片的高是200px的像素值?，F(xiàn)在就可以在“Preview”中顯示一個(gè)圖片，但我們的目的不是只顯示一個(gè)圖片，是顯示一個(gè)圖片后還可以更換圖片，根據(jù)之前改變文字的思想，是需要一個(gè)體@State去定義一個(gè)文字變量，然后onClick點(diǎn)擊時(shí)改變這個(gè)文字變量的內(nèi)容。說(shuō)到這里，照葫蘆畫(huà)個(gè)瓢，我們使用@State定 義一個(gè)圖片資源的變量，通過(guò)onClick點(diǎn)擊后改變這個(gè)圖片資源變量的內(nèi)容。代碼如下圖所示。
從圖中可以看到，這里照著文字的邏輯，先使用@State定義一個(gè)圖片的變量，這個(gè)變量必須是Resource表示資源，這個(gè)資源通過(guò)$r(“app.media.a”)指向了圖片資源目錄中的a.png圖片中,在Image元素的具體調(diào)用中使用這個(gè)pic的變量進(jìn)行顯示，需要在pic的前面指示為this表示@State指定的變量。
繼續(xù)根據(jù)文字改變的邏輯思路，當(dāng)按鈕發(fā)生onClick點(diǎn)擊事件后，發(fā)生了資源變量的圖片資源指向的改變，代碼如下圖。
這里也通過(guò)this指定pic的變量發(fā)生改變，然后在“Preview”預(yù)覽窗口中點(diǎn)擊按鈕后即可以改變文字，也可以改變圖片，如下圖所示。
這樣，通過(guò)調(diào)整和修改后的index.ets中的全代碼如下圖所示。
