【HarmonyOS应用开发——ArkTS语言】欢迎界面（启动加载页）的实现【合集】
目录
😋环境配置：华为HarmonyOS开发者
📺演示效果：
📖实验步骤及方法：
一、在media文件夹中添加想要使用的图片素材
二、在entry/src/main/ets/page目录下创建Welcome.ets文件
1. 整体结构与组件声明
2. 状态变量声明
3. 页面显示（onPageShow）方法
4. 视图构建部分（build ）方法
（1）扫描渐变（sweepGradient）效果
5.其他内容部分
（1）空白元素（Blank）
（2）文本元素（Text）
（3）图像元素（Image）
👋实验小结
😋环境配置：华为HarmonyOS开发者
🎯学习小目标：实现如下的欢迎界面（应用启动加载页）
📺演示效果：
📖实验步骤及方法：
一、在media文件夹中添加想要使用的图片素材
二、在entry/src/main/ets/page目录下创建Welcome.ets文件
界面的实现代码如下：
@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, // 旋转角度repeating: true, // 渐变颜色是否重复colors: [[0x0E0B0B, 0.0], [0x81817D, 0.3], [0x020202, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果})} }以下是对这段代码的详细讲解：
1. 整体结构与组件声明
@Entry、@Component、@Preview注解（装饰器）：
@Entry通常用于标识这个组件是整个应用程序的入口组件，意味着程序启动时可能会首先展示这个组件所定义的界面内容。@Component表明这是一个可复用的组件，它可以被组合到其他更复杂的界面结构中，符合组件化开发的理念。@Preview往往用于在开发工具中提供组件的预览功能，方便开发者快速查看组件呈现的样子，而无需完整启动整个应用程序。
Welcome结构体：定义了一个名为Welcome的结构体，它代表了整个界面组件的逻辑和视图结构。2. 状态变量声明
@State opacityValue: number = 0.3;
- 这里使用
@State装饰器声明了一个名为opacityValue的状态变量，类型为数字（number），初始值被设置为0.3。在响应式编程框架中，状态变量的变化会触发界面的重新渲染，以便更新相应的显示效果，比如这里会影响后续一些视图元素的透明度相关表现。3. 页面显示（
onPageShow）方法onPageShow(): void {this.opacityValue = 1 }
- 定义了
onPageShow方法，它很可能是在页面显示（比如初次加载、从后台切换到前台等触发页面可见的情况）时被调用的回调函数。在这个函数中，将opacityValue的值修改为1，这意味着页面显示时会改变相关元素的透明度情况（后续使用该变量控制透明度的视图元素会有相应变化）。4. 视图构建部分（
build）方法build() {Column(){// 内部视图元素}.width('100%').height('100%').sweepGradient({// 渐变相关配置}) }
build方法用于构建组件的视图层级结构。整体上是一个垂直方向排列的Column（列）布局，占据父容器的100%宽度和100%高度（通过.width('100%').height('100%')设置）。（1）扫描渐变（
sweepGradient）效果设置了一个扫描渐变（
sweepGradient）效果，相关配置如下：
center：指定了渐变的中心坐标为[180, 327]，决定了渐变的起始位置参照点。start和end：分别定义了渐变的起始角度（0）和结束角度（359），意味着渐变会绕着中心旋转一圈覆盖整个范围。rotation：设置了额外的旋转角度为45度，进一步调整渐变的呈现效果。repeating：设置为true，表明渐变颜色会重复显示，营造出一种循环的渐变效果。colors：定义了渐变的颜色数组，包含了三个颜色元素，每个元素是一个包含颜色值（十六进制表示，如0x0E0B0B等）和占比（如0.0、0.3、0.5）的数组，末尾元素占比小于1时满足重复着色效果，从而实现渐变的色彩过渡和循环效果。5.其他内容部分
（1）空白元素（
Blank）多次出现了
Blank()，从名字推测可能是用于占位、增加间距等作用的空白视图，不过具体功能还得看对应框架中Blank组件的实际定义。（2）文本元素（
Text）Text('奇怪的知识').fontColor(Color.Gray).fontSize(36).fontWeight(FontWeight.Bold)这是一个显示文本的视图，文本内容为 “奇怪的知识”，设置了字体颜色为灰色（
Color.Gray），字体大小为36，字体加粗（FontWeight.Bold），并且其透明度受opacityValue状态变量控制，同时还添加了一个动画效果，动画相关配置如下：.animation({duration:2000,iterations:1,onFinish: ()=>{} })意味着这个文本元素在显示时有一个时长为
2000毫秒（2秒）的动画过程，动画仅执行一次（iterations: 1），当动画结束时执行onFinish回调函数（这里函数体为空，可能根据实际需求补充相应逻辑）。类似的还有另外两个文本元素：
Text('增加了!').fontColor(Color.White).fontSize(36).fontWeight(FontWeight.Bold)这个文本显示 “增加了！”，字体颜色为白色，字体大小等设置与之前类似，不过动画配置有所不同，时长为
1500毫秒（1.5秒），且会重复执行10次（iterations: 10）。（3）图像元素（
Image）有两处使用了
Image来显示图片：Image($r('app.media.smartCat')).width(200)这是加载一张图片（通过
$r('app.media.smartCat')这种资源引用方式，具体取决于对应框架的资源管理机制），并设置图片宽度为200单位（具体单位也看框架默认设置，可能是像素等），其透明度同样受opacityValue状态变量控制，也有一个时长2000毫秒、执行一次的动画效果。还有：
Image($r('app.media.RossyYan')).width(200).opacity(0.15)加载另一张图片（
$r('app.media.RossyYan')），宽度设置为200，并且初始透明度被设置为0.15，不过这里没有看到额外的动画效果添加到这个特定的图片元素上（与前面带动画的元素对比而言）。
👋实验小结
在本次对 Welcome 组件的探索过程中，虽略有收获，但深知仍有漫漫长路要走。
从代码架构层面而言，@Entry 指明入口、@Component 助力复用、@Preview 便于预览，只是初窥门径，为开发流程带来些许便利。@State 变量操控元素透明度，在页面加载时有了初步动态呈现，尚不算精巧。Column 布局结合渐变背景，安置文本、图像，勉强构建出可用界面。动画增添几分生气，可提升空间巨大。尤其动画回调与 Blank 组件，细节粗糙，后续定当潜心钻研，力求精进。
