目錄

😋環(huán)境配置：華為HarmonyOS開發(fā)者

📺演示效果：

📖實驗步驟及方法：

一、在media文件夾中添加想要使用的圖片素材?

二、在entry/src/main/ets/page目錄下創(chuàng)建Welcome.ets文件

1. 整體結(jié)構(gòu)與組件聲明

2. 狀態(tài)變量聲明

3. 頁面顯示（onPageShow）方法

4. 視圖構(gòu)建部分（build?）方法

（1）掃描漸變（sweepGradient）效果

5.其他內(nèi)容部分

（1）空白元素（Blank）

（2）文本元素（Text）

（3）圖像元素（Image）

👋實驗小結(jié)

---

😋環(huán)境配置：華為HarmonyOS開發(fā)者

🎯學(xué)習(xí)小目標：實現(xiàn)如下的歡迎界面（應(yīng)用啟動加載頁）

📺演示效果：

?

📖實驗步驟及方法：

一、在media文件夾中添加想要使用的圖片素材

二、在entry/src/main/ets/page目錄下創(chuàng)建Welcome.ets文件

界面的實現(xiàn)代碼如下：

@Entry
@Component
@Preview
struct Welcome{@State opacityValue: number = 0.3;onPageShow(): void {this.opacityValue = 1}build() {Column(){Blank()Blank()Column(){Text('奇怪的知識').fontColor(Color.Gray).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:2000,iterations:1,onFinish: ()=>{}})Blank()Column() {Image($r('app.media.smartCat')).width(200)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:2000,iterations:1,onFinish: ()=>{}})Blank()Column() {Text('增加了!').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Start).opacity(this.opacityValue).alignItems(HorizontalAlign.Start).opacity(this.opacityValue).animation({duration:1500,iterations:10,onFinish: ()=>{}})Blank()Blank()Blank()Column() {Image($r('app.media.RossyYan')).width(200).opacity(0.15)}}.width('100%').height('100%').sweepGradient({center: [180,327],start: 0,end: 359,rotation: 45, // 旋轉(zhuǎn)角度repeating: true, // 漸變顏色是否重復(fù)colors: [[0x0E0B0B, 0.0], [0x81817D, 0.3], [0x020202, 0.5]] // 數(shù)組末尾元素占比小于1時滿足重復(fù)著色效果})}
}

以下是對這段代碼的詳細講解：

1. 整體結(jié)構(gòu)與組件聲明

• @Entry、@Component、@Preview?注解（裝飾器）：

  • @Entry?通常用于標識這個組件是整個應(yīng)用程序的入口組件，意味著程序啟動時可能會首先展示這個組件所定義的界面內(nèi)容。
  • @Component?表明這是一個可復(fù)用的組件，它可以被組合到其他更復(fù)雜的界面結(jié)構(gòu)中，符合組件化開發(fā)的理念。
  • @Preview?往往用于在開發(fā)工具中提供組件的預(yù)覽功能，方便開發(fā)者快速查看組件呈現(xiàn)的樣子，而無需完整啟動整個應(yīng)用程序。

• Welcome?結(jié)構(gòu)體：定義了一個名為?Welcome?的結(jié)構(gòu)體，它代表了整個界面組件的邏輯和視圖結(jié)構(gòu)。

2. 狀態(tài)變量聲明

@State opacityValue: number = 0.3;

• 這里使用?@State?裝飾器聲明了一個名為?opacityValue?的狀態(tài)變量，類型為數(shù)字（number），初始值被設(shè)置為?0.3。在響應(yīng)式編程框架中，狀態(tài)變量的變化會觸發(fā)界面的重新渲染，以便更新相應(yīng)的顯示效果，比如這里會影響后續(xù)一些視圖元素的透明度相關(guān)表現(xiàn)。

3. 頁面顯示（onPageShow）方法

onPageShow(): void {this.opacityValue = 1
}

• 定義了?onPageShow?方法，它很可能是在頁面顯示（比如初次加載、從后臺切換到前臺等觸發(fā)頁面可見的情況）時被調(diào)用的回調(diào)函數(shù)。在這個函數(shù)中，將?opacityValue?的值修改為?1，這意味著頁面顯示時會改變相關(guān)元素的透明度情況（后續(xù)使用該變量控制透明度的視圖元素會有相應(yīng)變化）。

4. 視圖構(gòu)建部分（build?）方法

build() {Column(){// 內(nèi)部視圖元素}.width('100%').height('100%').sweepGradient({// 漸變相關(guān)配置})
}

build?方法用于構(gòu)建組件的視圖層級結(jié)構(gòu)。整體上是一個垂直方向排列的?Column（列）布局，占據(jù)父容器的?100%?寬度和?100%?高度（通過?.width('100%').height('100%')?設(shè)置）。

（1）掃描漸變（sweepGradient）效果

設(shè)置了一個掃描漸變（sweepGradient）效果，相關(guān)配置如下：

• center：指定了漸變的中心坐標為?[180, 327]，決定了漸變的起始位置參照點。
• start?和?end：分別定義了漸變的起始角度（0）和結(jié)束角度（359），意味著漸變會繞著中心旋轉(zhuǎn)一圈覆蓋整個范圍。
• rotation：設(shè)置了額外的旋轉(zhuǎn)角度為?45?度，進一步調(diào)整漸變的呈現(xiàn)效果。
• repeating：設(shè)置為?true，表明漸變顏色會重復(fù)顯示，營造出一種循環(huán)的漸變效果。
• colors：定義了漸變的顏色數(shù)組，包含了三個顏色元素，每個元素是一個包含顏色值（十六進制表示，如?0x0E0B0B?等）和占比（如?0.0、0.3、0.5）的數(shù)組，末尾元素占比小于?1?時滿足重復(fù)著色效果，從而實現(xiàn)漸變的色彩過渡和循環(huán)效果。

5.其他內(nèi)容部分

（1）空白元素（Blank）

多次出現(xiàn)了?Blank()，從名字推測可能是用于占位、增加間距等作用的空白視圖，不過具體功能還得看對應(yīng)框架中?Blank?組件的實際定義。

（2）文本元素（Text）

Text('奇怪的知識').fontColor(Color.Gray).fontSize(36).fontWeight(FontWeight.Bold)

這是一個顯示文本的視圖，文本內(nèi)容為 “奇怪的知識”，設(shè)置了字體顏色為灰色（Color.Gray），字體大小為?36，字體加粗（FontWeight.Bold），并且其透明度受?opacityValue?狀態(tài)變量控制，同時還添加了一個動畫效果，動畫相關(guān)配置如下：

.animation({duration:2000,iterations:1,onFinish: ()=>{}
})

意味著這個文本元素在顯示時有一個時長為?2000?毫秒（2?秒）的動畫過程，動畫僅執(zhí)行一次（iterations: 1），當動畫結(jié)束時執(zhí)行?onFinish?回調(diào)函數(shù)（這里函數(shù)體為空，可能根據(jù)實際需求補充相應(yīng)邏輯）。

類似的還有另外兩個文本元素：

Text('增加了!').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)

這個文本顯示 “增加了！”，字體顏色為白色，字體大小等設(shè)置與之前類似，不過動畫配置有所不同，時長為?1500?毫秒（1.5?秒），且會重復(fù)執(zhí)行?10?次（iterations: 10）。

（3）圖像元素（Image）

有兩處使用了?Image?來顯示圖片：

Image($r('app.media.smartCat')).width(200)

這是加載一張圖片（通過?$r('app.media.smartCat')?這種資源引用方式，具體取決于對應(yīng)框架的資源管理機制），并設(shè)置圖片寬度為?200?單位（具體單位也看框架默認設(shè)置，可能是像素等），其透明度同樣受?opacityValue?狀態(tài)變量控制，也有一個時長?2000?毫秒、執(zhí)行一次的動畫效果。

還有：

Image($r('app.media.RossyYan')).width(200).opacity(0.15)

加載另一張圖片（$r('app.media.RossyYan')），寬度設(shè)置為?200，并且初始透明度被設(shè)置為?0.15，不過這里沒有看到額外的動畫效果添加到這個特定的圖片元素上（與前面帶動畫的元素對比而言）。

👋實驗小結(jié)

在本次對 Welcome 組件的探索過程中，雖略有收獲，但深知仍有漫漫長路要走。
從代碼架構(gòu)層面而言，@Entry 指明入口、@Component 助力復(fù)用、@Preview 便于預(yù)覽，只是初窺門徑，為開發(fā)流程帶來些許便利。@State 變量操控元素透明度，在頁面加載時有了初步動態(tài)呈現(xiàn)，尚不算精巧。Column 布局結(jié)合漸變背景，安置文本、圖像，勉強構(gòu)建出可用界面。動畫增添幾分生氣，可提升空間巨大。尤其動畫回調(diào)與 Blank 組件，細節(jié)粗糙，后續(xù)定當潛心鉆研，力求精進。