【HarmonyOS NEXT开发——ArkTS语言】欢迎界面（启动加载页）的实现【合集】

😋环境配置：华为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 组件，细节粗糙，后续定当潜心钻研，力求精进。